Vue Cli 3 初學

發表於 更新於 分類於 閱讀次數： Disqus：

練習vue cli3，主要是多頁面設定的部分，怕忘記紀錄一下

start

Vue CLI Document

1
2
3
4
5
# 安裝 Vue Cli 3
npm install -g @vue/cli

# 建立新專案
vue create hello-world

多頁面設定

vue cli 3 使用 webpack 來處理，所以沿用 webpack 的 multi entry 設定方式即可

Vue 配置參考

Webpack 解析(Resolve)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// vue.config.js
const path = require("path");
module.exports = {
  // 多頁面設定
  pages: {
    index: {
      // page 的入口
      entry: "src/pages/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/about.html`
    // 并且如果找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `about.html`。
    about: "src/pages/about/main.js"
  },
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
      alias: {
        components: path.resolve(__dirname, "src/components/")
      }
    }
  }
};

Hot Module Reload (HMR)

透過 webpack 的監視設定來處理

1
2
3
4
5
6
7
8
module.exports = {
  ...
  configureWebpack: {
    watchOptions: {
      poll: true
    }
  }
}

BootStrap + Vue

OfficialWebSite

元件語法範例

1
2
3
4
5
6
7
8
9
10
11
12
13
# 安裝，擇一使用
npm i vue bootstrap-vue bootstrap
yarn add vue bootstrap-vue bootstrap

# 在 entry(通常預設為main.js) 註冊 BootStrapVue
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)