總結(jié)一下最近利用vue.js完成的一個單文件組件應(yīng)用的項目。
首先說一下進(jìn)行一個vuejs應(yīng)用的開發(fā)需要準(zhǔn)備哪些知識(本文基于Interlij IDEA開發(fā))

• vue.js

(這不是廢話的廢話哈哈)狮鸭，花一個下午的時間把官方文檔看一遍是很有必要的(動手安裝合搅、實現(xiàn)一下小功能)，起碼要對vuejs有一個整體的認(rèn)識歧蕉，明白它的運(yùn)行機(jī)制以及生命周期灾部。官方文檔戳我

• ECMAScript 6

并不是說vuejs一定要用ES6才能寫，但ES6某些函數(shù)能對你的開發(fā)速度起很大作用惯退，建議邊用邊學(xué)赌髓。

• node、npm的安裝使用

• ESLint插件

規(guī)范你的JavaScript代碼 ESlint安裝與規(guī)則

• vuetify

以下示例以此作為應(yīng)用的UI組件 戳我

下面和大家分享一下我構(gòu)建單文件組件的項目結(jié)構(gòu)，以及運(yùn)行流程

安裝與配置

官方文檔已經(jīng)闡述得非常清楚了锁蠕，詳情參考官方文檔戳我

具體的選項如下(僅代表個人觀點(diǎn))

vue安裝選項

安裝結(jié)束后,切換到項目所在目錄夷野，通過命令即可運(yùn)行

cd 你的項目路徑

npm run dev

ctrl + c 退出，終止批處理操作

看到以下界面即搭建成功了!!

項目層次結(jié)構(gòu)

我們使用IDE打開我們剛剛構(gòu)建的項目荣倾，這里使用Intellij IDEA

目錄結(jié)構(gòu)

我們先來分析一下項目的結(jié)構(gòu)悯搔，主要關(guān)注config、src舌仍、static

config：

整個應(yīng)用的配置文件妒貌，一般的話我們不需要修改，可以在index.js里配置代理铸豁，解決跨域問題(僅適用與開發(fā)模式)灌曙，詳情可查閱 API Proxying

src：(每個文件夾中都包含index.js,因為默認(rèn)index.js為入口)

資源文件存放的地方，為了項目結(jié)構(gòu)更加清晰节芥，繼續(xù)分層

• api：統(tǒng)一管理后臺api接口地址在刺、調(diào)用api的方法
• components：應(yīng)用中的公共組件，如頂部菜單欄
• pages：存放每一個單文件組件头镊，具體的頁面
• router：應(yīng)用的路由文件
• service：應(yīng)用的數(shù)據(jù)服務(wù)層蚣驼，對單文件組件進(jìn)行數(shù)據(jù)處理、業(yè)務(wù)處理
• store：vue的狀態(tài)管理(vuex)拧晕，如用于登錄用戶信息
• App.vue：整個應(yīng)用所有單文件組件的父組件
• main.js：整個應(yīng)用的程序入口

static

靜態(tài)文件存放位置隙姿，如圖標(biāo)、圖片

單文件組件結(jié)構(gòu)

命名：xx.vue
位置：位于pages文件夾下
一般來說厂捞，我們需要在單文件組件結(jié)構(gòu)中定義那么幾個標(biāo)簽

單組件文件內(nèi)容

一個簡單的示例

假如我現(xiàn)在要創(chuàng)建一個實時數(shù)據(jù)的單文件組件，那么我該如何去做呢队丝？

1. 首先我們創(chuàng)建一個屬于該模塊的文件夾靡馁。
2. 所有的單文件組件都以.vue后綴結(jié)尾。
3. 假設(shè)我這個頁面包含的組件為“選項框”机久、“列表”臭墨、“tip提示信息”，首先我定義一個父組件Current.vue膘盖，然后分別添加子組件CurrentControl.vue胧弛、CurrentTable.vue、CurrentTip.vue侠畔，注意首字母需要大寫结缚，對象的規(guī)范寫法(個人建議把頁面的所有組件拆分成不同的子組件來寫代碼，這樣結(jié)構(gòu)更加清晰软棺，維護(hù)更加方便)

父組件Current.vue我們可以這樣寫：

  <div class="ma-3">
    <current-control class="mb-2"></current-control>
    <current-tip  class="mb-2"></current-tip>
    <current-table></current-table>
  </div>
</template>
<script>
  import CurrentControl from './CurrentControl';
  import CurrentTable from './CurrentTable';
  import CurrentTip from './CurrentTip';

  export default {
    components: {
      CurrentTip,
      CurrentTable,
      CurrentControl,
    },
    name: 'Current',
  };
</script>

CurrentTip子組件可以這樣寫(其他子組件類似):

<template>
  <v-card class="">
    <v-alert class="subheading" color="success" outline icon="mdi-alert-octagram" :value="true">
    </v-alert>
  </v-card>
</template>

<script>
  export default {
    name: 'CurrentTip',
  };
</script>

通過配置路由红竭，配置父組件的對象名，就可以訪問所定義的單文件組件了。
最后附上一個小示例茵宪，基于leaflet地圖最冰、vuejs的單文件組件

本文沒具體涉及vuejs的具體細(xì)節(jié)實現(xiàn)，為大家提供了一個比較清晰的目錄結(jié)構(gòu)以及單文件組件的構(gòu)成稀火，日后有時間再進(jìn)行補(bǔ)充暖哨，歡迎大家留言討論交流~

如果你喜歡我的文章，謝謝你給我一個like~