前言

我司前端技术自从我来了之后就一直定位vue, 项目经历了webpack3.0迁移到webpack4.0 和vue-cli2.0升级到vue-cli3.0，感觉前端技术更新迭代速度之快，顿时头疼啊，最近刚用vue-cli3.0撸完了一个后台管理系统，现在来跟大家聊聊vue-cli3.0

环境安装

以下为mac版本

使用 npm 全局安装 vue-cli ：

sudo npm i -g @vue/cli

下载完成后执行

vue -V

目前版本已经更新到了 3.0.3

vue -h

查看新版本的帮助信息

Options:

  -V, --version                         output the version number
  -h, --help                            output usage information

Commands:

  create [options] <app-name>           create a new project powered by vue-cli-service
  add <plugin> [pluginOptions]          install a plugin and invoke its generator in an already created project
  invoke <plugin> [pluginOptions]       invoke the generator of a plugin in an already created project
  inspect [options] [paths...]          inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]               serve a .js or .vue file in development mode with zero config
  build [options] [entry]               build a .js or .vue file in production mode with zero config
  ui [options]                          start and open the vue-cli ui
  init [options] <template> <app-name>  generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]              inspect and modify the config

  Run vue <command> --help for detailed usage of given command.

可以清楚的看到创建项目命令已经由

vue init <project-name>

变成了

vue create <app-name>

创建项目

那么接下来我们开始创建项目

vue create my-project

回车，页面变成了这样

注意：现在已经不是选择模版了，而是presets （预设）首先是问你是否使用默认的preset还是手动配置功能，这里我们选最后的Manually select features 手动配置

Vue CLI v3.0.3
? Please pick a preset: (Use arrow keys)
  xs-default (vue-router, vuex, less, babel, pwa, eslint)
  pro_admin (vue-router, vuex, less, babel, pwa)
  pro_admin_pc (vue-router, vuex, less, babel)
  default (babel, eslint)
❯ Manually select features

接下来是一个多选的界面，可以使用空格键选中或是取消， a键选中所有，i键反选

这里就很傻瓜了，你要集成什么就选就行了。我这里选个我比较常用的。

Babel
Vue-router
Vuex
CSS预处理

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

router是否使用history模式我这里使用history模式

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

CSS预处理这里我选Less

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS
❯ Less
  Stylus

这里是把babel,postcss,eslint这些配置文件放哪

独立文件放置
放package.json里

个人喜好这里我独立放

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

最后就是选择是否记录一下？下次继续使用这套配置，这里咱就不存了这玩呢存多了我都不知道怎么删知道的小哥哥小姐姐麻烦留言告诉我下哈。

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

ok最后回车等待中...

Vue CLI v3.0.3
✨  Creating project in /Users/lijinpeng/Documents/web/demo/my-project.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.9.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...

success Saved lockfile.
✨  Done in 70.85s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.9.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...

success Saved lockfile.
✨  Done in 10.66s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project my-project.
👉  Get started with the following commands:

 $ cd my-project
 $ yarn serve

嗖装好了

启动项目进入目录,启动项目这里 vue-cli 3.x 默认会打开浏览器地址也会打在控制台。

➜  cd my-project
➜  my-project git:(master) yarn serve
yarn run v1.9.4
$ vue-cli-service serve
 INFO  Starting development server...
 98% after emitting CopyPlugin

 DONE  Compiled successfully in 3299ms                                                                                                     18:12:45


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.3.137:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

项目分析

首先看下整体目录比 2.x之前是精简了不少

去掉了2.x build和config等目录 ,大部分配置都集成到vue.config.js这里了

vue.config.js里

大概包括了配置常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等，详细配置可以看官方文档详细config配置

module.exports = { 
    // Project deployment base 
    // By default we assume your app will be deployed at the root of a domain, 
    // e.g. https://www.my-app.com/ 
    // If your app is deployed at a sub-path, you will need to specify that 
    // sub-path here. For example, if your app is deployed at 
    // https://www.foobar.com/my-app/ 
    // then change this to '/my-app/' 
    baseUrl: '/', 
    
    // where to output built files 
    // 打包后的输出目录 
    outputDir: 'dist', 
    
    // A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
    assetsDir: '',
    
    // whether to use eslint-loader for lint on save. 
    // 保存时是不是用eslint-loader 来lint 代码 
    lintOnSave: false, 
    
    // use the full build with in-browser compiler? 
    // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only 
    // 使用runtime-only 还是 in-browser compiller 
    compiler: false, 
    
    // tweak internal webpack configuration. 
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md 
    // webpack 配置~ 
    chainWebpack: () => {}, 
    configureWebpack: () => {}, 
    
    // vue-loader options 
    // https://vue-loader.vuejs.org/en/options.html 
    // vue-loader 配置 
    vueLoader: {}, 
    
    // generate sourceMap for production build? 
    // 生产环境的sourceMap 要不要？ 
    productionSourceMap: true, 
    
    // CSS related options 
    css: { 
        // extract CSS in components into a single CSS file (only in production)
        extract: true, 
        
        // enable CSS source maps? 
        sourceMap: false, 
        
        // pass custom options to pre-processor loaders. e.g. to pass options to 
        // sass-loader, use { sass: { ... } } 
        loaderOptions: {}, 
        
        // Enable CSS modules for all css / pre-processor files. 
        // This option does not affect *.vue files. 
        // 用不用 css Modules 啊？ 
        modules: false 
    }, 
    
    // use thread-loader for babel & TS in production build 
    // enabled by default if the machine has more than 1 cores 
    // 使用多线程否？ 
    parallel: require('os').cpus().length > 1, 
    
    // split vendors using autoDLLPlugin? 
    // can also be an explicit Array of dependencies to include in the DLL chunk. 
    // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode 
    // 用不用 autoDLLPlugin，厉害了 
    dll: false, 
    
    // options for the PWA plugin. 
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa 
    // pwa 相关 
    pwa: {}, 
    
    // configure webpack-dev-server behavior 
    // Webpack dev server 
    devServer: { 
        open: true,
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: 'http://192.168.226.47' // 配置跨域处理,只有一个代理
        // proxy: {
        //   '/api': {
        //     target: '<url>',
        //     ws: true,
        //     changeOrigin: true
        //   },
        //   '/foo': {
        //     target: '<other_url>'
        //   }
        // }, // 配置多个代理
        before: app => {}
    }, 
    // options for 3rd party plugins 
    pluginOptions: { 
        // ... 
    }
}

总结

本人也是刚用vue-cli3.0撸完了一个项目感觉整体要比2.x项目构架上简洁合理不少，使用起来也十分应手，整体感觉还是非常不错的。

本文也是使用vue-cli3.0 从环境、到创建、到配置进行了简单介绍，希望可以帮助到刚使用的人。