@vue/cli 3 安裝搭建及 webpack 配置

  @vue/cli  是一個基於 Vue.js 進行快速開發的完整系統。

 @vue/cli   基於node服務  須要8.9以上版本 能夠使用 nvm等工具來控制node版本  構建於 webpack 和 webpack-dev-server 之上 

 安裝  

若是已安裝舊版 須要先卸載舊版本 :  

1 npm uninstall vue-cli -g 
//or
2 yarn global remove vue-cli

任一命令安裝全局新包:

1  npm install -g @vue/cli   
2   //or
3  yarn global add @vue/cli
4   //or
5  cnpm global add @vue/cli

 

查看版本:

vue --version
//or
vue -V

建立項目:

vue create  my-project //項目名
// Windows 上經過 minTTY 使用 Git Bash，交互提示符並不工做。  
//你必須經過      啓動這個命令。winpty vue.cmd create hello-world

建立時會提示  preset 預置項

能夠選擇默認配置

也能夠選擇手動配置

Please pick a preset: 
> vue-router base (vue-router, vuex, less, babel, pwa, unit-mocha)  //配置過的預置項(preset)

default (babel, eslint) Manually select features //默認的preset
Manually select features //手動配置須要的preset

在操做提示的最後你能夠選擇將已選項保存爲一個未來可複用的 preset。

同時 如今能夠可視化建立項目:

vue ui

命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目建立的流程。

webpack 配置

在項目根目錄手動建立 vue.config.js

導出一個對象 :

module.exports = {
  
}

有些webpack 選項不能直接修改

好比 應該修改 vue.config.js 中的 outputDir 而不是修改 webpack 中的 output.path

 基於環境有條件地配置行爲，或者想要直接修改配置:

 1 module.exports = {
 2      baseUrl: '/',
 3      outputDir: 'dist', //打包輸出目錄默認dist
 4   configureWebpack: config => {
 5     if (process.env.NODE_ENV === 'production') {
 6       // 爲生產環境修改配置...
 7     } else {
 8       // 爲開發環境修改配置...
 9     config.resolve.alias['~'] = __dirname + path.join('/src/assets');
10     }
11   }
12 }

 baseUrl 從Vue CLI 3.3 起已棄用，請使用publicPath。

鏈式操做

@vue/cli  內部的webpack 配置是經過 webpack-chain 維護的。

配置選項:

module.exports = {
    baseUrl: '/',
    outputDir: 'dist', //打包輸出目錄默認dist
   // assetsDir: 'bbbbb', //放置生成的靜態資源 默認 ''
    chainWebpack: config => { //會接收一個基於 webpack-chain 的 ChainableConfig 實例。容許對內部的 webpack 配置進行更細粒度的修改。 
       config.resolve.alias.set('~',path.join(__dirname, '..','src/assets')) 
　　　　　　},

 }

更多細節可查閱 vue.config.js 

 Owen 的我的博客