vue/cli 3使用

近日,Vue做者尤雨溪發佈了正式的vue cli 3.0,基於webpack4,趕忙試一下.
文檔地址vue-cli

簡介

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統

使用

<!-- 安裝 -->
npm install -g @vue/cli
<!-- 建立項目 -->
npm create new-cli

而後就是配置,可默認(babel,eslint),自定義
自定義有 babel ts pwa vue-router vuex css預處理 以及Linter/Formatter,unit testing e2e testing

• 選了router 會再次選是否用history模式
• 在這裏選了css預處理又會讓選 less scss stylus

• eslint 又有幾項

  • 只防止出錯
  • airbnb 配置
  • 標準配置
  • eslint +prettier
• 還有一項是把配置文件如babel,postCss eslint 放單獨文件,仍是放package.json裏,固然單獨了
• 最後有個保存配置,之後用

而後就是安裝依賴
目錄以下

沒有cli2版本的build和config,多個babel.config.js
官網介紹是能夠新建個vue.config.js進行相關webpack配置,好比

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  //loader
   chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的選項...loader
          return options
        })
  },
  //生產環境關閉map
 productionSourceMap:false,
 //基本URL
 baseUrl: process.env.NODE_ENV === 'production'
    ? 'http://www.baidu.com'
    : 'https://www.google.com',
 outputDir:'dist', //build 目錄
 assetsDir:'',//asset目錄
 indexPath:'index.html',//指定index.html 路徑
 filenameHashing:true,//文件名帶hash
//  multi-page模式,每一個「page」應該有一個對應的 JavaScript 入口文件
 pages: {
    index: {
      // page 的入口
      entry: 'src/index/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當使用 title 選項時，
      // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在這個頁面中包含的塊，默認狀況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導爲 `public/subpage.html`
    // 而且若是找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導爲 `subpage.html`。
    subpage: 'src/subpage/main.js'
  },
  //css配置
  css: {
    sourceMap:false,//css source map
    loaderOptions: {
      css: {
        // 這裏的選項會傳遞給 css-loader
      },
      postcss: {
        // 這裏的選項會傳遞給 postcss-loader
      }
    }
  },
  //dev server
  devServer: {
    host:127.0.0.1
    port:8000,
    proxy: 'http://localhost:4000',
    overlay: {
      warnings: true,//警告
      errors: true//錯誤
    }
  }


}

其餘

1. 可以使用vue serve和vue build 對單個vue文件快速開發
2. vue ui 圖形化界面建立管理項目