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-案例