引言:
由于vue-cli脚手架2到3之间的过渡有一些的小问题,而大家在公司开发项目时又大多数用的脚手架3,所以本文详细一步一步的带着你,从脚手架2怎么卸载到脚手架3怎么安装以及中途出现的BUG 的解决,希望能够帮到你。
1-全局卸载脚手架2
- 首先去官网查看文档:https://cli.vuejs.org/zh/guide/installation.html,点击左侧栏安装,如图所示:
- 这里需要把(1x或2x)版本一定要卸载干净,最后是把所有的文件项目关了,直接win+R在cmd中卸载原先版本,命令如下:
npm uninstall vue-cli -g 或 yarn global remove vue-cli
2-输入以上命令之后,判断是否卸载干净,下图是没有卸载之前的
- vue -V 查看自己卸载之前的版本
-
vue -V 查看版本,结果:没有或者报错,那就是卸载掉了,继续下一步
-
这里需要注意一点,就是在安装脚手架3时,一定要查看一下自己的版本,node -v 这个很重要
-
我自己的版本低于v8.9.xx一下,所以出了点小错误,大家要切记!!!
-
更新node版本,目前的办法就是直接去官网下载安装覆盖即可,没有node update 这么一说
-
官网直接安装node方法:(下载.msi文件一路下一步即可)
3-全局安装脚手架3
npm install -g @vue/cli 或 yarn global add @vue/cli
官网命令直接下载完的时版本v4.0.5的,但是平常我们常用的,和公司用的话是v3.9.x的版本,那么改如何指定版本下载呢?
- 3.0以下😔
npm install -g vue-cli@版本号
- 3.0以上😀
npm install -g @vue/cli@版本号
-
举个例子下载,我下载的是v3.9.3的版本
npm install -g @vue/cli@3.9.3
4-vue -V 查看版本,如果是3.9.x 就是安装成功了
5-如果希望自己的电脑可以使用脚手架2也可以使用脚手架3,此时需要安装桥接工具包
npm install -g @vue/cli-init
- 这里你可以使用vue init webpack demo 脚手架2的命令创建一个模板试一下(恭喜你距离大神又进了一步)
6-使用脚手架2的命令下载一个项目
- vue init webpack 名字 如果成功了,此时脚手架2可以使用了
- 然后,下面的这个是脚手架3下载项目的命令
vue create 名字 如果成功了,此时脚手架2或者脚手架3都可以使用了
7-脚手架安装成功之后创建项目使用
- 脚手架2 如果下载项目成功,运行命令如下:
打包:cd gshop (进到你脚手架下载的项目中,gshop你的脚手架项目名称) npm run dev (或者 npm start)
npm run build 运行打包:serve dist
- 脚手架3 如果下载项目成功,运行命令如下;
打包:cd gshop(你用脚手架创建的项目名称) npm run serve
npm run build 运行打包:serve dist
8-脚手架3中如何设置浏览器自动打开: 在package.json中找到对应的serve 后面 – open ,具体可看成型的文件
- 在项目的根目录下的package.json文件中加入,具体如图所示:
9-脚手架3中使用了脚手架2的实例Vue的代码,报错:
vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in )
- 出错原理如下:
- 脚手架3在编译代码的时候,使用的是vue.runtime.js 运行时的文件进行编译
- 脚手架2在编译代码的时候,使用的是vue.esm.js,直接进行编译
- 解决方法:
官网解决办法如下:
- 操作步骤如下:
- 从脚手架2的模板中的build配置文件中找到webpack.base.conf.js文件,复制图中代码块
- 在脚手架3的项目中新建一个vue.config.js文件,把刚刚复制的代码放到文件中,具体配置如下:
const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } module.exports = { configureWebpack: { resolve: { // 后缀为.js和.vue和.json都可以省略 extensions: ['.js', '.vue', '.json'], alias: { // 配置了esm.js这个文件 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') // 这个是路径,就是如果不想写根目录下的src你可以用@替代 // resolve是一个函数的调用,脚手架3里没有可以直接去脚手架2的刚刚配置文件找 } } },
- 图示:
- 从脚手架2的模板中的build配置文件中找到webpack.base.conf.js文件,复制图中代码块
10-总结
以上过程就是从vue-cli脚手架完美过渡到脚手架3以上的详解过程,以及出现的错误的解决,希望大家可以完美解决.