vue-cli2 与 vue-cli3

Vue

格子衫很配哦

安装

node环境， http://nodejs.cn/download/

vue-cli2

npm install -g vue-cli
vue -V

vue init webpack my-project //文件名不能大写

Project name :项目名称，如果不需要就直接回车。注：此处项目名不能使用大写。
Project description:项目描述，直接回车
Author ：作者
vue build 构建方式（暂且这么解释）
两个选择（上下箭头选择，回车即为选定）
1.Runtime + Compiler:recommended for most users
(译：运行+编译：被推荐给大多数用户)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(译：只运行大约6KB比较轻量的压缩文件，但只允许模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈现函数。翻译不精准，意思大概是选择该构建方式对文件大小有要求)
这里推荐使用1选项，适合大多数用户的
install vue-router？是否安装vue的路由插件，需要就选y，否则就n（以下均遵循此方法）
Use ESLint to lint your code?是否使用ESLint检测你的代码？
（ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。）
Pick an ESLint preset:选择分支风格
选项有三个
1.standard(https://github.com/feross/standard) js的标准风格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
Setup unit tests? 是否安装单元测试（暂不详细介绍）
Pick a test runner 选择一个单元测试运行器
选项有三个
1.Jest（Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架）
2.Karma and Mocha
3.none
Setup e2e tests with Nightwatch(Y/n)?是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景”。）
Should we run ‘npm install’ for you after the project has been created?(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)
选项有三个
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回车到此等待安装完毕，会提示接下来的命令行

命令行启动 package.json script下查看和配置

启动

npm run dev

打包

npm run build

修改配置文件的话找相应的位置
eg:使用vue-cli生成的开发环境，直接修改config/index.js文件，把proxytable:{}
里面配置成如下,后面的api就都会走target

proxyTable: {
  '/api': {
    target: 'http://xxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

vue-cli3

npm install -g @vue/cli 

Vue-Cli 2和3是不能并存的，至少不能同时安装，只能保留一个

现在脚手架已经vue-cli3，但是有些老项目依赖还是vue-cli2，尤其是ini创建文件，还想用，怎么办

卸载你的Vue-Cli 2：npm uninstall vue-cli -g或yarn global remove vue-cli

安装Vue-Cli 3：npm install -g @vue/cli或yarn global add @vue/cli

安装一个包：npm install -g @vue/cli-init或yarn global add @vue/cli-init

vue create my-project

相比较而言，文件简单明了许多，这是很干净的项目结构，之后可以自行安装路由和vuex

npm install vuex -s
npm install vue-router -s

还可以如下骚操作

vue ui

按要求可以新建项目，配置自己选择或者默认

项目配置的话，在同一级文件下新建 vue.config.js，常用的也就 publicPath，代理，还有插件,具体的话可以看官网 https://cli.vuejs.org/

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',

  outputDir: 'dist',

  assetsDir: 'static',

  filenameHashing: true,

  // When building in multi-pages mode, the webpack config will contain different plugins
  // (there will be multiple instances of html-webpack-plugin and preload-webpack-plugin).
  // Make sure to run vue inspect if you are trying to modify the options for those plugins.
  pages: {
    index: {
      // entry for the pages
      entry: 'src/pages/index/index.js',
      // the source template
      template: 'src/pages/index/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be 
      title: '首页',
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    }
    // 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: ''
  },

  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],

  // 生产环境 sourceMap
  productionSourceMap: false,

  // cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: (config) => {
  },

  // webpack 链接 API，用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: (config) => {
    // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
    config.optimization
      .splitChunks({
        cacheGroups: {}
      });

    // 'src/lib' 目录下为外部库文件，不参与 eslint 检测
    config.module
      .rule('eslint')
      .exclude
      .add('/Users/maybexia/Downloads/FE/community_built-in/src/lib')
      .end()
  },

  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // 是否开启支持 foo.module.css 样式
    modules: false,

    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用