前言

單文件組件在實(shí)際開發(fā)中是經(jīng)常使用的，那么如何創(chuàng)建一個(gè)單文件組件呢？那么本篇就來簡(jiǎn)單入一下單文件組件。

一，創(chuàng)建單文件組件

1.切換到你想要?jiǎng)?chuàng)建該文件的目錄下，我這里切換的是desktop這個(gè)目錄，當(dāng)然，也可以根據(jù)自己需要來進(jìn)行切換該命令為 cd 目錄/文件名稱

2.打開cmd，輸入npm config set registry https://registry.npm.taobao.org 切換/設(shè)置到淘寶鏡像

安裝全局vue腳手架（簡(jiǎn)單方便在哪里都可以使用）npm install -g @vue/cli

看到如下內(nèi)容表示安裝成功

3.使用vue create 項(xiàng)目名稱 創(chuàng)建項(xiàng)目，成功后會(huì)有一個(gè)vue版本的選擇（按鍵盤的下箭頭即可切換），這里我們選的是Vue2

命令執(zhí)行后，如果有下圖所示，則表示創(chuàng)建成功(很貼心，下面第一行藍(lán)色的代碼就是切換到創(chuàng)建成功的目錄上面，第二行則是運(yùn)行該vue項(xiàng)目)

4.創(chuàng)建成功后該項(xiàng)目自帶一個(gè)下圖所示項(xiàng)目（到此為止一個(gè)基于腳手架的vue項(xiàng)目就完成了）

5.可以直接搜剛才所創(chuàng)建的文件，然后直接拖入vscode（有下面這些文件）我們可以找到src下面的components文件夾，在它里面有一個(gè)文件名叫HelloWorld.vue的文件，這里面就是寫的上面圖片的代碼

下面簡(jiǎn)單的把該項(xiàng)目?jī)?nèi)的文件匯總了一下，文件創(chuàng)建完了，咱不能不知道這是干嘛的吧，

好奇的小伙伴會(huì)發(fā)現(xiàn)一個(gè)問題，就是在node_module下面有個(gè)vue文件，該文件內(nèi)又包含著各種版本的vue，列如：vue.js ,vue.runtime.js等一大堆vue版本，下面來瞅瞅本本的區(qū)別

二，關(guān)于不同版本的Vue

vue.js與vue.runtime.xxx.js的區(qū)別

(1) .vue.js是完整版的Vue,包含:核心功能+模板解析器。

(2) . vue.runtime. xxx. js是運(yùn)行版的Vue,只包含核心功能,沒有模板解析器。

因?yàn)関ue.runtime.xxx. js沒有模板解析器，所以不能使用template配置項(xiàng)，需要使用

render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容。

三，vue. config. js配置文件

使用vue inspect > output. js可以查看到Vue腳手架的默認(rèn)配置。

使用vue.config. js可以對(duì)腳手架進(jìn)行個(gè)性化定制（下面是vue.config.js的配置,可供參考）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

四，ref屬性

1.被用來給元素或子組件注冊(cè)引用信息，也可以說是用來代替id的

2.應(yīng)用在htm1標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象(VueComponent)

使用方式:打標(biāo)識(shí): <h1 ref="xx">.....</h1> 或<School ref=" xxx" >< /School>獲取: this.$refs. xxx

五，配置項(xiàng)props

功能:讓組件接收外部傳過來的數(shù)據(jù)

(1)傳遞數(shù)據(jù):<Demo name= " xxx" />

(2)接收數(shù)據(jù):

第一種方式(只接收)

props: ["name"]

第二種方式(限制類型)

  props: {
    name:string,
    age:Number
  }

第三種方式(限制類型、限制必要性、指定默認(rèn)值)

  props :{
    name : {
    type:String, //類型
    required:true, //必要性
    default:'老王' //默認(rèn)值
    }
  }

注: props 是只讀的，雖然是只讀但是還可以被修改，Vue底層會(huì)監(jiān)測(cè)到props的修改，如果進(jìn)行了修改，就會(huì)發(fā)出警告，如果需求確實(shí)需要修改，那么就把props的內(nèi)容復(fù)制到data里面，然后通過修改data里面的內(nèi)容實(shí)現(xiàn)需求

六，mixin(混入)

功能:可以把多個(gè)組件共用的配置提取成一 個(gè)混入對(duì)象

使用方式:

第一步定義混合，例如:data(){....},methods:{....}}，將該組件的methods或者data配置項(xiàng)拿出去，放到mixin.js里面，這里是將methods放到了mixin.js里面

第二步使用混入

七，插件

功能:用于增強(qiáng)Vue

本質(zhì):包含insta1l方法的一個(gè)對(duì) 象，install的第一 個(gè) 參數(shù)是Vue, 第二個(gè)以后的參 數(shù)是插件使用者傳遞的據(jù)。

1.定義插件:install = function (Vue, options) {// 添加全局過濾器Vue.filter(....),這里也可以添加其他的，比如自定義指令等

2.使用插件: Vue.use()

八，scoped

scoped樣式作用:讓樣式在局部生效，防止沖突。

寫法: <style scoped> </style>

一般scoped只寫在子組件內(nèi)，app內(nèi)不需要寫，因?yàn)樵赼pp內(nèi)大部分都是基礎(chǔ)樣式，每個(gè)組件都能用到的，如果加了scoped，那么只對(duì)本組件生效，其他的組件就無法使用

總結(jié)

到此這篇關(guān)于輕松學(xué)Vue組件之單文件組件的文章就介紹到這了,更多相關(guān)Vue單文件組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論