vue之vue-cli2.x升级为vue-cli3.x后构建项目

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/yangfan_357/article/details/99678140

具体步骤如下：

1.vue-cli2.x.x 版本卸载

npm uninstall -g vue-cli

2.vue-cli3.x.x 版本安装

npm install -g @vue/cli

注意：3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli

3.检测vue版本（注意：-V, “V”大写）

vue -V

4.构建项目（注意：“vueproject6” 为项目名称）

vue create vueproject6

5.填写项目相关描述

（1）这里如果你是第一次用3.0版本的话，是没有默认配置前面的yf的那一条选项的，只有默认配置和自己配置两个选项，这里是让你选的，推荐选择“自己配置”

（2）当你选择后自己配置后会出现下面图上的东西，这里你可以自由选择用哪些配置，按上下键 选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步，这里我选择了常用到几个选项（Babel、Router、Vuex、CSS Pre-processors），（注意：绿色*图标是代表被选中的选项）

(*) Babel    //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

( ) TypeScript // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，目前较少人再用

( ) Progressive Web App (PWA) Support    // 渐进式Web应用程序

(*) Router   // vue-router（vue路由）

(*) Vuex    // vuex（vue的状态管理模式）

(*) CSS Pre-processors   // CSS 预处理器（如：less、sass）

(*) Linter / Formatter   // 代码风格检查和格式化（如：ESlint） (注意：若不选择该项可省略以下的第5步和第6步，建议不选该项，不然运行过程中命令窗口会一直进行代码检查)

( ) Unit Testing   // 单元测试（unit tests）

( ) E2E Testing   // e2e（end to end） 测试

（3）上面我选择添加了 Router 所以这里会问我需不需要使用 history 模式，选择"Y"然后进行下一步

（4）下一步之后询问你安装哪一种 CSS 预处理语言，可以根据自己的习惯选择，我选择的是stylus（推荐选Less，因为后面我也开始选Less啦）

(5) 下一步之后询问你选择哪个自动化代码格式化检测，我选择的是 ESLint + Prettier

（6）下一步之后询问你选择哪个语法检查方式，第一个选项是保存就检测；第二个是fix和commit的时候检测；这里我选择的是第一个选项 Lint on save

（7）下面这两个选项是问像babel,postcss,eslint这些配置文件放哪？第一个选项是：放独立文件放置，第二个选项是：放package.json里，这里推荐放独立文件中。

(8) 下一步之后询问你是否将以上这些将此保存为未来项目的预配置？这里选择“Y”

（9）最后一个是描述项目

（10）回车确定等待下载

（11）装好后，启动

cd vueproject6 //进入到项目根目录

npm run serve //启动项目 (注意：和vue-cli2.X的启动命令不同啦)

（12）这里发现少了vue.config.js文件，那以前的配置怎么搞？

下边你要做的就是在根目录下新建一个vue.config.js文件，进行你的配置，具体配置看文档，我在最下边简单罗列了几个

[code]let webPath = "test"; //测试
// webPath = "hxInvestment1.01";
module.exports = {
// 基本路径
publicPath: `/${webPath}`,
outputDir: webPath, // 打包后文件夹名字
productionSourceMap: false, // 是否生成map映射文件
devServer: {
proxy: 'http://nodejs999.com'
},
// webpack打包时 忽略以下模块
configureWebpack: {
externals: {
vue: "Vue",
vuex: "Vuex",
"vue-router": "VueRouter",
"element-ui": "ELEMENT"
}
}
}

 

注意：当然如果你不想用3.0的话，还是可以继续使用2.0的，vue-cli3使用相同的vue二进制文件，因此它覆盖了vue-cli2，如果你还需要遗产vue init 功能，你可以安装一个全局桥，这样你就可以继续运行你的vue-cli2.X版本的项目啦，命令行如下：

npm install -g @vue/cli-init

 

如有漏洞，欢迎互动指教！！！！！！！！！！！！！