Vue CLI3 基本使用配置；

Vue CLI3

开始

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目： 

vue create my-project
# OR
vue ui

 可以通过 vue ui 命令使用 GUI install 和管理应用

vue ui

 详细操作vue ui：

https://www.baidu.com/link?url=R7zj_u_2FVdEgrzZWu0121-IH-xRigy_gtQY1NQal715jK9bHZvHic4MHujZuCz3QXKkF2iaiNi40ZA_UDSsZ_&wd=&eqid=b78cb55000002eb0000000065ce773f2

https://yq.aliyun.com/articles/622961#

在现有的项目中安装插件:vue add

vue add @vue/eslint

vue add 的设计意图是为了安装并调用Vue CLI插件 .这不意味着替换掉普通的npm包。 对于这些普通的npm包，你任然需要选用包管理器

warn(警告)： 我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器 并且很有可能更改你现有的file

也可以向安装的插件传递生成器选项(这样做会跳过命令提示): vue add @vue/eslint --config airbnb --lintOn save

vue-router 和 vuex 的情况比较特殊--他们并没有自己的插件。但是你任然可以这样添加他们

vue add router
vue add vuex

 如果一个插件插件语句被安装，你可以使用 vue invoke 命令跳过安装过程，只调用他的生产器。 这个命令会接收和vue add 相同的参数

Preset

一个Vue CLI preset 是一个包含create new project所需preset option 和 plugins 的JSON对象，让用户 无需再命令提示中选择他们。 在vue create 过程中save的preset 会被放在你的home folder下的一个配置文件中(~/.vuerc)你可以 通过直接edit这个file来调整、add、delete保持好的preset

Sample: {
  "userConfigFiles":true,
  "router":true,
  "vuex":true,
  "cssPrepreocessor":"sass",
  "plugins":{
     "@vue/cli-plugin-babel":{},
     "@vue/cli-plugin-eslint":{
         "config":"airbnb",
         "lintOn":["save","commit"]
      }
  }
}

vue.config.js 配置

// vue.config.js 配置说明
module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 将部署应用程序的基本URL
    // 将部署应用程序的基本URL。
    // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
    // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind } 
/*
  构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
  个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
  的字符串，
  注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
    // pages: {
        // index: {
            // entry for the page
            // entry: 'src/index/main.js',
            // the source template
            // template: 'public/index.html',
            // output as dist/index.html
            // filename: 'index.html'
        // },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
    lintOnSave: true,
    // productionSourceMap：{ type:Bollean,default:true } 生产源映射
    // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
    productionSourceMap: false,
    // devServer:{type:Object} 3个属性host,port,https
    // 它支持webPack-dev-server的所有选项

    devServer: {
        port: 8085, // 端口号
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自动启动浏览器
        // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        },  // 配置多个代理
    }
}

vue-cli 3.0 中 vue.config.js 配置路径别名

const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  lintOnSave: true,
  chainWebpack: (config)=>{
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('assets',resolve('src/assets'))
      .set('components',resolve('src/components'))
      .set('layout',resolve('src/layout'))
      .set('base',resolve('src/base'))
      .set('static',resolve('src/static'))
  }
}