內容目錄
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
安裝
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):
線上教學課程
你必須 登入 才能發表評論。