一 : vue 是 單檔案元件
導 : 之前註冊元件有什麼缺點 ?
1- 缺乏語法高亮 2-格式不好整體 3-沒有專門的寫css程式碼等等
參考 : vue => 工具 => 單檔案元件
- 什麼是單檔案元件 ? 字尾為 .vue 的檔案
- 單檔案元件的三個組成部分 (程式碼塊 : scaffold 自動提示)
- template (模板結構)
- script 元件的程式碼邏輯
- style 樣式
- 注意點 :
- 單檔案元件,無法直接在瀏覽器中使用,必須經過 webpack 這種打包工具,處理後,才能在瀏覽器中使用
二 : 腳手架 介紹
腳手架 2.X ==> 2.Xvue
腳手架 3.X ==> 3.X vue
-
vue-cli 是 vue 的腳手架工具
-
作用 : vue-cli 提供了一條命令, 我們直接通過這條命令就可以快速的生成一個 vue 專案 (
vue init XX
) 。 專案的基本結構、以及 webpack 配置項 全部配置 好了 -
為什麼會有腳手架工具 ???
因為 webpack 配置繁瑣, 阻止一批想用 vue 但是不會 webpack 的開發人員,所以作者直接將所有 vue 專案中用到的配置全部幫你寫好了,這樣,就不需要開發人員再去配置基礎 webpack 配置項了
-
也就是說,使用 vue-cli 這個腳手架工具後,再也不用擔心 webpack 配置問題了, 我們前端只需要寫 vue 程式碼, 來實現功能即可
三 : 腳手架工具使用
- 安裝 :
npm i -g vue-cli
- 初始化 vue 專案 :
vue init webpack 專案名稱
- 比如 :
vue init webpack vue-demo01
- 比如 :
- 專案安裝過程 :
? Project name # 回車
? Project description # 回車
? Author # 回車
? Vue build standalone # => 執行時+編譯 => 詳見下面的問題1
? Install vue-router? # Yes
(建議手動裝)
? Use ESLint to lint your code? # Yes => 詳見下面的問題2
? Pick an ESLint preset Standard # standard
? Set up unit tests # No
? Setup e2e tests with Nightwatch? # No
? Should we run `npm install` for you after the project has been created? # (recommended) npm
複製程式碼
(總結:有test就n)
- 如何開始
To get started:
cd vue-demo01
npm run dev
複製程式碼
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
- --inline 意思是資訊顯示在哪裡
- -progress 進度條
- 指定哪個檔案作為 webpack 的配置檔案 開發的
四 : 檔案專案介紹
第一遍:資料夾, 第二遍再細化檔案
# build - webpack 相關配置
- build.js - 生產環境構建程式碼
- check-version.js 檢查 node、npm 等版本
- util.js 構建工具相關
- vue-loader.config.js vue-loader 的配置檔案
- webpack.base.conf.js - webpack 的基礎配置
- webpack.dev.conf.js - webpack 開發環境配置
- webpack.prod.conf.js - webpack 釋出環境配置
# config - vue 基本配置檔案(比如:監聽埠(17), 使用 eslint:(26))
- dev.env.js - 開發環境變數
- index.js 專案的一些配置
- prod.env.js 生成環境變數
# node_modules - node 安裝的依賴包
# src - 資原始檔夾, 以後我們就在這個目錄下寫程式碼
- assets - 靜態資源 (圖片 css 都放在這)
- components - 公用元件
- router - 路由
- App.vue - 專案的根元件
- main.js - 專案的入口檔案(總邏輯)
# static - 靜態資源 (圖片 json 資料之類的)
- .gitkeep git 保持檔案,因為 git 上傳,會忽略空資料夾
# .babelrc - babel 配置檔案, (es6 語法編譯配置,將 es6 轉化為瀏覽器能夠識別的程式碼)
# .editorconfig - 定義程式碼格式
- charset = utf-8 編碼 utf8
- indent_style = space 縮排 空格
- indent_size = 2 縮排字元
- end_of_line = lf 回車作為換行的標記
- insert_final_newline = true 最近一空白行作為結尾
- trim_trailing_whitespace = true 清除最開始的空白
- 如果使用 ?
- 1. 安裝 vscode 的 editorConfig for vscode
- 2. eslint 檢測修復後
# .eslintignore - eslint 檢測忽略的地方
- /build/
- /config/
- /dist/
- /\*.js 根目錄下帶.js 的
# .eslintrc.js - eslint 的配置檔案
# .gitignore - git 的忽略檔案
# .postcssrc.js - css 配置檔案 (啥也沒有處理)
# index.html - 頁面入口
# package.json - 專案配置檔案
複製程式碼
4.1 參考 : standard
4.2 參考 : src
-
assets 靜態資源
-
components 元件
-
App.vue 根元件 => 指定路由出口
- 腳手架之後,所有的元件都將渲染到 app.vue 中
-
app 中的 #app 還是 index.html 中的 #app, app.vue 中的會覆蓋前者 可以通過分別新增 title 屬性驗證一下
-
路由出口要寫在 app.vue 元件模板中
-
main.js
- 入口 js 檔案
- 作用 : 建立 vue 例項,匯入其他元件並掛在到 vue 例項上
Vue.config.productionTip = false
不要列印提示- 檢測 no new : 見後面的檢測警告
new Vue({ el: '#app', // 目標顯示 router, // 掛載路由 components: { App }, // 註冊元件 App template: '<App/>' // 模板顯示元件 app }) 複製程式碼
-
route/index.js => 路由
-
一定要記住 :
Vue.use(Router)
模組化公工程中一定要安裝路由外掛 .js 就是一個模組 -
官網裡 也提到
https://router.vuejs.org/zh/installation.html
4.3 : 畫邏輯圖 ( 介紹專案的幾個入口檔案 )
五 : 問題處理
5.1 - 問題1 : 兩種編譯模式 和 @
參考 : vue.js => 安裝 => 對不同構建本版本的解釋
- 我們選擇的是 Runtime + Compiler 模式 : ( 執行時 + 編輯器)
- 執行時模式 : 用來建立 Vue 例項、渲染並處理虛擬 DOM 等的程式碼。基本上就是除去編譯器的其它一切。
- 編譯器:用來將模板字串編譯成為 JavaScript 渲染函式的程式碼。
// 需要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})
複製程式碼
- 完整版版本選用 : ES Module (基於構建工具使用) : vue.esm.js
- build => webpack.base.config.js => 37 行 alias(別名) 'vue$': 'vue/dist/vue.esm.js',
- @ : 就是src的絕對路徑
- build => webpack.base.config.js => 38 行 alias(別名) '@': resolve('src'),
router/index.js =>
import HelloWorld from '@/components/HelloWorld'
import HelloWorld from 'C:/users/.../src/components/HelloWorld'
複製程式碼
5.2 - 問題2 : ESLint
-
概念 : ESLint 是在 JavaScript 程式碼中識別和報告模式匹配的工具,它的目標是保證程式碼的一致性和避免錯誤。
-
在 vscode等編輯工具 中, 可以提示語法錯誤
-
在許多方面,它和 JSLint、JSHint 相似,除了少數的例外:
-
-
如何使用 eslint ?
- 1-安裝vscode外掛 ESlint
- 2-vscode設定裡新增一些配置
"editor.formatOnSave": true, //#每次儲存的時候自動格式化 "eslint.autoFixOnSave": true, // #每次儲存的時候將程式碼按eslint格式進行修復 "eslint.validate": [ { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true }, { "language": "javascript", "autoFix": true }, { "language": "wpy", "autoFix": true } ], "prettier.eslintIntegration": true, // #讓prettier使用eslint的程式碼格式進行校驗 "prettier.semi": true, //#去掉程式碼結尾的分號 "prettier.singleQuote": true, //#使用單引號替代雙引號 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "editor.formatOnType": true //#讓函式(名)和後面的括號之間加個空格 複製程式碼
-
關閉 Eslint :
- 參考 : config/index.js ==> 26行 :
dev.useEslint
設定為false - 重啟專案:
npm run dev
測試 : 刪除 main.js 中的 /* eslint-disable no-new */ 關閉後 會報波浪線,但是不會報錯了
- 參考 : config/index.js ==> 26行 :
5.3 問題3 : vscode安裝 格式化外掛 Prettier
-
安裝 vscode 外掛
Prettier
-
功能1 : shift + alt + F => 格式化程式碼
-
功能2 : 配合 eslint : 見上一個問題的配置
5.4 問題4 : 檢測警告
eslint-disable-next-line # 忽略檢測下一行 可以使用單行註釋/多行註釋,其他都是多行註釋
eslint-disable # 忽略當前整個檔案
eslint-disable no-new # 忽略前面是new開頭
複製程式碼