-Vue- 元件化開發
阿新 • • 發佈：2020-12-21
一：單檔案元件
1 簡介
在很多 Vue 專案中，我們使用 Vue.component 來定義全域性元件，緊接著用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素
這種方式在很多中小規模的專案中運作的很好，在這些專案裡 JavaScript 只被用來加強特定的檢視
但當在更復雜的專案中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：
- 全域性定義 (Global definitions) 強制要求每個 component 中的命名不得重複
- 字串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到醜陋的 \
- 不支援 CSS (No CSS support) 意味著當 HTML 和 JavaScript 元件化時，CSS 明顯被遺漏
- 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用前處理器，如 Pug (formerly Jade) 和 Babel
2 Hello.vue 的簡單例項：
現在我們獲得：
- 完整語法高亮
- CommonJS 模組
- 元件作用域的 CSS
- 正如我們說過的，我們可以使用前處理器來構建簡潔和功能更豐富的元件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。
這些特定的語言只是例子，你可以只是簡單地使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何能夠幫助你提高生產力的前處理器
如果搭配 vue-loader 使用 webpack，它也能為 CSS Modules 提供頭等支援
二：環境準備
1 Node.js
① Node.js 介紹
Node.js是一個新的後端(後臺)語言，它的語法和JavaScript類似，所以可以說它是屬於前端的後端語言
實質上，就是一個安裝在作業系統之上的js直譯器
後端語言和前端語言的區別：
- 執行環境：後端語言一般執行在伺服器端；前端語言執行在客戶端的瀏覽器上
- 功能：後端語言可以操作檔案，可以讀寫資料庫；前端語言不能操作檔案，不能讀寫資料庫
② 下載
2個分支
LTS：Long-Time Support，長期支援版本（推薦使用這個，比較穩定）Current：當前最新版（不推薦使用，想嘗試新功能的可以試一試）
③ 安裝
- 一直下一步即可，可以自定義安裝路徑
- 環境變數會自動新增
④ 檢視版本
安裝完成後，可以通過下面檢視命令的版本來測試Node.js是否安裝成功
arther_wan@arther-wandeMacBook-Pro ~ % node -v
v14.15.3
2 npm
① npm 介紹
- npm = node package manager
- Node.js在安裝完成後，在Node.js中會同時幫我們安裝一個
包管理器npm - 可以藉助
npm命令進行node外掛的管理（包括安裝、解除安裝、管理依賴等） - 這個工具相當於Python的pip管理器
② npm 版本檢視
arther_wan@arther-wandeMacBook-Pro ~ % npm -v
6.14.9
③ npm的預設安裝位置
④ npm 常用選項
| 選項 | 釋義 |
|---|---|
| -g | global 全域性安裝 |
| -registry= | 指定映象倉庫安裝 |
⑤ npm 常用命令
npm install -g [包名] # 安裝模組 -g表示全域性安裝，如果沒有-g，則表示在當前專案安裝
npm list # 檢視當前目錄下已安裝的node包
npm view [包名] engines # 檢視包所依賴的Node的版本
npm outdated # 檢查包是否已經過時，命令會列出所有已過時的包
npm update [包名] # 更新node包
npm uninstall [包名] # 解除安裝node包
npm [命令] -h # 檢視指定命令的幫助文件
npm cache clean --force # 清空快取處理
npm run lint # 自動格式化程式碼
3 cnpm
① cnpm 介紹
- 支援所有 npm 命令
- 因為npm安裝外掛是從國外伺服器下載，受網路的影響比較大，可能會出現異常
- 如果npm的伺服器在中國就好了，所以我們樂於分享的淘寶團隊幹了這事
- 來自官網：這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步
- 總結：cnpm 是中國 npm 映象的客戶端
② cnpm 安裝
arther_wan@arther-wandeMacBook-Pro / % sudo npm install cnpm -g --registry=https://registry.npm.taobao.org
# 需要sudo 許可權
③ npm 版本檢視
arther_wan@arther-wandeMacBook-Pro / % cnpm -v
[email protected] (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
④ npm 常用選項
| 選項 | 釋義 |
|---|---|
| -g | global 全域性安裝 |
| -registry= | 指定映象倉庫安裝 |
④ cnpm常用命令
cnpm install -g [包名] # 安裝模組 -g表示全域性安裝，如果沒有-g，則表示在當前專案安裝
cnpm list # 檢視當前目錄下已安裝的node包
cnpm view [包名] engines # 檢視包所依賴的Node的版本
cnpm outdated # 檢查包是否已經過時，命令會列出所有已過時的包
cnpm update [包名] # 更新node包
cnpm uninstall [包名] # 解除安裝node包
cnpm [命令] -h # 檢視指定命令的幫助文件
cnpm cache clean --force # 清空快取處理
三：Vue-CLI 腳手架
1 介紹
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供了：
① 通過 @vue/cli 實現的互動式的專案腳手架
② 通過 @vue/cli + @vue/cli-service-global 實現的零配置原型開發
③ 一個執行時依賴 (@vue/cli-service)，該依賴：
- 可升級
- 基於 webpack 構建，並帶有合理的預設配置
- 可以通過專案內的配置檔案進行配置
- 可以通過外掛進行擴充套件
④ 一個豐富的官方外掛集合，集成了前端生態中最好的工具
⑤ 一套完全圖形化的建立和管理 Vue.js 專案的使用者介面
2 安裝 Vue-CLI
① 安裝 @vue/cli
# 舊版（現已無法安裝）
# cnpm install vue-cli -g
# 新版
cnpm install -g @vue/cli
② 測試是否安裝成功，檢視版本
arther_wan@arther-wandeMacBook-Pro / % vue --version
@vue/cli 4.5.9
3 建立Vue專案 - 命令列（推薦）
① 切換到要建立專案的路徑
arther_wan@arther-wandeMacBook-Pro Desktop % mkdir test
arther_wan@arther-wandeMacBook-Pro Desktop % cd test
② 建立專案
arther_wan@arther-wandeMacBook-Pro test % vue create 001