vue系列教程-12vue單文件組件開發(fā)

本內(nèi)容為系列內(nèi)容两入，全部內(nèi)容請看我的vue教程分類

我的個(gè)人博客
本節(jié)倉庫地址
視頻教程地址

那么前面我們都是直接引入vuejs文件的方式進(jìn)行開發(fā)，然后在同一個(gè)html文件中進(jìn)行開發(fā)

這顯然是不符合組件化開發(fā)的思路的巍实，前面我們說過實(shí)際當(dāng)中的開發(fā)都是編寫以.vue結(jié)尾的頁面文件，然后用webpack進(jìn)行打包

這一節(jié)我們將到vue的單文件組件開發(fā)，使用的是webpack提供的簡易模板长踊，沒有webpack基礎(chǔ)的朋友不要怕，下一節(jié)會(huì)簡答講一講webpack的基礎(chǔ)

安裝

首先依次安裝這些包萍倡，前提是你的電腦已經(jīng)安裝了node

npm install webpack -g
npm install @vue/cli -g
npm install  @vue/cli-init  -g 
vue init webpack-simple

開始安裝后會(huì)有一系列的提示身弊，都按enter下一步就行

image-20200423002522060

配置文件講解

簡單的看一下配置文件，看不懂的沒有關(guān)系后面會(huì)講到

image-20200423002755909

打開 src/main.js列敲，簡單講解一下阱佛，這里它導(dǎo)入了vue的文件，然后實(shí)例化了一個(gè)vue戴而，然后還導(dǎo)入了一個(gè) App.vue文件凑术，并且把這個(gè)文件渲染給頁面，所以項(xiàng)目運(yùn)行起來默認(rèn)頁面就是 App.vue

// 導(dǎo)入vue文件
import Vue from 'vue'
// 導(dǎo)入 App.vue
import App from './App.vue'
// 實(shí)例化vue
new Vue({
  el: '#app',
  // 使用render函數(shù)將 App.vue 渲染給頁面 
  render: h => h(App)
})

然后打開 App.vue 查看一下所意，刪掉不用的東西淮逊，然后仔細(xì)看下頁面結(jié)構(gòu)，一個(gè)template扁眯，一個(gè)script壮莹，一個(gè)style；這個(gè)結(jié)構(gòu)和我們前面定義組件的方式是不是差不多的呢姻檀？這就是vue的單文件組件開發(fā)命满，只不過他這個(gè)寫法會(huì)被webpack打包處理，所以可以這樣寫

image-20200423003615021

運(yùn)行

我們在命令行中輸入,然后打開瀏覽器查看效果

npm install
npm run dev

image-20200423003636305

創(chuàng)建一個(gè)組件

我們在src目錄下面創(chuàng)建一個(gè)views目錄绣版，專門用來存放vue頁面文件胶台，并創(chuàng)建一個(gè)Index.vue文件

文件內(nèi)容

<template>
    <h1>
        this is index
    </h1>
</template>

然后我們來到App.vue歼疮，我們在script標(biāo)簽中導(dǎo)入剛剛創(chuàng)建的組件，并且注冊組件,這一切和我們上面講的都是一樣的

<script>
import Index from './views/Index'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{
    Index,
  }
}
</script>

然后在頁面中引用

<template>
  <div >
    <Index></Index>
    {{msg}}
  </div>
</template>

查看結(jié)果

image-20200423004311583

這一切是不是就方便清晰起來了呢诈唬？

這一節(jié)就到這里了韩脏，重點(diǎn)是如何實(shí)現(xiàn)的這個(gè)打包，將會(huì)在下一節(jié)講到

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者