vue腳手架的使用

搭建vue腳手架環境

1.傻瓜式安裝node: 
官網下載：https://nodejs.org/zh-cn/

2.安裝cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝vue最新腳手架: 
>: cnpm install -g @vue/cli

注：如果2、3步報錯，清除快取后重新走2、3步
>: npm cache clean --force

創建腳手架環境的專案

"""
前提：在目標目錄新建luffy檔案夾
>: cd 建立的luffy檔案夾
>: vue create luffycity
"""

新建的vue專案目錄檔案介紹

"""
├── luffycity
	├── public/          			# 專案共有資源
		├── favicon.ico				# 站點圖示
		└── index.html				# 主頁
    ├── src/      					# 專案主應用，開發時的代碼保存
    	├── assets/      			# 前臺靜態資源總目錄
    		├── css/				# 自定義css樣式
    			└── global.css		# 自定義全域樣式
    		├── js/					# 自定義js樣式
				└── settings.js		# 自定義組態檔
			└── img/				# 前臺圖片資源
		├── components/    			# 小組件目錄
		├── views/  				# 頁面組件目錄
		├── App.vue	    			# 根組件
		├── main.js	    			# 入口腳本檔案
		├── router    		
			└── index.js			# 路由腳本檔案
		store	    		
			└── index.js			# 倉庫腳本檔案
    ├── vue.config.js	    		# 專案組態檔
    └── *.*							# 其他組態檔
"""

分析專案檔案中的main.js檔案

點擊查看代碼

/* 
	該檔案是整個專案的入口檔案
*/
//引入Vue
import Vue from 'vue'
//引入App組件，它是所有組件的父組件
import App from './App.vue'
//關閉vue的生產提示
Vue.config.productionTip = false

/* 
	關于不同版本的Vue：
	
		1.vue.js與vue.runtime.xxx.js的區別：
				(1).vue.js是完整版的Vue，包含：核心功能+模板決議器，
				(2).vue.runtime.xxx.js是運行版的Vue，只包含：核心功能；沒有模板決議器，

		2.因為vue.runtime.xxx.js沒有模板決議器，所以不能使用template配置項，需要使用
			render函式接收到的createElement函式去指定具體內容，
*/

//創建Vue實體物件---vm
new Vue({
	el:'#app',
	//render函式完成了這個功能：將App組件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
}).$mount('#app') // .$mount('#app') 等價于上面的el：'#app'，$mount詳見vue生命周期圖

vue.config.js組態檔

使用vue inspect > output.js可以查看到Vue腳手架的默認配置，
使用vue.config.js可以對腳手架進行個性化定制，詳情見：https://cli.vuejs.org/zh

ref屬性

被用來給元素或子組件注冊參考資訊（id的替代者）
應用在html標簽上獲取的是真實DOM元素，應用在組件標簽上是組件實體物件（vc）
使用方式：
1. 打標識：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
2. 獲取：this.$refs.xxx

props配置項

功能：讓組件接收外部傳過來的資料
傳遞資料(父傳給子)：<Demo name="xxx"/>
（子傳父，需要在父中優先定義一個方法傳給子，等子需要的時候呼叫方法，把資料傳給父）
接收資料：
1. 第一種方式（只接收）：props:['name']
2. 第二種方式（限制型別）：props:{name:String}
3. 第三種方式（限制型別、限制必要性、指定默認值）：
```
props:{
	name:{
	type:String, //型別
	required:true, //必要性
	default:'老王' //默認值
	}
}
```
備注：props是只讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那么請復制props的內容到data中一份，然后去修改data中的資料，

mixin(混入)

功能：可以把多個組件共用的配置提取成一個混入物件
使用方式：

第一步定義混合：
新建一個mixin.js，在里面書寫組件共有的配置并將該檔案暴露給外部
```
export const hunhe {
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：
（1）區域混入：先匯入import {hunhe} from '檔案位置',然后mixins:['hunhe',]
? （2）全域混入：在main.js中匯入，然后在main.js中書寫Vue.mixin(xxx)，這樣所有的vc都有了

插件

功能：用于增強Vue
本質：包含install方法的一個物件，install的第一個引數是Vue，第二個以后的引數是插件使用者傳遞的資料，

定義插件：

在src檔案下新建一個plugins.js(插件的js檔案)

export default{
  install(Vue,option){
    // 1. 添加全域過濾器
    Vue.filter(....)

    // 2. 添加全域指令
    Vue.directive(....)

    // 3. 配置全域混入(合)
    Vue.mixin(....)

    // 4. 添加實體方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
}

在main.js中使用插件：Vue.use(plugins)

scoped樣式

作用：讓樣式在區域生效，防止沖突，因為組件的css樣式，會在組件引入時全部放在一起，組件內的重名的樣式名會根據引入順序后面覆寫前面的
寫法：<style scoped>

總結TodoList案例

組件化編碼流程：

? (1).拆分靜態組件：組件要按照功能點拆分，命名不要與html元素沖突，

? (2).實作動態組件：考慮好資料的存放位置，資料是一個組件在用，還是一些組件在用：

? 1).一個組件在用：放在組件自身即可，

? 2). 一些組件在用：放在他們共同的父組件上（狀態提升），

? (3).實作互動：從系結事件開始，
props適用于：

? (1).父組件 ==> 子組件通信

? (2).子組件 ==> 父組件通信（要求父先給子一個函式）
使用v-model時要切記：v-model系結的值不能是props傳過來的值，因為props是不可以修改的！
props傳過來的若是物件型別的值，修改物件中的屬性時Vue不會報錯，但不推薦這樣做，

webStorage

存盤內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實作本地存盤機制，
相關API：
1. xxxxxStorage.setItem('key', 'value');
  該方法接受一個鍵和值作為引數，會把鍵值對添加到存盤中，如果鍵名存在，則更新其對應的值，
2. xxxxxStorage.getItem('person');
  
  ? 該方法接受一個鍵名作為引數，回傳鍵名對應的值，
3. xxxxxStorage.removeItem('key');
  
  ? 該方法接受一個鍵名作為引數，并把該鍵名從存盤中洗掉，
4. xxxxxStorage.clear()
  
  ? 該方法會清空存盤中的所有資料，
備注：
1. SessionStorage存盤的內容會隨著瀏覽器視窗關閉而消失，
2. LocalStorage存盤的內容，需要手動清除才會消失，
3. xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那么getItem的回傳值是null，
4. JSON.parse(null)的結果依然是null，

組件的自定義事件

一種組件間通信的方式，適用于：子組件 ===> 父組件
使用場景：A是父組件，B是子組件，B想給A傳資料，那么就要在A中給B系結自定義事件（事件的回呼在A中），
系結自定義事件：
1. 第一種方式，在父組件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二種方式，在父組件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
   this.$refs.xxx.$once('atguigu',this.test) //系結自定義事件（一次性的）
}
```
3. 若想讓自定義事件只能觸發一次，可以使用once修飾符，或$once方法，
在子組件中觸發自定義事件：this.$emit('atguigu',資料)
在子組件中解綁自定義事件this.$off('atguigu') | this.$off(['atguigu','demo'...])解綁多個 off括號里不填解綁所有
組件上也可以系結原生DOM事件，需要使用native修飾符，

注意：通過this.$refs.xxx.$on('atguigu',回呼)系結自定義事件時，回呼要么配置在methods中，要么用箭頭函式，否則this指向會出問題！

全域事件總線（任意組件間的通信）（GlobalEventBus）

一種組件間通信的方式，適用于任意組件間通信，

安裝全域事件總線：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安裝全域事件總線，$bus就是當前應用的vm
	},
    ......
})

使用事件總線：
1. 接收資料：A組件想接收資料，則在A組件中給$bus系結自定義事件，事件的回呼留在A組件自身，
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
```
2. 提供資料：this.$bus.$emit('xxxx',資料)
最好在beforeDestroy鉤子中，用$off去解綁當前組件所用到的事件，

訊息訂閱與發布（pubsub）

一種組件間通信的方式，適用于任意組件間通信，
使用步驟：
1. 安裝pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收資料：A組件想接收資料，則在A組件中訂閱訊息，訂閱的回呼留在A組件自身，
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //訂閱訊息
}
```
4. 提供資料：pubsub.publish('xxx',資料)
5. 最好在beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱，

nextTick

語法：this.$nextTick(回呼函式)
作用：在下一次 DOM 更新結束后執行其指定的回呼，
什么時候用：當改變資料后，要基于更新后的新DOM進行某些操作時，要在nextTick所指定的回呼函式中執行，

Vue封裝的過度與影片

作用：在插入、更新或移除 DOM元素時，在合適的時候給元素添加樣式類名，
圖示：
寫法：
1. 準備好樣式：
  - 元素進入的樣式：
    1. v-enter：進入的起點
    2. v-enter-active：進入程序中
    3. v-enter-to：進入的終點
  - 元素離開的樣式：
    1. v-leave：離開的起點
    2. v-leave-active：離開程序中
    3. v-leave-to：離開的終點
2. 使用<transition>包裹要過度的元素，并配置name屬性：
```
<transition name="hello" appear>  // appear表示在瀏覽器重繪時也會出現影片效果，不加是需要點擊按鈕才會觸發
	<h1 v-show="isShow">你好啊！</h1>
</transition>
```
3. 備注：若有多個元素需要過度，則需要使用：<transition-group>，且每個元素都要指定key值，
4. 第三方的影片樣式庫，https://animate.style/

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/533555.html

標籤：其他

上一篇：在線客服系統原始碼開發實戰總結：H5 Notifications瀏覽器桌面通知

下一篇：Vue2.x下的各組件如何傳遞資訊？（不使用Vuex）