Vue — 第六天（vue-cli-介绍）
vue-cli-介紹
vue-cli是官方提供的開發vue項目的腳手架工具。
腳手架是為了保證各施工過程順利進行而搭設的工作平臺。
- 在開發過程中，腳手架工具是有用的，開發完成（項目上線），它就沒有用了。
vue-cli可以提供基于vue項目架子的快速創建，成為了一套標準。
- 項目目錄結構，統一的項目結構。
- 提供了開發過程中的系列工具，
- 例如：babel 語法降級的
- 例如：eslint 約束語法風格（代碼風格）
- 例如：less 預處理器
- …
- 提供一個開發時服務器，預覽代碼（預覽項目）
- 提供：自動刷新瀏覽器，方便你預覽
- 提供：熱更新功能，有些資源的修改，不需要刷新瀏覽器，立即更新，進行預覽
- …
總結：
- vue-cli是一個提供開發項目過程中，便利的一個平臺。更加方便的開發項目，提高你的開發效率。
- 基于nodejs的命令行工具。
vue-cli-安裝
以npm包的格式存在的（不是一個可執行文件），所以要以npm包的方式來安裝。
安裝：
任意找一個cmd窗口，通過全局安裝 @vue/cli
# npm安裝 npm i @vue/cli -g# 下面是一個可能的安裝之后的顯示結果 npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. C:\Users\fanyoufu\AppData\Roaming\npm\vue -> C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js> core-js@3.6.5 postinstall C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ @vue/cli@4.3.1 added 10 packages from 49 contributors, removed 12 packages and updated 100 packages in 115.609s-
成功：安裝日志中沒有任何關于 error err 相關的日志，代表成功。
-
關于安裝報錯的問題：
- 90%是網絡問題，你多試試。
- 如果安裝慢，使用淘寶鏡像。
測試：
在任何一個目錄下，運行命令行：
vue --version如果能夠輸出版本號，就說明已經成功安裝了腳手架工具了。
例如：
@vue/cli 4.3.1
vue-cli-創建項目
目標
- 用 vue-cli工具來創建vue項目。
- 掌握vue項目結構目錄。
步驟
在某個目錄下（你需要創建項目的地方）打開命令行窗口，有三種方法：
- shift + 鼠標右鍵
- 選擇：win7 在此處打開命令行窗口 win8|10 在此處打開powershell窗口
或者：
- 在文件夾地址欄，輸入cmd
或者：
- 在vscode打開終端（有時會出錯）
4. 創建成功
啟動項目（在項目根目錄下執行 npm run serve）
記得進入項目目錄 cd vuecli-demo
說明
它會自動打開瀏覽器，并時時監聽代碼：如果代碼有改動，它會自動刷新。
項目目錄
vue create XXX 創建項目時，它會自動創建一套目錄結構。
目錄結構
項目目錄結構：
- 典型SPA。
- 項目會自帶git管理
- node_modules + pakage.json 是一個 npm項目。
在開發時，我們需要把自己的代碼寫在src目錄下。
前端工作目錄：
入口文件main.js是所有工作的基礎。
入口文件
解釋main.js的代碼：
// 項目的入口文件 // 'vue' 是在這個項目中通過npm安裝的包 // 腳手架工具自動給你安裝的包,在如下兩個地方可以看到： // - package.json // - node_modules// 相當在.html文件中<script src="./vue.js"> import Vue from 'vue' // App.vue是一個單文件組件 // 導入一個組件 import App from './App.vue' // alert('123456') // console.log(Date.now()) // 約定當前對vue代碼的提示方式 // production:生產環境 // productionTip = false 不采用生產環境下的提示。盡可能給更多的提示信息。 Vue.config.productionTip = false// Vue實例有一個函數$mount, 它可以把vue實例掛載到某個dom窗口容器中 // new Vue().$mount('#app') <====> new Vue({el:'#app"})// render也是Vue實例的一個配置項 // render作用：指定視圖的內容，它的值是一個函數。 // 在這里，它的內容就是上面引入的組件App// 整體的作用是：把App.vue這個組件的內容，渲染到 index.html中的 // <div id="app"></div> 中， 再顯示出來。new Vue({render: h => h(App),// render: function(h) { return h(App) }, }).$mount('#app')// #app 是指public下index.html中的14行中的<div id="app">內容：
- 導入VUE模塊
- 導入根組件
- 開啟開發時提示
- 創建根實例，然后在根實例上使用組件。
- render函數是解析App.vue根組件
- $mount函數將解析的APP.vue組件的內容替換index.html中的#app容器。
職責：
- 負責依賴項目需要的資源
- 根實例的創建
ES6模塊化
什么是模塊化
目標：讓一個.js文件(A.js)中可以引用另一個.js文件(B.js)中的代碼
模塊: 就是一個文件。
模塊化的規范：
- commonjs 規范。nodejs中是commonjs規范。
- es6規范。ECMAScript規范。
在nodejs中，模塊化規范：CommonJS
- 導出：module.exports = '導出的內容' exports.xxx = '導出的內容'
- 導入：const path = require('path')
nodejs中的模塊化與es6中的模塊化是不同的。
ES6模塊化
ES6也提供了模塊化規范：ES6模塊
- 默認導入與導出
- 導出：export default 導出內容
- 導入：import 變量名 from 'js模塊路徑'
- 按需導入與導出
- 導出：
- export const 成員變量名1 = '導出內容1'
- export const 成員變量名2 = '導出內容2'
- 導入：import {成員變量名1} from 'js模塊路徑'
- 導出：
基本步驟
定義模塊
- 創建一個.js文件，其中，寫一些變量，函數…
導出模塊
// 創建一個模塊// 如何把es6module/a.js中的fn這個函數給main.js中去使用？// const a = 100 function fn(x,y) {return x + y }// 導出模塊中的fn export { fn }導入模塊
main.js
import { fn } from './es6module/a.js' console.log(fn(100,200)) // 300默認導入與導出
module-a.js
// 模塊a 默認導出 // 可以導出任何格式的內容：字符串 數字 函數 對象 數組 ... export default {name: '模塊A',attr: '屬性' }main.js
import obj from './module-a' console.log(obj) // {name: "模塊A", attr: "屬性"}按需導入與導出
module-b.js
// 模塊B 按需導出 export function fn(x,y) {return x + y }export function fn1(x,y,z) {return x + y +z } export const a = 314另一種寫法：
function fn(x,y) {return x + y }function fn1(x,y,z) {return x + y +z } const a = 314export { fn, fn1,a}main.js
// 按需導入 import {a,b} from './module-b' console.log(a,b)整體導入
// 按需導入（全部成員導入） import * as all from './module-b' console.log(all) // 收集了所有成員的變量（對象）默認導出和按需導出共存
module-c.js
// 混合導入 // 同時有默認導出和 按需導出const fn = function(x,y) {return x + y }const a = 100 const fn1 = function(x,y,z) {return x + y+z }// 按需導出 export {a, fn1 } // 默認導出 export default {fn }main.js
// 有混合導入 import obj, {fn1} from './es6module/c.js'console.log(obj,fn1)導入導出重命名
注意：ES6的模塊化，瀏覽器暫時不支持。
單文件組件
用一個.vue為后綴的文件來聲明一個組件。
以前定義組件
// 全局注冊組件 Vue.component('com-a',{// 組件配置對象template: '<div>組件結構</div>' })new Vue({// 局部注冊組件components: {'com-b': {// 組件配置對象template: '<div>組件結構</div>'}} })無論是何種注冊方式，每個組件必須有一個組件配置化對象。
現在定義組件
在vue-cli中
- 以 .vue 文件的方式來定義組件，文件的內容代表的是：組件配置對象，稱為：單文件組件。
- 共有三個部分
- template（可選 ）： 約定這個組件的視圖
- script（必須）: 設置除了template之外的組件配置項，并默認導出
- style（可選 ）: 用來組件中元素的樣式
- 需要渲染這個組件
- 使用這個配置對象進行 全局注冊 或者 局部注冊，再來使用。
- 使用路由規則中的 component 選項指定路由配置對象。
.vue文件的格式：
// 相對于組件配置對象中 template 選項，聲明組件結構。 <template><div class="red">必須有一個root（根）標簽 {{msg}}</div> </template> // 如果有其他的配置選項，需要默認導出一個對象，在對象中聲明其他配置選項 <script> export default {// 其他組件配置對象data () {return {msg: '單文件組件數據'}} } </script> // 當前組件需要樣式 <style>.red{color: red;} </style>用這種方式定義組件，結構 邏輯 樣式 分工明確，非常清晰，便于維護。
- style中scoped屬性作用：限制樣式在當前組件下生效。
如何在碼云上觀察代碼的變化
慢慢訓練自己去碼云查看代碼的變化！
vscode-插件vetur
它能更好的編輯.vue文件
eslint
是獨立于vue的代碼檢查工具。
作用： 對代碼的編碼格式進行檢查，能幫助程序員減少代碼出錯的風險。例如：如果你定義了一個變量又沒有在隨后的代碼中使用它，則eslint就會報錯。
錯誤示例
這個錯誤是定義了變量，后面沒有使用。
解決錯誤
- 看懂 出錯解釋’a’ is assigned a value but never used 。直接改過來就行。
命令行
啟動項目要運行如下命令：
npm run serve這是由于vuecli在package.json中預置了三條scripts。
通過npm run XXXX 就可以運行scripts中指定義的命令。
babel
Babel 是一個 JavaScript 編譯器。它能把es6 的語法 --------> es5的語法 以兼容低版本的瀏覽器。
vue-cli自動集成了babel,在項目的根目錄下，babel.config.js文件，其中約定了如何去做es6到es5的降級處理。
module.exports = {presets: ['@vue/cli-plugin-babel/preset'] }解決錯誤
- 看懂 出錯解釋’a’ is assigned a value but never used 。直接改過來就行。
命令行
啟動項目要運行如下命令：
npm run serve這是由于vuecli在package.json中預置了三條scripts。
通過npm run XXXX 就可以運行scripts中指定義的命令。
babel
Babel 是一個 JavaScript 編譯器。它能把es6 的語法 --------> es5的語法 以兼容低版本的瀏覽器。
vue-cli自動集成了babel,在項目的根目錄下，babel.config.js文件，其中約定了如何去做es6到es5的降級處理。
module.exports = {presets: ['@vue/cli-plugin-babel/preset'] }總結
以上是生活随笔為你收集整理的Vue — 第六天（vue-cli-介绍）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue — 第五天（路由）
- 下一篇： Vue — 第七天（vue-cli-案例