Vutify SPA ( Single Page Application ) 開發

在 nodejs 開發環境建置 與 在 Node JS 使用 vue-cli 3 快速開發網頁與佈署到 github-pages 中，說明了如何建置前端的開發環境，以及  ElementUI 的UI元件，這裡則是介紹另一個 UI 的元件 Vuetify — A Material Design Framework for Vue.js。

展示網址 : https://polinwei.github.io/vue2-vuetify/

程式碼: https://github.com/polinwei/vue2-vuetify

• 安裝

nvm 下載版本: Linux 、 windows

nodesjs

PS w:\progs> nvm --version
Running version 1.1.7.

PS w:\progs> nvm list available

#安裝 NodeJS 
PS w:\progs> nvm install 14.15.4

# Install via npm 透過 npm 安裝
npm install --global yarn

# Check installation 檢查 Yarn 版本
yarn --version

Vue CLI

# 初次安裝 @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli


# 升級 @vue/cli

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

# 查看版本 ensure Vue CLI is >= 3.0

vue --version

在 Windows 10 使用 yarn 安裝 @vue/cli ，若輸入 vue 卻沒有此指令時, 那是因為環境參數沒有加入 %USERPROFILE%\AppData\Local\Yarn\bin; ，可以在 電腦(右鍵)->內容->進階系統設定->環境變數->選取系統變數Path->編輯->加入指令路徑->確認設定 加入即可。

@vue/cli 環境設定

@vue/cli 在的預設檔為 %USERPROFILE%\.vuerc ，建立專案預設是使用 npm，但可以在參數: “packageManager” 設定 yarn 、 npm 或是 pnpm 的指令來執行建立專案，若是使用 yarn ，那就要安裝 yarn 套件，不然會有Error: spawn yarn ENOENT 的錯誤。

vue config
Resolved path: C:\Users\polin.wei\.vuerc
 {
  "useTaobaoRegistry": false,
  "latestVersion": "4.5.11",
  "lastChecked": 1612167646650,
  "presets": {
    "Basic App": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      }
    }
  },
  "packageManager": "yarn"
}

建立 vuetify 專案

# 使用 vue cli 建立專案 vue2-vuetify

vue create vue2-vuetify

Vue CLI v4.5.11
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

# navigate to new project directory
cd vue2-vuetify
yarn serve

基本上，這樣就可以執行 yarn serve 來啟動網站了。

說明:

1.日後在撰寫程式時，Prettier 會顯示出建議的程式碼格式，若覺得擾民的話，可以在 eslintrc.js 的設定檔中移除 "@vue/prettier" 即可。

2.選擇Sass/SCSS讓環境可以讀懂sass/scss。而dart-sass跟node-sass的區別，只是一種是用dart語言去編譯或是用node去編譯的，dart的運行速度比node快速，所以這裡選dart-sass的版本

3.使用ESLint讓程式碼更規範、統一風格,若只是簡單應用可以選擇 ESLint with Error prevention only, 若想要嚴格規範程式碼可以選擇 ESLint+Standard config

再來依 vuetify 官方網站的 vue-cli-install 安裝方式加入此套件

# 加入 vuetify 
vue add vuetify

然後參考 vuetify-loader 文件的 Automatic Imports ，將 using Vue CLI: 的建議加入 vue.config.js 裡，這樣在編譯時 yarn build ，就會自動引入必要的 components，達成 treeshaking 的效果。

module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: config => {
    config.plugin('VuetifyLoaderPlugin').tap(args => [{
      match (originalTag, { kebabTag, camelTag, path, component }) {
        if (kebabTag.startsWith('core-')) {
          return [camelTag, `import ${camelTag} from '@/components/core/${camelTag.substring(4)}.vue'`]
        }
      }
    }])
  }
};

但在 vuetify 2.4.4 版的 treeshaking 說明文件中，它說明已自動加入

Treeshaking will only work with Webpack 4 in production mode. This is automatic when using Vue CLI.

In order to use treeshaking, you must import Vuetify from vuetify/lib.

// You still need to register Vuetify itself
// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)


#The options object that you pass as the second argument to Vue.use can also include a components, directives and a transitions property.

因為我們是用 vue cli 建置專案，所以就不需要對 vue.config.js 再作任何修改了。注意：因為它只支援 webpack v4.x 版以上，所以請事先檢查 webpack 的版本，指令如下

$ npm list webpack
或
$ yarn list webpack

PS V:\vue\vue2-vuetify> npm list webpack
[email protected] V:\vue\vue2-vuetify
+-- @vue/[email protected]
| `-- [email protected]
+-- @vue/[email protected]
| `-- [email protected]  deduped
`-- @vue/[email protected]
  `-- [email protected]  deduped

PS V:\vue\vue2-vuetify> yarn list webpack
yarn list v1.22.10
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ [email protected]
Done in 0.94s.

• 製作頁面模版

Vuetify 在 Application 這段就有提供導覽列在側邊的版型，版型中也包了天地，因此就copy下來修改，把用按鈕控制側邊導覽列的部份也寫進去，整個模版的架構如下（App.vue）：

線上教學課程

getting-started-with-vuetify

用 vuetify-loader 提升 Vue 開發體驗

Vue.js – 使用 ESLint + Prettier 整理程式碼

用Vue CLI 3 + Vuetify 製作說明頁面