【VUE】搭建Vue项目

🙋‍ 好久不见，甚是想念

⭐本期内容：搭建Vue项目

🏆系列专栏：从0开始的Vue之旅

安装node.js

安装教程可以参考前期文章哦：node.js的安装和配置

点击Win+R，回车，输入node -v 和npm -v则可查看node和npm的版本。

安装Vue-cli

执行命令：npm install -g @vue/cli 其中-g是全局安装

检查是否安装成功：执行命令vue -V（注意：是大V不是小v哦~）

在这里插入图片描述

用脚手架搭建vue项目

新建一个文件夹，在文件夹上的导航栏处输入cmd，点击回车

执行命令：vue create test，此时可以看到三个选项，前两个为默认选项，第三个为手动选择功能，按键盘上的上下箭头可进行选择。这里我们选择第三个手动选择功能选项。

接下来可以选择预设，选择Babel和Router，按空格键可进行选择。

以下是Vue2中这些选项的解释和功能：

1. Babel：Babel是一个广泛使用的JavaScript编译器，可以将ES6+的代码转换为向后兼容JavaScript版本，确保代码可以在旧版本的浏览器上运行。 允许开发者使用最新的JavaScript特性，而不用担心浏览器兼容性问题。
2. TypeScript：TypeScript是JavaScript的一个超集，添加了静态类型、接口和类等功能。提供更强的代码结构和类型检查，有助于大型项目的维护和开发。
3. Progressive Web App (PWA) Support：PWA是一种可以提供原生应用体验的网络应用，具有诸如离线访问、推送通知等功能。使得Vue应用可以像原生应用一样在移动设备上安装和使用，提供更丰富的用户体验。
4. Router：Vue Router是Vue.js官方的路由管理器。它和Vue.js深度集成，使得构建单页面应用(SPA)变得简单。管理页面之间的导航和路由，允许开发者定义路由规则、动态路由、导航守卫等。
5. Vuex：是Vue.js的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。提供状态管理，使得多组件之间的状态共享和同步变得简单。
6. CSS Pre-processors：CSS预处理器允许使用变量、嵌套规则、混合等功能来编写CSS，然后编译成普通的CSS代码。提供更强大和可维护的CSS编写方式。
7. Linter / Formatter：Linter和Formatter是代码质量和风格检查工具。帮助开发者检查代码中的错误和不符合规范的地方。确保代码质量和风格的一致性，减少错误。
8. Unit Testing： 单元测试是针对代码中的最小可测试单元（通常是函数或方法）进行的测试。确保每个代码单元都按预期工作，提高代码质量和可维护性。
9. E2E Testing ：端到端（E2E）测试是模拟用户操作，从应用的入口开始，一直到某个预期的输出结束，确保整个流程的正确性。确保整个应用的流程和交互都按预期工作。

选择Vue的版本，这里我们选择2.x

是否为路由使用历史记录模式，这里我们输入Y。

Vue Router中的history模式的好处主要体现在URL的外观和用户体验上。

• 更美观的URL：与默认的hash模式相比，history模式的URL更加干净和美观。在hash模式下，URL中会包含一个#符号，后面跟着路由的路径，如http://localhost:8080/#/home。而在history模式下，这个#符号被移除了，URL看起来更像一个传统的网站路径，如http://localhost:8080/home。
• 更好的用户体验：history模式提供了更接近于原生应用或传统网站的体验。由于URL中不包含#符号，用户可以更自然地通过浏览器的前进和后退按钮来导航。当用户在地址栏中直接输入或修改路由路径时，应用也能正确地响应。
• 与后端配合更灵活：虽然history模式在前端实现上更接近于传统网站，但它仍然依赖于前端路由来处理路由。这意味着后端服务器不需要为每个路由路径都提供实际的页面或资源。然而，为了确保刷新页面时不会出现404错误，后端服务器需要配置为对所有未知的路由路径都返回前端应用的入口文件。

选择配置地址，dedicated config files 是专用配置文件，package.json 定义了一个项目的元数据和依赖项，包含了关于项目如何运行、项目依赖哪些库、项目的名称、版本、描述、作者等详细信息。

这里我们选择In package.json

是否将其保存为未来项目的预设，这里我们输入N。接着回车，创建项目ing~

执行命令cd test，npm run serve

在浏览器输入http://localhost:8080/，看到如下页面则为创建成功

总结

以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏，持续更新呢~

咱们下期再见~