vue之vue-cli2.x升级为vue-cli3.x后构建项目
具体步骤如下:1.vue-cli2.x.x 版本卸载npm uninstall -g vue-cli2.vue-cli3.x.x 版本安装npm install -g @vue/cli注意:3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli3.检测vue版本(注意:-V, “V”大写)vue -V4.构建项目(注意:“vuepr...
具体步骤如下:
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文件,进行你的配置,具体配置看文档,我在最下边简单罗列了几个
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
如有漏洞,欢迎互动指教!!!!!!!!!!!!!
更多推荐
所有评论(0)