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

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

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

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

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

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

npm run serve

出現界面後：

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

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

打開 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 上。

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

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

定義了兩個路由：

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

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

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {} });

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!