Vue-cli脚手架2到3过渡开发的详细步骤以及过程中的相关问题的解决

引言：

由于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/[email protected]
  

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,直接进行编译
• 解决方法：
  官网解决办法如下：
  
• 操作步骤如下：
  1. 从脚手架2的模板中的build配置文件中找到webpack.base.conf.js文件，复制图中代码块
  2. 在脚手架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的刚刚配置文件找
     		}
     	 }
     	},
     

  • 图示：
    

10-总结

以上过程就是从vue-cli脚手架完美过渡到脚手架3以上的详解过程，以及出现的错误的解决，希望大家可以完美解决.