Vue-Cli 項目文件結構分析

1. 前言

在上一小節中，我們介紹了 Vue-Cli 初始化項目，本小節我們一起來分析以下 Vue-Cli 創建項目的文件結構。

2. 目錄結構

首先我們先看以下用 Vue-Cli 創建項目的整體結構：

項目相關的代碼，我們都放在 src 的文件夾中，該文件夾中的結構如下：

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

Vue-Cli 給我們提供了一個默認的項目文件結構，當然你并不是一定要按照這個文件結構來編寫項目，你完全可以根據項目的需要或者個人喜好對項目結構加以改寫。

3. 運行項目

我們打開之前通過腳手架創建的項目，在項目的根目錄下運行：

npm run serve

出現界面后：

我們可以打開瀏覽器預覽項目：

4. 詳細分析

可能，同學們對這樣一個項目結構還不是很熟悉，接下來，我們將對主要的幾個項目文件詳細分析。

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 () 創建 Vue 實例，并將 router、store 配置傳入。通過 render 函數渲染組件 App。并將 Vue 實例掛載到 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")
  }
];

定義了兩個路由：

• 路由 ‘/’ 匹配組件 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. 小結

在本小節我們介紹了腳手架根據初始化項目的文件結構。