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

在完成了node.js的安装之后，我们就可以正式来创建我们的Vue工程化项目了，我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite，其中可用于创建vue2与vue3的项目，而Vite是比较新的，它只能创建vue3的工程化项目。以下为大家演示是用创建vue2还有Vite创建vue3，这也是我学习时所用到的。
Vue-Cli创建Vue2项目npm i -g vue
npm i -g @vue/clivue项目名称（项目名称要用英文命名，不包含大写）
cd 项目名称
npm run serve
2.Vite创建vue3项目（基础篇）

文章插图
相较vue-cli，vite的项目文件创建速度更快，体积更小，创建的步骤也更简单
npm init vite-app 项目名称 // 二选一
npm init vite@
cd 项目名称（创建时候的项目名称）
npm
npm run dev
3.Vite创建vue3项目（补全版）
如果我们用上一个步骤创建vite项目，得到的是一个基本能运行的版本，但是我们知道，在vue中包括有，vuex，等插件，我们可以后期一个一个进行引入，但是我们知道一个成熟的项目是会包括路由，代码规范等插件的，所以我们可以在创建项目之初就一同全部引入了，这样可以解决不少麻烦
npm init vue@
在选择完这些插件后，接下来是启动我们的项目文件，启动项目文件之前，我们先需要安装依赖，执行以下命令
cd 项目名称
npmnpm run dev
以上步骤如果能够正常运行即可，如果报错了，大概率是因为node版本太低了，如图所示
解决方案是需要安装更高版本的node，一个方法是将先将node先删除，然后重新下载一个更高版本的。但是这个方法太花费时间了，如果我们回去开发vue2项目，太高版本的node也会有兼容问题，所以我这里推荐的是nvm管理工具，关于nvm管理工具的安装和配置请看我主页的 Vue工程项目创建的前提-node.js的安装步骤二的“安装nvm管理工具”
当我们安装完nvm后，就能在里面管理我们的node版本了
【Vue工程化项目创建-VueCli与Vite】

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