vue 腳手架 配置 及文件介紹 2.0 版本

一 : vue 是 單文件組件

導 : 以前註冊組件有什麼缺點 ?

1- 缺少語法高亮 2-格式很差總體 3-沒有專門的寫css代碼等等

參考 : vue => 工具 => 單文件組件

1. 什麼是單文件組件 ? 後綴爲 .vue 的文件
2. 單文件組件的三個組成部分 (代碼塊 : scaffold 自動提示)

• template (模板結構)
• script 組件的代碼邏輯
• style 樣式

3. 注意點 :
   • 單文件組件,沒法直接在瀏覽器中使用,必須通過 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

• 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開頭
複製代碼