使用Vue脚手架快速创建项目

InsectMk2023-10-012023-10-01

前言

最近在学校老师的带领下，开发一个练手项目，叫做传智健康。

这是一个单体项目，后端还是比较常规，前端使用的是Vue+Element，但是并未使用组件化。

再加上没有使用前端工程化，前端的代码显得非常杂乱，难以维护，所以想对其进行修改，打算将其修改为前后分离的项目。

之前没有接触过前端开发，所以从最简单的搭建脚手架开始吧~

因为要使用前端工程化，所以必须要用到Node来构建我们的工程化项目。

你可以选择去官网下载单体的Node。

也可以选择下载NVM，NVM的下载可以参考站内文章：安装Node版本管理工具。

安装好Node后，就可以安装我们的Vue脚手架了，在终端执行npm install -g @vue/cli以安装Vue脚手架

程序员金句：警告不是错。

执行完成后，会出现added xxx packages in xxm，就安装成功啦。

进入终端，并切换到你项目想存放的目录后键入vue create <项目名称>以开始创建。

可以看到默认给了我们三种方案：

这里演示手动安装

使用方向键选择Manually select features选项，使用空格键选中（基于我的认知，选择了如下内容）：

选项解释如下：

选项	说明
Babel	使用Babel可以将新的JavaScript语法转换为浏览器可以理解的旧版本语法，以兼容性更好地支持不同浏览器。
TypeScript	选择此选项可以使用TypeScript来编写你的Vue应用程序，它是一种类型安全的JavaScript超集。
Progressive Web App (PWA) Support	选择此选项会为你的应用程序添加Progressive Web App支持，使你的应用可以像本地应用一样运行。
Router	选择此选项将自动安装和配置Vue Router，它是Vue的官方路由器，用于管理应用程序的不同页面之间的导航。
Vuex	选择此选项将自动安装和配置Vuex，它是Vue的官方状态管理库，用于在应用程序中管理全局状态。
CSS Pre-processors	选择此选项可以选择使用哪种CSS预处理器，例如Sass、Less或Stylus，以增强你的样式表编写体验。
Linter / Formatter	选择此选项将添加代码质量和风格检查工具，例如ESLint，并自动格式化你的代码。
Unit Testing	选择此选项将添加单元测试的支持，你可以使用工具如Jest或Mocha来编写和运行测试。
E2E Testing	选择此选项将添加端到端测试的支持，你可以使用工具如Cypress或Puppeteer来模拟用户操作并进行应用的整体测试。