# Vue-cli 3
###### tags: `Vue`
快速創建一個vue.js + webpack 的開發專案

> 首先npm全局安裝vue-cli

npm install -g @vue/cli

創建專案可以用command也可以用vue ui介面創立
> 建立專案

$ vue ui  //透過介面建立
or
$ vue create [project name]  //指令建立

在vue-cli 3上安裝的plugins都會自動去設定config，所以在安裝插件時，最好先commit過在安裝，可以使用ui 與 command 安裝插件

$ vue add @vue/eslint  //透過指令，插件前面都是帶有＠符號的

## 配置webpack其他項目
> 新增vue.config.js檔案

vue.config.js 範例：

const path = require("path");
const webpack = require("webpack");

module.exports = {
  baseUrl: "./",
  lintOnSave: false,
  devServer: {
    contentBase: path.resolve(__dirname, "dist/"),
    port: 8080,
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    quiet: true
  }
};

### chainWebpack 用來改變webpack設定

### 設定 alias 搭配 ProvidePlugin

module.exports = {
    config.resolve.alias.set('jquery',path.resolve('/node_modules/jquery/dist/jquery.min.js'));
    config.plugin("provide").use(webpack.ProvidePlugin, [
      {
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
      }
    ]);
}

## 遇到的情況：

### runtimeCompiler: true

如果使用的模板不在 <tempale></tempale> 裡面，在編譯的時候會無法使用，需要加上這個設定

module.exports = {
    runtimeCompiler: true,
}