具体步骤如下:

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

 

如有漏洞,欢迎互动指教!!!!!!!!!!!!!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐