装置

假如想要运用vue cli 3.0 起首须要全局装置，条件请求Node.js版本必需是8.0及以上

npm install -g @vue/cli

vue cli 3.0默许会掩盖vue cli 2.0 ，假如想要在运用3.0版本的时刻同时运用2.0版本，那末实行以下敕令

npm install -g @vue/cli-init

该敕令是装置一个桥接东西，2.0版本的敕令依旧会被保留

vue init webpack test-2

建立

vue create hello-cli3

也能够经由过程敕令翻开一个图形化界面举行设置

vue ui

设置

在3.0版本中会让我们自行挑选须要的设置

第一个选项default是天生一个默许的浅易设置的模板，能够类比为之前 2.0 版本中的webpack-simple模板，假如正式开辟的话，发起挑选Manually select features本身举行设置

在挑选Manually select features后，会让我们挑选模板中举行哪些设置，新增加了增加对TS和PWA的支撑，这里能够依据项目状况本身挑选须要运用那些，空格选中/作废，A键全选

接下来会让我们挑选要运用的预编译东西，挑选一个本身经常使用的

然后会让我们挑选代码格式化检测东西

这里供应两个选项，保留的时刻检测照样在commit和fix的时刻检测，能够依据项目须要举行挑选

这里假如不挑选前面的 Linter/ Formatter就不会涌现该选项，也能够在package中删撤除相干代码

"eslintConfig": {
    ...
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier" //删撤除这里
    ],
    ...
  },

然后会讯问我们要将babel 等这些文件安排到 一个自力文件 / package.json，引荐安排到一个自力文件

然后会让我们挑选是不是保留适才的设置，第一项示意保留，保留以后下次再建立时就有我们之前的设置了，不须要再设置一遍，然后能够为该设置增加一个形貌

在我们设置了这两项以后，再次运用vue create xxx 会涌现我们之前的设置让我们能够直接复用之前的设置

假如后期我们想要删除之前设置的模板，能够找到用户下的.vuerc的json文件，找到presets项，删撤除对应模板称号及设置即可，也能够修正对应设置来变动模板

启动

在VUE CLI 3 中默许的下载运用yarn，所以敕令运用yarn

yarn serve

打包

yarn build

官方文档地点

设置vue.config.js

在vue cli 3.0中作废了config设置文件，假如我们想要分外设置，须要在根目录新建一个vue.config.js文件，在该文件中举行设置

设置别号

const path=require("path");

function resolve(dir){
    return path.join(__dirname,dir)
}

module.exports={
    chainWebpack:config=>{
        config.resolve.alias
        .set("views",resolve("src/views"))
    }
}

设置代办

依旧是采纳http-proxy-middleware 做的跨域处置惩罚

module.export={
    devServer:{
        host:'localhost',
        port:8080,
        proxy: {
            '/api': {
                target: "https://api.douban.com/",
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
    }
}

处置惩罚首页白屏

在 3.0 中依旧存在打包后首页白屏的题目，解决方案就是设置baseUrl

module.exports = {
    baseUrl:"./"
}

越发细致的关于vue.config.js文件的设置，能够参考这篇文章