零：單文件組件
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>