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