Vue-Cli 項(xiàng)目文件結(jié)構(gòu)分析

1. 前言

在上一小節(jié)中，我們介紹了 Vue-Cli 初始化項(xiàng)目，本小節(jié)我們一起來分析以下 Vue-Cli 創(chuàng)建項(xiàng)目的文件結(jié)構(gòu)。

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

首先我們先看以下用 Vue-Cli 創(chuàng)建項(xiàng)目的整體結(jié)構(gòu)：

項(xiàng)目相關(guān)的代碼，我們都放在 src 的文件夾中，該文件夾中的結(jié)構(gòu)如下：

• assets 是資源文件夾，通常我們會(huì)把圖片資源放在里面。
• components 文件夾通常會(huì)放一些組件。
• router 文件夾里面放的是 VueRouter 的相關(guān)配置。
• store 文件夾里面放的是 Vuex 的相關(guān)配置。
• views 文件夾里面通常放置頁面的 .vue 文件。
• App.vue 定義了一個(gè)根組件。
• main.js 是項(xiàng)目的入口文件。

Vue-Cli 給我們提供了一個(gè)默認(rèn)的項(xiàng)目文件結(jié)構(gòu)，當(dāng)然你并不是一定要按照這個(gè)文件結(jié)構(gòu)來編寫項(xiàng)目，你完全可以根據(jù)項(xiàng)目的需要或者個(gè)人喜好對(duì)項(xiàng)目結(jié)構(gòu)加以改寫。

3. 運(yùn)行項(xiàng)目

我們打開之前通過腳手架創(chuàng)建的項(xiàng)目，在項(xiàng)目的根目錄下運(yùn)行：

npm run serve

出現(xiàn)界面后：

我們可以打開瀏覽器預(yù)覽項(xiàng)目：

4. 詳細(xì)分析

可能，同學(xué)們對(duì)這樣一個(gè)項(xiàng)目結(jié)構(gòu)還不是很熟悉，接下來，我們將對(duì)主要的幾個(gè)項(xiàng)目文件詳細(xì)分析。

4.1 main.js 入口文件分析

打開 main.js 入口文件，我們可以看到這段代碼：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

我們通過 import 引入了 App 組件、VueRouter 配置 router、Vuex 配置 store。

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

通過 new Vue () 創(chuàng)建 Vue 實(shí)例，并將 router、store 配置傳入。通過 render 函數(shù)渲染組件 App。并將 Vue 實(shí)例掛載到 id 為 app 的 div 上。

4.2 router 文件分析

打開 router/index.js 文件，我們可以看到路由配置信息：

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import( "../views/About.vue")
  }
];

定義了兩個(gè)路由：

• 路由 ‘/’ 匹配組件 Home。
• 路由 ‘/about’ 匹配組件 About。

4.3 store 文件分析

打開 store/index.js 文件，我們可以看到 Vuex 的配置信息：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});

5. 小結(jié)

在本小節(jié)我們介紹了腳手架根據(jù)初始化項(xiàng)目的文件結(jié)構(gòu)。