vue-cli

12 Sep 2018

vue-cli

Guide

type

• app
• library

• wc

• @vue/cli
• @vue/cli-service
• @vue/cli-plugin-
• vue-cli-plugin-
• Development
  • Browser Compatibility
    • browserslist
    • Polyfills
  • HTML 和静态资源
    • index file public/index.html
    • interpolation with loadash
      • e.g <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      • <%= VALUE %>
      • <%- VALUE %>
      • <% expression %>
    • preload <link rel="preload">
    • prefetch <link rel="prefetch">
    • Disable Index Generation
    • Building a Multi-Page App
    • Static Assets Handling
    • Relative Path Imports
    • URL Transform Rules
      • absolute: /images/foo.png
      • relative: ./
      • module: <img src="~some-npm-package/foo.png">
      • module: <img src="@some-npm-package/foo.png">, interpret to <projectRoot>/src
    • The public Folder

        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      
        data () {
            return {
                baseUrl: process.env.BASE_URL
            }
        }       
                  
        <img :src="`${baseUrl}my-image.png`">
      
      

  • CSS 相关
  • webpack 相关
  • Enviroment Variables and Modes
  • Build Targets
  • Deployments

    Config Reference

• Global Config
  • ~/.vuerc
  • vue config
• Target Browsers
• vue.config.js
  • loaded by @vue/cli-service
  • or by vue section in package.json

      module.exports = {
          baseUrl: '/my-app/' or './',
          outputDir: 'dist',
          assetsDir: '',
          indexPath: 'index.html',
          filenameHashing: false,
          pages: undefined,
          lintOnSave: 'true',
          lintOnSave: process.env.NODE_ENV !== 'production',
          runtimeCompiler: 'false',
          transpileDependencies:[], // 转译 node_modules/ 中的依赖
          productionSourceMap: true,
          crossorigin: undefined,
          integrity: false,
          configureWebpack: {
              plugins: [
              new MyAwesomeWebpackPlugin()
              ]
          },
          chainWebpack: '',
          css.modules: false,
          css.extract: false,
          css.sourceMap: false,
          css: {
              loaderOptions: {
                  css: {
                      // 这里的选项会传递给 css-loader
                  },
                  postcss: {
                      // 这里的选项会传递给 postcss-loader
                  }
              }
          },
          devServer: {
              proxy: 'http://localhost:4000'
          },
          parallel: true,
          pwa: {},
          pluginOptions: {
              foo: {
              // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
              }
          },
          chainWebpack: config => {
              config.plugins.delete('html')
              config.plugins.delete('preload')
              config.plugins.delete('prefetch')
          }
    
    
                
    
    
    
    
    
    
    
                
      }
    

• Babel
  • @vue/babel-preset-app
  • babel.config.js
  • Polyfills

• ESLint @vue/cli-plugin-eslint

  • .eslintrc
  • eslintConfig in package.json
• TypeScript @vue/cli-plugin-typescript
  • tsconfig.json
• Unit Testing
  • Jest
  • Mocha
• E2E Testing
  • Cypress
  • Nightwatch

Plugin Dev Guide

Plugins

Q & A

1. what is vue-loader, babel-loader, lint-loader etc. ?
2. Javascript moduel, moduleA.js? moduleB/index.js?

   See Learn the basics of the JavaScript module system and build your own library

   Telling stories is as basic to human beings as eating. More so, in fact, for while food makes us live, stories are what make our lives worth living - Richard Kearney

   • tools
     • CommonJS
     • AMD
     • UMD
     • ES6 (Harmony)
   • Best Practices
     • Tree shaking: import , export
     • Webpack vs Rollup vs Babel?
     • webpack:
       • code splitting,
       • async loading of bundles,
       • tree shaking,
     • UI Libraries have a dist folder that has the bundled and minified version for ES and UMD/CJS module systems as a target. There is a lib folder that has the transpiled version of the library.
     • Core Packages have just one folder which has the bundled and minified version for CJS or UMD module system as a target.