(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動力，如果看完對你有幫助，請留下您的足跡）
目錄
生命周期
Vue 生命周期 和 生命周期的四個階段?
Vue 生命周期函數(shù)（鉤子函數(shù)）
案例-create的應(yīng)用
案例-mounted的應(yīng)用
工程化開發(fā) & 腳手架 Vue CLI
開發(fā) Vue 的兩種方式
基本介紹??
錯誤解析
腳手架目錄文件介紹 & 項目運行流程
組件化開發(fā) & 根組件
App.vue 文件（單文件組件）的三個組成部分
普通組件的注冊使用
1. 局部注冊：只能在注冊的組件內(nèi)使用
① 創(chuàng)建 .vue 文件 (三個組成部分)?編輯
?② 在使用的組件內(nèi)導(dǎo)入并注冊
2. 全局注冊：所有組件內(nèi)都能使用
① 創(chuàng)建 .vue 文件 (三個組成部分)
② main.js 中進行全局注冊
生命周期
Vue 生命周期 和 生命周期的四個階段?
思考：什么時候可以發(fā)送 初始化渲染請求 ？（越早越好） 什么時候可以開始 操作dom ？（至少dom得渲染出來）Vue生命周期：一個Vue實例從 創(chuàng)建 到 銷毀 的整個過程。生命周期四個階段：① 創(chuàng)建 ② 掛載 ③ 更新 ④ 銷毀
Vue 生命周期函數(shù)（鉤子函數(shù)）
Vue生命周期過程中，會自動運行一些函數(shù)，被稱為【生命周期鉤子】→ 讓開發(fā)者可以在【特定階段】運行自己的代碼。
案例-create的應(yīng)用
created 數(shù)據(jù)準(zhǔn)備好了，可以開始發(fā)送初始化渲染請求。?
<!--
需求：進入頁面后立即獲取相應(yīng)數(shù)據(jù)
-->
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.news {
display: flex;
height: 120px;
width: 600px;
margin: 0 auto;
padding: 20px 0;
cursor: pointer;
}
.news .left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 10px;
}
.news .left .title {
font-size: 20px;
}
.news .left .info {
color: #999999;
}
.news .left .info span {
margin-right: 20px;
}
.news .right {
width: 160px;
height: 120px;
}
.news .right img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id" class="news">
<div class="left">
<div class="title">{{item.title}}</div>
<div class="info">
<span>{{item.source}}</span>
<span>{{item.time}}</span>
</div>
</div>
<div class="right">
<img :src="item.img" alt="">
</div>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 接口地址：http://hmajax.itheima.net/api/news
// 請求方式：get
const app = new Vue({
el: '#app',
data: {
list: []
},
async created(){
const res = await axios.get('http://hmajax.itheima.net/api/news')
this.list = res.data.data
}
})
</script>
</body>
</html>案例-mounted的應(yīng)用
mounted 模板渲染完成，可以開始操作DOM了。?
<!--
需求：獲取焦點
-->
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>示例-獲取焦點</title>
<!-- 初始化樣式 -->
<link rel="stylesheet" >
<!-- 核心樣式 -->
<style>
html,
body {
height: 100%;
}
.search-container {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.search-container .search-box {
display: flex;
}
.search-container img {
margin-bottom: 30px;
}
.search-container .search-box input {
width: 512px;
height: 16px;
padding: 12px 16px;
font-size: 16px;
margin: 0;
vertical-align: top;
outline: 0;
box-shadow: none;
border-radius: 10px 0 0 10px;
border: 2px solid #c4c7ce;
background: #fff;
color: #222;
overflow: hidden;
box-sizing: content-box;
-webkit-tap-highlight-color: transparent;
}
.search-container .search-box button {
cursor: pointer;
width: 112px;
height: 44px;
line-height: 41px;
line-height: 42px;
background-color: #ad2a27;
border-radius: 0 10px 10px 0;
font-size: 17px;
box-shadow: none;
font-weight: 400;
border: 0;
outline: 0;
letter-spacing: normal;
color: white;
}
body {
background: no-repeat center /cover;
background-color: #edf0f5;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="search-container">
<div class="search-box">
<input type="text" v-model="words" id="inp">
<button>搜索一下</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
words: ''
},
//核心思路：
//1.等輸入框渲染出來
//2.讓輸入框獲取焦點
mounted(){
document.querySelector('#inp').focus()
}
})
</script>
</body>
</html>工程化開發(fā) & 腳手架 Vue CLI
開發(fā) Vue 的兩種方式
1. 核心包傳統(tǒng)開發(fā)模式：基于 html / css / js 文件，直接引入核心包，開發(fā) Vue。2. 工程化開發(fā)模式：基于構(gòu)建工具（例如：webpack ) 的環(huán)境中開發(fā) Vue。
問題：① webpack 配置 不簡單② 雷同 的基礎(chǔ)配置③ 缺乏 統(tǒng)一標(biāo)準(zhǔn)需要一個工具，生成標(biāo)準(zhǔn)化的配置！
基本介紹??
Vue CLI 是 Vue 官方提供的一個 全局命令工具。可以幫助我們 快速創(chuàng)建 一個開發(fā) Vue 項目的 標(biāo)準(zhǔn)化基礎(chǔ)架子 ?！炯闪?webpack 配置】好處：????????1. 開箱即用，零配置????????2. 內(nèi)置 babel 等工具????????3. 標(biāo)準(zhǔn)化使用步驟：????????1. 全局安裝 (一次) ： yarn global add @vue/cli 或 npm i @vue/cli -g????????2. 查看 Vue 版本： vue --version????????3. 創(chuàng)建項目架子： vue create project-name （項目名-不能用中文）????????4. 啟動項目： yarn serve 或 npm run serve （找package.json）
錯誤解析
這里可能會出現(xiàn)幾個錯誤提示：
無法將“yarn”項識別為 cmdlet、函數(shù)、腳本文件或可運行程序的名稱。請檢查名稱的拼寫，如果包括路徑，請確保路徑正確 ，然后再試一次。?
解決方法：
使用管理員身份打開cmd
npm install -g yarn
解決方法：
1、win+x 打開PowerShell（管理員）
2、set-ExecutionPolicy RemoteSigned //設(shè)置為打開
3、鍵入Y或者A,同意4、執(zhí)行g(shù)et-executionpolicy查看是否更改成功，為RemoteSigned表示成功
執(zhí)行完上邊這些基本就可以解決了，如若沒執(zhí)行命令還沒解決；可能是原來目錄下和當(dāng)前設(shè)置的并沒有同步，還是保持原來的設(shè)置。
那么可以在powershell中找到相應(yīng)命令行，進行運行腳本，即可執(zhí)行。
出現(xiàn)這個原因的話，如果在項目里面是因為項目中存在yarn.lock
只需要把yarn.lock在該項目刪除然后全局安裝就好了
npm install -g yarn
腳手架目錄文件介紹 & 項目運行流程
文章來源：http://www.zghlxwxcb.cn/news/detail-616476.html
組件化開發(fā) & 根組件
① 組件化： 一個頁面可以拆分成 一個個組件 ，每個組件有著自己獨立的 結(jié)構(gòu)、樣式、行為 。好處：便于 維護 ，利于 復(fù)用 → 提升 開發(fā)效率 。組件分類：普通組件、根組件。
② 根組件：整個應(yīng)用最上層的組件，包裹所有普通小組件。
App.vue 文件（單文件組件）的三個組成部分
1. 語法高亮插件：
2. 三部分組成：◆ template：結(jié)構(gòu) （有且只能一個根元素）◆ script: js邏輯◆ style： 樣式 (可支持less，需要裝包)
3. 讓組件支持 less（1） style標(biāo)簽，lang="less" 開啟less功能（2） 裝包: yarn add less less-loader
普通組件的注冊使用
1. 局部注冊：只能在注冊的組件內(nèi)使用
① 創(chuàng)建 .vue 文件 (三個組成部分)
?② 在使用的組件內(nèi)導(dǎo)入并注冊
使用：???????? 當(dāng)成 html 標(biāo)簽使用 `<組件名></組件名>`注意:???????? 組件名規(guī)范 → 大駝峰命名法，如：HmHeader
2. 全局注冊：所有組件內(nèi)都能使用
① 創(chuàng)建 .vue 文件 (三個組成部分)
② main.js 中進行全局注冊
文章來源地址http://www.zghlxwxcb.cn/news/detail-616476.html
使用：◆ 當(dāng)成 html 標(biāo)簽使用 `<組件名></組件名>`注意:◆ 組件名規(guī)范 → 大駝峰命名法，如：HmHeader技巧：◆ 一般都用 局部注冊 ，如果發(fā)現(xiàn)確實是 通用組件 ，再定義到全局。
到了這里，關(guān)于前端Vue入門-day03-用Vue實現(xiàn)工程化、組件化開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
