vue 腳手架 配置 及檔案介紹

端端的土化程式碼發表於2019-03-31
Vue

一 : vue 是 單檔案元件

導 : 之前註冊元件有什麼缺點 ?

1- 缺乏語法高亮 2-格式不好整體 3-沒有專門的寫css程式碼等等

參考 : vue => 工具 => 單檔案元件

  1. 什麼是單檔案元件 ? 字尾為 .vue 的檔案
  2. 單檔案元件的三個組成部分 (程式碼塊 : scaffold 自動提示)
  • template (模板結構)
  • script 元件的程式碼邏輯
  • style 樣式
  1. 注意點 :
    • 單檔案元件,無法直接在瀏覽器中使用,必須經過 webpack 這種打包工具,處理後,才能在瀏覽器中使用

二 : 腳手架 介紹

腳手架 2.X ==> 2.Xvue

腳手架 3.X ==> 3.X vue

  1. vue-cli 是 vue 的腳手架工具

  2. 作用 : vue-cli 提供了一條命令, 我們直接通過這條命令就可以快速的生成一個 vue 專案 (vue init XX) 。 專案的基本結構、以及 webpack 配置項 全部配置 好了

  3. 為什麼會有腳手架工具 ???

    因為 webpack 配置繁瑣, 阻止一批想用 vue 但是不會 webpack 的開發人員,所以作者直接將所有 vue 專案中用到的配置全部幫你寫好了,這樣,就不需要開發人員再去配置基礎 webpack 配置項了

  4. 也就是說,使用 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 */ 關閉後 會報波浪線,但是不會報錯了

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開頭
複製程式碼

相關文章