了解什么叫組件
把某個(gè)界面或者說(shuō)某個(gè)小功能腕柜，封裝起來(lái)就叫組件（就是對(duì)html css js的一個(gè)綜合封裝）济似，組件也是Vue的實(shí)例，所以它也有自己的data和methods以及生命周期鉤子等
組件開(kāi)發(fā)特點(diǎn)：可復(fù)用盏缤，同時(shí)會(huì)簡(jiǎn)化代碼結(jié)構(gòu)砰蠢，易于維護(hù)，同時(shí)利于多人協(xié)同開(kāi)發(fā)等唉铜。
安裝單文件組件所需要依賴
安裝vue-cli 腳手架
- 在cmd命令窗口輸入（在任意的路徑都可以）
npm install -g @vue/cli
- 安裝成功檢測(cè)在cmd命令窗口輸入：
vue -V // 如果安裝成功會(huì)返回：@vue/cli 4.0.5類似這樣的版本信息
安裝出錯(cuò)解決方案(如果 vue -V無(wú)法顯示版本信息台舱，說(shuō)明安裝失敗)
解決方案
更換網(wǎng)絡(luò)環(huán)境：有線，換無(wú)線潭流，無(wú)線換4G
更換安裝的工具
cnpm安裝 ：
- 先安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm安裝vue-cli：
cnpm install -g @vue/cli
yarn安裝 :
- 先安裝yarn
npm install -g yarn
- yarn安裝vue-cli
yarn global add @vue/cli
- 清除npm緩存之后竞惋，重新安裝
npm cache clean -f //清除npm緩存
重新執(zhí)行安裝的命令
-
在用腳手架搭建vue項(xiàng)目時(shí)，提示：無(wú)法加載文件 C:\Users\電腦用戶名\AppData\Roaming\npm\vue.ps1,因?yàn)樵诖讼到y(tǒng)禁止運(yùn)行腳本
這是你筆記本禁止運(yùn)行腳本幻枉，解決辦法
命令： set-ExecutionPolicy RemoteSigned
開(kāi)啟步驟
安裝單文件組件依賴包（安裝完成vue-cli后進(jìn)行這一步）
- 正常安裝
npm install @vue/cli-service-global -g
- cnpm安裝的用：
cnpm install @vue/cli-service-global -g
- yarn安裝的用：
yarn global add @vue/cli-service-global
注意：如果 前面用yarn的人就一直用yarn,不要用yarn裝完vue-cli,又用npm裝其它插件碰声，這樣有可能 會(huì)出問(wèn)題，盡量都是同步一個(gè)安裝熬甫，就是以前用npm,后面就一直用npm,以前用yarn 后面就一直用yarn
組件結(jié)構(gòu)講解
把每個(gè)組件都放到一個(gè)獨(dú)立的.vue文件里胰挑，
文件的后綴是：
.vue文件此文件三大部分：
template模板 、script腳本 、style樣式
template
- 寫(xiě)html結(jié)構(gòu)的
- 注意這里的html部分必須用一個(gè)標(biāo)簽全包住
script
- 寫(xiě)邏輯的瞻颂，data豺谈、methods、生命周期鉤子贡这、計(jì)算屬性等等代碼都寫(xiě)在這個(gè)部分
- 注意這里的data不再是一個(gè)對(duì)象茬末，在組件里，data將會(huì)是一個(gè)函數(shù),return一個(gè)對(duì)象盖矫。
style
寫(xiě)樣式的
-
如何 導(dǎo)入外部css,
- 在css中的導(dǎo)入(主體使用)：
@import url(./babel.css);
- 快捷鍵快速生成：
<vue>
單文件組件的運(yùn)行
在cmd窗口該vue文件根目錄下輸入vue serve index.vue 這里index.vue是需要運(yùn)行的單文件組件的路徑
vue serve index.vue
注意點(diǎn)
- template里面的html部分必須用一個(gè)標(biāo)簽全包住
- 組件里沒(méi)有el丽惭，組件是無(wú)需掛載到哪的，里面已經(jīng)有template是它的使用的html了
- data在組件里面是一個(gè)function,return 一個(gè)對(duì)象
<template>
<!-- 組件html區(qū)域
在組件里面的html都必須有一個(gè)獨(dú)立的標(biāo)簽包住所有標(biāo)簽
-->
<div>
<button>按鈕</button>
<button>{{msg}}</button>
</div>
</template>
<script>
export default {
// 不再需要el去確定使用范圍
// 組件 里面的data將是一個(gè)函數(shù) return一個(gè)對(duì)象
//data:function(){return {}}
data() {
return {
msg: "hello"
};
},
methods: {
alertEvent(value) {
alert(value);
}
},
created() {
//這里面語(yǔ)法檢測(cè)比較嚴(yán)格辈双，直接寫(xiě)console會(huì)報(bào)錯(cuò)
window.console.log(this);
// this.alertEvent(123);
}
};
</script>
<style>
/* 如果需要引入 外部css
在css中的導(dǎo)入：
@import url(./babel.css);
在js中的導(dǎo)入
import "./babel.css"
*/
/* @import url(./babel.css); */
@import "./babel.css";
button {
width: 100px;
}
</style>
