前端Vue2使用腳手架的詳細(xì)步驟流程
vue cli
Vue CLI 的全稱是 Vue Command Line Interface，即 Vue 命令行界面。它是一個(gè)強(qiáng)大的工具，用于幫助開(kāi)發(fā)者快速搭建、配置和管理 Vue.js 項(xiàng)目。
他的作用
項(xiàng)目創(chuàng)建：
Vue CLI 提供了一個(gè)圖形化界面和命令行工具，可以快速創(chuàng)建新的 Vue.js 項(xiàng)目，并且可以選擇不同的配置和功能預(yù)設(shè)。
項(xiàng)目配置：
允許開(kāi)發(fā)者自定義項(xiàng)目的構(gòu)建配置，例如配置 Babel、PostCSS、Webpack 等工具，以及添加額外的插件和功能。
插件生態(tài)系統(tǒng)：
Vue CLI 擁有一個(gè)豐富的插件生態(tài)系統(tǒng)，開(kāi)發(fā)者可以通過(guò)安裝插件來(lái)擴(kuò)展項(xiàng)目的功能，如添加 Vue Router、Vuex、單元測(cè)試等。
開(kāi)發(fā)服務(wù)器：
提供一個(gè)本地開(kāi)發(fā)服務(wù)器，支持熱重載（Hot Module Replacement，HMR）功能，讓開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中可以實(shí)時(shí)看到代碼更改的效果。
構(gòu)建和部署：
可以構(gòu)建項(xiàng)目以生成優(yōu)化后的靜態(tài)資源，用于生產(chǎn)環(huán)境部署。
版本控制：
支持版本控制，允許開(kāi)發(fā)者在不同版本之間切換，方便進(jìn)行項(xiàng)目管理和遷移。
代碼規(guī)范：
可以集成 ESLint、Prettier 等工具，幫助開(kāi)發(fā)者維護(hù)代碼質(zhì)量和風(fēng)格一致性。
圖形化界面：
提供了一個(gè)圖形化界面（@vue/cli-service global），方便進(jìn)行項(xiàng)目配置和插件管理。
Vue CLI 極大地簡(jiǎn)化了 Vue.js 應(yīng)用的開(kāi)發(fā)流程，使得開(kāi)發(fā)者可以更加專注于編寫(xiě)業(yè)務(wù)邏輯，而不是構(gòu)建配置和項(xiàng)目管理。它是 Vue.js 生態(tài)系統(tǒng)中一個(gè)非常重要的工具，被廣泛用于構(gòu)建現(xiàn)代的單頁(yè)面應(yīng)用程序（SPA）。
創(chuàng)建Vue2腳手架
第一步（僅第一次執(zhí)行）：全局安裝@vue/cli。
npm install -g @vue/cli
第二步：切換到你要?jiǎng)?chuàng)建項(xiàng)目的目錄，然后使用命令創(chuàng)建項(xiàng)目
vue create xxxx
這里我們創(chuàng)建vue create vue_test
第三步：?jiǎn)?dòng)項(xiàng)目
npm run serve
項(xiàng)目結(jié)構(gòu)
簡(jiǎn)潔概括
node_modules：
存放項(xiàng)目依賴的所有 Node.js 模塊。這些模塊是通過(guò)
npm install命令安裝的，包括 Vue.js 庫(kù)和其他第三方庫(kù)。
public：
存放靜態(tài)資源文件，如
index.html、圖標(biāo)等。這些文件不會(huì)被 Webpack 處理，而是直接復(fù)制到構(gòu)建輸出目錄中。
src：
存放項(xiàng)目的源代碼。通常包括組件、路由、狀態(tài)管理（如 Vuex）、視圖等。這是開(kāi)發(fā)者主要編寫(xiě)代碼的地方。
.gitignore：
Git 配置文件，用于指定哪些文件或文件夾不應(yīng)該被 Git 版本控制系統(tǒng)跟蹤，如
node_modules、日志文件、編譯輸出文件等。
babel.config.js：
Babel 配置文件，用于配置 JavaScript 編譯器 Babel 的行為，如轉(zhuǎn)譯 ES6+ 代碼到向后兼容的 JavaScript 版本。
jsconfig.json：
JavaScript 項(xiàng)目配置文件，用于配置編輯器（如 VSCode）的智能提示、代碼導(dǎo)航等功能。
package.json：
項(xiàng)目的元數(shù)據(jù)文件，包含項(xiàng)目的基本信息（如名稱、版本、描述）、依賴項(xiàng)、腳本命令等。
package-lock.json：
鎖定項(xiàng)目依賴的確切版本，確保項(xiàng)目在不同環(huán)境下的一致性。
README.md：
項(xiàng)目的自述文件，通常包含項(xiàng)目的介紹、安裝和使用說(shuō)明、貢獻(xiàn)指南等。
vue.config.js：
Vue CLI 的配置文件，用于自定義項(xiàng)目的構(gòu)建配置，如修改輸出目錄、調(diào)整 Webpack 配置等。
這個(gè)目錄結(jié)構(gòu)清晰地組織了項(xiàng)目的各個(gè)部分，使得項(xiàng)目易于管理和擴(kuò)展。通過(guò) Vue CLI，開(kāi)發(fā)者可以快速搭建項(xiàng)目，專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)，而不需要關(guān)心底層的構(gòu)建和配置細(xì)節(jié)。
逐步分析src
我們從文件執(zhí)行的角度來(lái)看這個(gè)結(jié)構(gòu)
main.js
當(dāng)我們執(zhí)行了npm run serve之后，vue就會(huì)找到main.js里面執(zhí)行代碼
1 引入了Vue
2 引入了App
3 關(guān)閉了啟動(dòng)的提示
4 創(chuàng)建了Vue實(shí)例 然后掛載到App容器上（后面會(huì)詳細(xì)講解）
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
index.html
掛載到App容器,app容器在index.html，然后就會(huì)去執(zhí)行index.html
<link rel="icon" href="<%= BASE_URL %>favicon.ico">注意這里的代碼，這里就是來(lái)編寫(xiě)網(wǎng)頁(yè)的圖標(biāo)的。<%= BASE_URL %>vue會(huì)解釋，用來(lái)解決正常通過(guò) ”./“ 來(lái)引入圖標(biāo)在不同服務(wù)器上可能出現(xiàn)錯(cuò)誤
然后就是noscript,當(dāng)網(wǎng)頁(yè)不支持js的時(shí)候會(huì)顯示
之后就是app容器了
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
app.vue
當(dāng)執(zhí)行到app容器中，就會(huì)去執(zhí)行app.vue文件
可以看到，原始的項(xiàng)目里面vue已經(jīng)創(chuàng)建了一個(gè)HelloWorld 組件并引入了。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
最終效果
完善單文件操作
我們?cè)谏弦黄恼铝袅藗€(gè)坑，現(xiàn)在補(bǔ)上。也就是單文件操作的最終使用。
我們將School和Student放入Components,
然后將組件引入app.vue
<template>
<div id="app">
<School></School>
<Student></Student>
</div>
</template>
<script>
import School from "./components/School";
import Student from "./components/Student";
export default {
name: 'App',
components: {
School,
Student
}
}
</script>
<style>
/* #app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
} */
</style>
成功顯示
main.js中的render
render: h => h(App) 是 Vue.js 中的一個(gè)常見(jiàn)寫(xiě)法，通常用于定義一個(gè) Vue 應(yīng)用的根組件渲染函數(shù)。以下是對(duì)它的詳細(xì)解釋：
1.render: h => h(App)的含義
render: h => h(App) 是一個(gè)簡(jiǎn)化的渲染函數(shù)，使用了箭頭函數(shù)語(yǔ)法。它的作用是將一個(gè)組件（App）渲染到 Vue 應(yīng)用的根節(jié)點(diǎn)中。
h：這是渲染函數(shù)的參數(shù)，是一個(gè)函數(shù)，用于創(chuàng)建虛擬 DOM 節(jié)點(diǎn)。App：這是一個(gè) Vue 組件，通常是應(yīng)用的根組件。h(App)：調(diào)用h函數(shù)，傳入App組件作為參數(shù)，表示創(chuàng)建一個(gè)App組件的虛擬 DOM 節(jié)點(diǎn)。render: h => h(App)：定義了一個(gè)渲染函數(shù)，返回 App 組件的虛擬 DOM 節(jié)點(diǎn)。
2.等價(jià)的寫(xiě)法
render: h => h(App) 是一個(gè)簡(jiǎn)化的寫(xiě)法，等價(jià)于以下代碼：
new Vue({
render: function(h) {
return h(App);
}
}).$mount('#app');這兩種寫(xiě)法在功能上是完全相同的，只是語(yǔ)法上略有不同。箭頭函數(shù)寫(xiě)法更簡(jiǎn)潔，適合在簡(jiǎn)單場(chǎng)景下使用。
ref屬性
1. 被用來(lái)給元素或子組件注冊(cè)引用信息（id的替代者）
2. 應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象（vc）
3. 使用方式：
1. 打標(biāo)識(shí)：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 獲?。篳``this.$refs.xxx```
實(shí)例
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">點(diǎn)我輸出上方的DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
//引入School組件
import School from './components/School'
export default {
name:'App',
components:{School},
data() {
return {
msg:'歡迎學(xué)習(xí)Vue！'
}
},
methods: {
showDOM(){
console.log(this.$refs.title) //真實(shí)DOM元素
console.log(this.$refs.btn) //真實(shí)DOM元素
console.log(this.$refs.sch) //School組件的實(shí)例對(duì)象（vc）
}
},
}
</script>
props配置項(xiàng)
注意?。?！
props的屬性是不可以被修改的
1. 功能：讓組件接收外部傳過(guò)來(lái)的數(shù)據(jù)，通常是由父組件給子組件傳數(shù)據(jù)
2. 傳遞數(shù)據(jù)：```<Demo name="xxx"/>```
3. 接收數(shù)據(jù)：
1. 第一種方式（只接收）：```props:['name'] ```
2. 第二種方式（限制類型）：```props:{name:String}```
3. 第三種方式（限制類型、限制必要性、指定默認(rèn)值）：
props:{
name:{
type:String, //類型
required:true, //必要性
default:'老王' //默認(rèn)值
}
}備注：props是只讀的，Vue底層會(huì)監(jiān)測(cè)你對(duì)props的修改，如果進(jìn)行了修改，就會(huì)發(fā)出警告，若業(yè)務(wù)需求確實(shí)需要修改，那么請(qǐng)復(fù)制props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)。
實(shí)例
app.vue
<template>
<div>
<Student name="李四" sex="女" :age="18"/>
</div>
</template>
<script>
import Student from './components/Student'
export default {
name:'App',
components:{Student}
}
</script>
student.vue
<template>
<div>
<h1>{{msg}}</h1>
<h2>學(xué)生姓名：{{name}}</h2>
<h2>學(xué)生性別：{{sex}}</h2>
<h2>學(xué)生年齡：{{myAge+1}}</h2>
<button @click="updateAge">嘗試修改收到的年齡</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
console.log(this)
return {
msg:'我是一個(gè)尚硅谷的學(xué)生',
myAge:this.age
}
},
methods: {
updateAge(){
this.myAge++
}
},
//簡(jiǎn)單聲明接收
// props:['name','age','sex']
//接收的同時(shí)對(duì)數(shù)據(jù)進(jìn)行類型限制
/* props:{
name:String,
age:Number,
sex:String
} */
//接收的同時(shí)對(duì)數(shù)據(jù)：進(jìn)行類型限制+默認(rèn)值的指定+必要性的限制
props:{
name:{
type:String, //name的類型是字符串
required:true, //name是必要的
},
age:{
type:Number,
default:99 //默認(rèn)值
},
sex:{
type:String,
required:true
}
}
}
</script>emit
1.什么是emit？
emit 是 Vue.js 中用于子組件向父組件傳遞數(shù)據(jù)和事件的核心工具。它允許子組件通過(guò)觸發(fā)自定義事件將數(shù)據(jù)或通知傳遞給父組件，從而實(shí)現(xiàn)父子組件之間的通信。
2.emit的基本語(yǔ)法
在子組件中，使用 this.$emit 方法觸發(fā)一個(gè)自定義事件，并可以傳遞數(shù)據(jù)：
this.$emit('event-name', data);event-name：自定義事件的名稱，必須與父組件中監(jiān)聽(tīng)的事件名稱一致。data：可選參數(shù)，用于傳遞給父組件的數(shù)據(jù)，可以是任何類型（如字符串、數(shù)字、對(duì)象等）。
3.emit的使用場(chǎng)景
子組件通知父組件發(fā)生了某些行為（如按鈕點(diǎn)擊）。
子組件向父組件傳遞數(shù)據(jù)（如表單輸入的值）。
父組件響應(yīng)子組件的行為或數(shù)據(jù)。
實(shí)例
子組件代碼
const nextPage = () => {
if (props.currentPage < totalPages.value)
emit("update:currentPage", props.currentPage + 1);
};父組件代碼
<PaginationComponent
@update:currentPage="updateCurrentPage"
/>
const updateCurrentPage = (page) => {
currentPage.value = page;
};詳細(xì)解析
1.子組件觸發(fā)事件
假設(shè)用戶點(diǎn)擊了“下一頁(yè)”按鈕，調(diào)用了 nextPage 方法
調(diào)用
emit方法，觸發(fā)update:currentPage事件。傳遞新的頁(yè)碼值
props.currentPage + 1給父組件。
2.父組件監(jiān)聽(tīng)事件
父組件通過(guò) @update:currentPage="updateCurrentPage" 監(jiān)聽(tīng)子組件觸發(fā)的事件
@update:currentPage是監(jiān)聽(tīng)子組件觸發(fā)的update:currentPage事件。當(dāng)子組件觸發(fā)這個(gè)事件時(shí)，調(diào)用父組件中的 updateCurrentPage 方法。
3.父組件處理事件
父組件中的 updateCurrentPage 方法被調(diào)用
接收子組件傳遞的新頁(yè)碼值
page。更新父組件中的
currentPage的值為page。
插槽
在 Vue.js 中，插槽（Slot） 是一個(gè)非常強(qiáng)大的功能，用于在組件之間實(shí)現(xiàn)內(nèi)容的分發(fā)和自定義。插槽允許父組件向子組件傳遞自定義的內(nèi)容，從而提高組件的靈活性和可復(fù)用性。
1.插槽的基本概念
插槽允許你在組件的模板中定義一個(gè)或多個(gè)“占位符”，這些占位符可以被父組件替換為自定義的內(nèi)容。這樣，子組件可以專注于布局和樣式，而父組件可以決定具體的內(nèi)容。
2.插槽的類型
Vue.js 提供了三種類型的插槽：
默認(rèn)插槽（Default Slot）
具名插槽（Named Slot）
作用域插槽（Scoped Slot）
3.默認(rèn)插槽（Default Slot）
默認(rèn)插槽是最簡(jiǎn)單的插槽類型，它允許父組件向子組件傳遞任意內(nèi)容。
子組件
<template>
<div class="card">
<slot>默認(rèn)內(nèi)容</slot>
</div>
</template>父組件
<template>
<div>
<Card>
<p>這是自定義內(nèi)容</p>
</Card>
</div>
</template>
?
<script>
import Card from './Card.vue';
?
export default {
components: {
Card
}
};
</script>在這個(gè)例子中：
子組件
Card定義了一個(gè)默認(rèn)插槽<slot>默認(rèn)內(nèi)容</slot>。父組件通過(guò)
<Card>標(biāo)簽的子內(nèi)容<p>這是自定義內(nèi)容</p>替換了默認(rèn)插槽的內(nèi)容。如果父組件沒(méi)有提供內(nèi)容，則顯示默認(rèn)內(nèi)容。
4.具名插槽（Named Slot）（用的多）
具名插槽允許你在子組件中定義多個(gè)插槽，并通過(guò)名字來(lái)區(qū)分它們。這使得父組件可以更靈活地控制內(nèi)容的分布。
子組件
<template>
<div class="container">
<header>
<slot name="header">默認(rèn)頭部?jī)?nèi)容</slot>
</header>
<main>
<slot>默認(rèn)主體內(nèi)容</slot>
</main>
<footer>
<slot name="footer">默認(rèn)底部?jī)?nèi)容</slot>
</footer>
</div>
</template>父組件
<template>
<div>
<Layout>
<template #header>
<h1>這是自定義頭部</h1>
</template>
<p>這是主體內(nèi)容</p>
<template #footer>
<p>這是自定義底部</p>
</template>
</Layout>
</div>
</template>
?
<script>
import Layout from './Layout.vue';
?
export default {
components: {
Layout
}
};
</script>在這個(gè)例子中：
子組件
Layout定義了三個(gè)具名插槽：header、默認(rèn)插槽和footer。父組件通過(guò)
<template #header>和<template #footer>指定了自定義的頭部和底部?jī)?nèi)容。默認(rèn)插槽的內(nèi)容直接寫(xiě)在
<Layout>標(biāo)簽內(nèi)。
5.作用域插槽（Scoped Slot）
作用域插槽允許子組件向父組件傳遞數(shù)據(jù)，父組件可以在插槽內(nèi)容中使用這些數(shù)據(jù)。這使得父組件可以訪問(wèn)子組件的內(nèi)部數(shù)據(jù)，同時(shí)保持子組件的封裝性。
子組件
<template>
<div class="list">
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item">默認(rèn)內(nèi)容</slot>
</li>
</ul>
</div>
</template>
?
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
]
};
}
};
</script>父組件
<template>
<div>
<ItemList>
<template #default="{ item }">
<p>{{ item.name }}</p>
</template>
</ItemList>
</div>
</template>
?
<script>
import ItemList from './ItemList.vue';
?
export default {
components: {
ItemList
}
};
</script>在這個(gè)例子中：
子組件
ItemList定義了一個(gè)作用域插槽<slot :item="item">默認(rèn)內(nèi)容</slot>，并向父組件傳遞了item數(shù)據(jù)。父組件通過(guò)
<template #default="{ item }">捕獲了子組件傳遞的數(shù)據(jù)，并在插槽內(nèi)容中使用了item.name。
6.插槽的默認(rèn)內(nèi)容
如果你希望插槽在父組件沒(méi)有提供內(nèi)容時(shí)顯示默認(rèn)內(nèi)容，可以在子組件中定義默認(rèn)內(nèi)容。
子組件
<template>
<div>
<slot>這是默認(rèn)內(nèi)容</slot>
</div>
</template>父組件
<template>
<div>
<SlotComponent />
</div>
</template>
?
<script>
import SlotComponent from './SlotComponent.vue';
?
export default {
components: {
SlotComponent
}
};
</script>在這個(gè)例子中：
子組件
SlotComponent定義了一個(gè)默認(rèn)插槽，并提供了默認(rèn)內(nèi)容。父組件沒(méi)有提供內(nèi)容，因此顯示默認(rèn)內(nèi)容。
7. ElementUI里面的插槽使用
Element Plus 的 el-tooltip 組件可以實(shí)現(xiàn)懸浮框（tooltip）功能。el-tooltip 組件內(nèi)部可以使用插槽來(lái)實(shí)現(xiàn)內(nèi)容的分發(fā)。
1.el-tooltip的插槽用法
el-tooltip 是一個(gè)基于 Vue 的懸浮框組件，它提供了兩個(gè)主要的插槽：
默認(rèn)插槽：用于定義觸發(fā)懸浮框顯示的元素。
具名插槽
#content：用于定義懸浮框的內(nèi)容。
示例代碼中的插槽使用
<el-tooltip
class="product-item product-content"
effect="dark"
placement="top"
:open-delay="0"
transition="none"
popper-class="searchBodyProductToolTip"
:popper-options="{ strategy: 'fixed' }"
>
<template #content>
<div class="tooltip-body-product">
<span class="tooltip-title instruction-info">指令信息</span>
<button
class="copy-body-product-button"
@click="copyProductTooltipContent(row)"
>
復(fù)制
</button>
<div class="tooltip-item">
<span class="tooltip-label">推廣的產(chǎn)品和服務(wù)</span>
<span class="colon">:</span>
<span class="tooltip-value"> {{ row.name }}</span>
</div>
<div class="tooltip-item">
<span class="tooltip-label">關(guān)鍵詞</span>
<span class="colon">:</span>
<span class="tooltip-value">{{ row.keyWord }}</span>
</div>
<div class="tooltip-item">
<span class="tooltip-label">生成的語(yǔ)言</span>
<span class="colon">:</span>
<span class="tooltip-value">{{ row.language }}</span>
</div>
<div class="tooltip-item">
<span class="tooltip-label">廣告活動(dòng)目標(biāo)</span>
<span class="colon">:</span>
<span class="tooltip-value">{{
row.campaign.join("、")
}}</span>
</div>
</div>
</template>
<td class="body-product">
<span>{{ row.name }}</span>
</td>
</el-tooltip>在這個(gè)例子中：
默認(rèn)插槽：
<td class="body-product">是觸發(fā)懸浮框顯示的元素。具名插槽 #content：定義了懸浮框的內(nèi)容，包括標(biāo)題、復(fù)制按鈕和多個(gè)信息項(xiàng)。
2.插槽的作用
默認(rèn)插槽：定義了觸發(fā)懸浮框顯示的元素。用戶交互（如鼠標(biāo)懸停）時(shí)，會(huì)顯示懸浮框。
具名插槽
#content：定義了懸浮框的內(nèi)容。你可以在這里放置任何自定義的內(nèi)容，如文本、按鈕、列表等。
總結(jié)
到此這篇關(guān)于前端Vue2使用腳手架的文章就介紹到這了,更多相關(guān)前端Vue2使用腳手架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于前端vuex中dispatch使用方法的相關(guān)資料,vuex的dispatch方法用于觸發(fā)一個(gè)action,以便更新state,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
vue中父子組件相互傳值的實(shí)現(xiàn)方法詳解
父子組件通信是Vue中常見(jiàn)的場(chǎng)景,這篇文章主要為大家詳細(xì)介紹了vue中父子組件相互傳值的實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2023-12-12
在開(kāi)發(fā)中發(fā)現(xiàn)其中一個(gè)頁(yè)面moutned調(diào)用了兩次，而其他頁(yè)面正常，表示很懵逼，然后查找原因，終于找到了，其實(shí)歸根到底是要知道m(xù)ounted的調(diào)用機(jī)制問(wèn)題。這篇文章主要介紹了vue mounted 調(diào)用兩次的解決辦法,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue中使用mxgraph的方法實(shí)例代碼詳解,需要的朋友可以參考下2019-05-05
解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問(wèn)題
這篇文章主要介紹了解決找不到模塊“xxx.vue”或其相應(yīng)的類型聲明問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-10-10
這篇文章主要介紹了vue中router-view組件的使用,這個(gè)時(shí)候我們就需要用到路由中的 router-view組件（也叫路由占位符）了，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-10-10
vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實(shí)現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue3使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對(duì)比的代碼詳解
這篇文章主要為大家詳細(xì)介紹了在vue3中使用el-table實(shí)現(xiàn)新舊數(shù)據(jù)對(duì)比,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,需要的小伙伴可以參考一下2023-12-12
本篇文章主要介紹了Vuex之理解Store的用法，Store類就是存儲(chǔ)數(shù)據(jù)和管理數(shù)據(jù)方法的倉(cāng)庫(kù)，實(shí)現(xiàn)方式是將數(shù)據(jù)和方法已對(duì)象形式傳入其實(shí)例中2017-04-04
如何通過(guò)點(diǎn)擊按鈕切換顯示不同echarts圖表
這篇文章主要介紹了如何通過(guò)點(diǎn)擊按鈕切換顯示不同echarts圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10