Vue工程化项目创建-VueCli与Vite

在完成了node.js的安装之后，我们就可以正式来创建我们的Vue工程化项目了，我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite，其中VueCli可用于创建vue2与vue3的项目，而Vite是比较新的，它只能创建vue3的工程化项目。以下为大家演示是用VueCli创建vue2还有Vite创建vue3，这也是我学习时所用到的。

1. Vue-Cli创建Vue2项目

• 在创建之前需要全局安装vue与vue-cli，打开cmd执行以下两个命令：

npm i -g vue
npm i -g @vue/cli

• 安装完毕之后，打开cmd，进入到需要创建项目文件的路径，执行以下命令创建项目文件

vue create 项目名称（项目名称要用英文命名，不包含大写）

• 点击enter进入到创建的配置界面，可以选择默认vue3创建，默认vue2创建，还有自定义创建，这里我选择直接创建vue2（关于自定义创建可以选择router，Vuex等）

• 确定后等待自动创建vue2项目，创建成功后会显示以下画面

• 根据提示输入蓝色的命令即可启动服务，输入命令：

cd 项目名称
npm run serve

• 当出现以下Done提示后，就说明项目已经启动成功了，我们复制给出的Local或者Network地址，去浏览器里打开，就能成功看到我们的vue2项目了

• 我们可以回到创建的项目目录，将项目文件夹用编辑器打开（个人推荐VScode），就可以在里面进行代码编写了~

2.Vite创建vue3项目（基础篇）

相较vue-cli，vite的项目文件创建速度更快，体积更小，创建的步骤也更简单

• 进入到需要创建文件的目录路径，在此目录路径打开cmd，输入以下两个命令的其中一个，本案例选择第二个

npm init vite-app 项目名称 // 二选一
npm init vite@latest

• 在输入 npm init vite@latest 后回车，会提示选择你的项目名称（英文命名），点击回车

• 接下来会进入选择框架，我们学习的是vue，就选择vue框架

• 接下来后我们会选择一门编程语言，由于Vue+TypeScript已经是大势所趋，而且非常好用，我们这里选择TypeScript，而且Ts是Js的超集，所以Ts也是兼容Js的，所以不用担心不兼容的问题。

• 点击回车后，我们的vue3项目文件就创建好了

• 接下来是启动我们的项目文件，启动项目文件之前，我们先需要安装依赖，执行以下命令

cd 项目名称（创建时候的项目名称）
npm install

• 安装完依赖之后，我们就可以正式启动我们的项目了，运行以下命令启动服务

npm run dev

• 接下来就是将Local地址复制到浏览器中，就能看到我们的vue3项目了

3.Vite创建vue3项目（补全版）

如果我们用上一个步骤创建vite项目，得到的是一个基本能运行的版本，但是我们知道，在vue中包括有router，vuex，eslint等插件，我们可以后期一个一个进行引入，但是我们知道一个成熟的项目是会包括路由，代码规范等插件的，所以我们可以在创建项目之初就一同全部引入了，这样可以解决不少麻烦

• 进入到需要创建文件的目录路径，在此目录路径打开cmd，输入以下命令

npm init vue@latest

• 在输入 npm init vue@latest后回车，会提示选择你的项目名称（英文命名），点击回车

• Add TypeScript? - 选择yes

• Add JSX Support? - 选择yes

• Add Vue Router for Single Page Application development? - 选择yes

• Add Pinia for state management? - 选择yes

• Add Vitest for Unit Testing? - 选择yes

• Add an End-to-End Testing Solution? - 选择no

• Add ESLint for code quality? 选择yes

• Add Prettier for code formatting? 选择yes

在选择完这些插件后，接下来是启动我们的项目文件，启动项目文件之前，我们先需要安装依赖，执行以下命令

cd 项目名称
npm install

• 安装完成后执行以下命令

npm run dev

---

以上步骤如果能够正常运行即可，如果报错了，大概率是因为node版本太低了，如图所示

解决方案是需要安装更高版本的node，一个方法是将先将node先删除，然后重新下载一个更高版本的。但是这个方法太花费时间了，如果我们回去开发vue2项目，太高版本的node也会有兼容问题，所以我这里推荐的是nvm管理工具，关于nvm管理工具的安装和配置请看我主页的 Vue工程项目创建的前提-node.js的安装 步骤二的“安装nvm管理工具”

当我们安装完nvm后，就能在里面管理我们的node版本了

nvm list available          // 显示可以安装的所有node.js的版本
nvm install <version>       // 安装node.js的命名 version是版本号 例如：nvm install 8.12.0
nvm ls                      // 显示所有安装的node.js版本
nvm use <version>           // 切换到使用指定的nodejs版本

• 我这里已经安装过一个高版本和一个低版本node了，所以直接运行命令 nvm ls 查看 已安装的node，然后再执行nvm use 版本号 就可以切换node了

• 然后我们重新回到项目的根目录路径，重新运行 npm run dev，项目就能正常启动了

• 接下来就是将Local地址复制到浏览器中，就能看到我们的vue3项目了