Vue - 元件化開發
阿新 • • 發佈：2020-12-18
零：單檔案元件
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是否安裝成功
node -v
2.npm
① npm 介紹
-
npm = node package manager
-
Node.js在安裝完成後，在Node.js中會同時幫我們安裝一個
包管理器npm -
可以藉助
npm命令進行node外掛的管理（包括安裝、解除安裝、管理依賴等） -
這個工具相當於Python的pip管理器
② npm 版本檢視
npm -v
③ npm的預設安裝位置
# 這裡的 User 是當前的登入的使用者名稱，需要自行替換
C:\Users\User\AppData\Roaming\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 安裝
npm install cnpm -g --registry=https://registry.npm.taobao.org
③ npm 版本檢視
cnpm -v
④ 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
② 測試是否安裝成功，檢視版本
vue --version
3.建立Vue專案 - 命令列（推薦）
1.切換到要建立專案的路徑
cd [路徑]
2.建立專案
vue create [專案名稱]
3.選擇預設Manually select features，手動設定
4.選擇專案中需要的特性（方向鍵↑↓+空格進行選擇，回車確認，下同）
下方加粗的是需要選擇的！！！
- Choose Vue version：選擇Vue的版本，稍後會進行選擇
- Babel：相容性相關（把ES6的語法 自動裝換成 ES5 ，以此來相容瀏覽器）
- TypeScript：JavaScript 的一個超集，支援 ECMAScript 6 標準
- Progressive Web App (PWA) Support：
- Router：Vue的路由
- Vuex：專為 Vue.js 應用程式開發的狀態管理模式
- CSS Pre-processors：CSS的前處理器
- Linter / Formatter：語法檢查 與 程式碼格式化（類似於Python的PEP8規範）
- Unit Testing：單元測試
- E2E Testing：端對端測試(End-to-End Testing)
5.選擇Vue的版本，選擇2.x
6.路由使用歷史模式，這裡輸入y
7.選擇ESLint + Standard config，選標準設定即可
8.選擇Lint on save
9.選擇In package.json
- In dedicated config files：每個配置檔案都單獨放置
- In package.json：所有配置都放進 package.json
10.這裡輸入y
- Save this as a preset for future projects：將其儲存為將來專案的預設
11.為預設起一個名字自定義即可
12.專案建立中（哦吼，還有好看的彩色的圖示！）
13.專案建立完成，根據提示執行命令即可啟動專案
14.切換到專案中，然後啟動
cd [專案名]
npm run serve
15.啟動成功，訪問Local中的地址：http://localhost:8080/
16.瀏覽器中訪問
如需終止，直接在命令列按
Ctrl C即可
4.建立Vue專案 - 圖形化介面
1.切換到要建立專案的路徑
cd [路徑]
2.建立專案
vue ui
3.點選：建立 - 選擇路徑 - 點選：在此建立新專案
4.專案資料夾：自定義專案名稱 - 包管理器：npm - 點選：下一步
5.選擇：手動 - 點選：下一步
如果想要使用之前的預設，也可以直接選擇
6.勾選上需要的選項 - 點選：下一步
- Choose Vue version
- Babel
- Router
- Vuex
- Linter / Formatter
7.版本選擇2.x- Use history... 勾選 - 選擇ESLint + Standard config - Lint on save勾選 - 建立專案
8.起個預設名 - 儲存與否 可以自定義
9.安裝成功
10.點選：任務 - serve - 執行
11.點選：輸出 - 點選這個URL進行訪問
12.成功訪問
新建專案的本質：Vue-CLI從github上拉取了1個空專案（模板），以後在模板上繼續寫就可以了
5.建立專案 - 老版的安裝（不推薦）
vue init webpack [專案名稱]
建立專案的選項：
- ? Project name （專案名稱，預設
回車即可，名稱就是：vue init webpack 之後的名稱） - ? Project description A Vue.js project（專案描述，預設
回車即可） - ? Author （專案作者，預設
回車即可，亦可自定義） - ? Vue build standalone
- ? Install vue-router? No（是否安裝 vue-router，按
n不安裝，後期手動新增） - ? Use ESLint to lint your code? No（是否使用 ESLint做程式碼檢查，按
n不安裝，後期手動新增） - ? Set up unit tests Yes（單元測試相關，按
y安裝） - ? Setup e2e tests with Nightwatch? No（單元測試相關，按
n不安裝，後期手動新增） - ? Should we run
npm installfor you after the project has been created? (recommended) （選擇no，專案建立完成直接初始化，手動執行 執行結果）
③ 切換到專案中
cd [專案名稱]
④ 安裝 專案中 package.json 中需要的包
npm install
# 安裝完成後，專案中會多1個 node_modules
# 如果報錯了，就按照提示來進行修復
npm audit fix
npm audit fix --force
⑤ 啟動專案
npm run dev
⑥ 訪問（預設埠是8080）
6.PyCharm中啟動Vue專案
① 用PyCharm開啟Vue專案
② 點選左上角Add Configuration
③ 點選左上角+ - 點選：npm
④ Scripts下拉框選擇serve - 點選：OK
⑤ 此時，點選左上角的 執行按鈕，即可啟動 Vue專案
⑥ 點選 Local的URL
⑦ 成功訪問！
三：專案
1.專案 目錄介紹
node_modules: 專案依賴，各種模組（上傳專案的時候不需要它，直接刪掉，可以使用npm install重新安裝）
public: 共用資源
- favicon.ico：網頁的標籤欄圖示
- index.html：專案入口頁面，單頁面開發（一般不會動它）
src: 專案目標,書寫程式碼的地方
- assets：靜態資源
- components：元件
- views：檢視元件
- App.vue：根元件（相當於原來的 new Vue({...})）
- main.js：入口js
- router.js：路由檔案
- store.js：狀態庫檔案
vue.config.js：專案配置檔案(沒有可以自己新建)
package.json：專案所有的配置依賴（等同於python專案的reqirement.txt）
重點
- components
- view
- App.vue
- main.js
<template> 這裡放HTML程式碼 </template>
<style> 這裡放CSS程式碼 </style>
<script> 這裡放JS程式碼 </script>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
<About></About>
</template>
<script>
// 匯入1個元件
import About from './views/About.vue'
import Vue from 'vue'
// 註冊1個全域性元件
Vue.component('About', About)
export default {
name: 'Darker',
data () {
return {
msg: 'Welcome to My World'
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>