詳解vue-cli3使用

更新時間：2018年08月14日 09:54:34 作者：ghrace

這篇文章主要介紹了詳解vue/cli 3使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

近日,Vue作者尤雨溪發(fā)布了正式的vue cli 3.0,基于webpack4,趕緊試一下.

文檔地址vue-cli

簡介

Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)

使用

<!-- 安裝 -->
npm install -g @vue/cli
<!-- 創(chuàng)建項目 -->
npm create new-cli

然后就是配置,可默認(babel,eslint),自定義

自定義有 babel ts pwa vue-router vuex css預(yù)處理以及Linter/Formatter,unit testing e2e testing

選了router 會再次選是否用history模式
在這里選了css預(yù)處理又會讓選 less scss stylus
eslint 又有幾項
1. 只防止出錯
2. airbnb 配置
3. 標準配置
4. eslint +prettier
還有一項是把配置文件如babel,postCss eslint 放單獨文件,還是放package.json里,當然單獨了
最后有個保存配置,以后用

然后就是安裝依賴

目錄如下

沒有cli2版本的build和config,多個babel.config.js

官網(wǎng)介紹是可以新建個vue.config.js進行相關(guān)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
    })
 },
 //生產(chǎn)環(huán)境關(guān)閉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”應(yīng)該有一個對應(yīng)的 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']
  },
  // 當使用只有入口的字符串格式時，
  // 模板會被推導(dǎo)為 `public/subpage.html`
  // 并且如果找不到的話，就回退到 `public/index.html`。
  // 輸出文件名會被推導(dǎo)為 `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//錯誤
  }
 }


}

其他