Vue 3.0 项目搭建

Vue 3.0 项目初始化

第一步，安装 vue-cli：

npm install -g @vue/cli

安装成功后，我们即可使用 vue 命令，测试方法：

 vue -V

第二步，初始化 vue 项目：

vue create vue-test

随后我们勾选：Router、Vuex、CSS Pre-processors 和 Linter / Formatter，这些项目必须的插件依赖后进入项目进行升级。

升级 Vue 3.0 项目

目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，vue-cli 还没有直接支持，我们进入项目目录，并输入以下指令：

cd vue-test
vue add vue-next

执行上述指令后，会自动安装 vue-cli-plugin-vue-next 插件，该插件会完成以下操作：

• 安装 Vue 3.0 依赖
• 更新 Vue 3.0 webpack loader 配置，使其能够支持 .vue 文件构建
• 创建 Vue 3.0 的模板代码
• 自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本，如果未安装则不会升级
• 自动生成 Vue Router 和 Vuex 模板代码

完成上述操作后，项目正式升级到 Vue 3.0。