Vue 之 六 單檔案元件及Vue專案搭建
阿新 • • 發佈:2020-12-19
零:單檔案元件
1.簡介
在很多 Vue 專案中,我們使用 Vue.component 來定義全域性元件,緊接著用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素 這種方式在很多中小規模的專案中運作的很好,在這些專案裡 JavaScript 只被用來加強特定的檢視 但當在更復雜的專案中,或者你的前端完全由 JavaScript 驅動的時候,下面這些缺點將變得非常明顯: 1.全域性定義 (Global definitions) 強制要求每個 component 中的命名不得重複
2.字串模板 (String templates) 缺乏語法高亮,在 HTML 有多行的時候,需要用到醜陋的 \
不支援 CSS (No CSS support) 意味著當 HTML 和 JavaScript 元件化時,CSS 明顯被遺漏
3.沒有構建步驟 (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 install
for 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
)
http://127.0.0.1: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>