通過上一篇博文《Vue2+VueRouter2+webpack 構建項目實戰（一）：準備工作》,我們已經新建好了一個基于vue+webpack的項目。本篇文章詳細介紹下項目的結構。

項目目錄以及文件結構

如圖所示：

如上圖所示，自動構建的vue項目的結構就是這樣。

目錄/文件說明

build	這個是我們最終發布的時候會把代碼發布在這里，在開發階段，我們基本不用管。
config	配置目錄，默認配置沒有問題，所以我們也不用管
node_modules	項目開發依賴的一些模塊
src	開發目錄（絕大多數工作都是在這里開展）
static	資源目錄
test	初始測試目錄，沒用，刪除即可
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等。基本不用管，放著就是了
index.html	首頁入口文件，基本不用管，如果是開發移動端項目，可以在head區域加上你合適的meta頭
package.json	項目配置文件。前期基本不用管，但是你可以找一下相關的資料，學習一下里面的各項配置。至少，要知道分別是干嘛的。初期就不管了。
README.md	不用管

src文件夾

?

如上圖所示，這是src文件夾下面的初始情況，里面有一些示例代碼之類的。比如，它吧logo放在assets文件夾里面。

commponents目錄里面放了一個演示的組件文件。
router文件放路由配置文件；
App.vue是項目入口文件。
main.js這是項目的核心文件，全局的配置都在這個文件里面配置

其中App.vue項目入口代碼如下：

<template><div id="app"><img src="./assets/logo.png"><router-view></router-view></div> </template><script> export default {name: 'app' } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>

核心文件main.js代碼如下：

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,template: '<App/>',components: { App } })

這個配核心配置文件，就是引入vue，導入入口vue以及引入路由，最后new了一個Vue實例對象，來加載數據。

router文件夾下的index.js

import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Hello',component: Hello}] })

在這個index.js中引入了Hello.vue組件模塊，配置路由信息。

整理目錄

上面只是讓大家了解一下具體是什么情況，下面，我們開始動手，把不想管的干掉，然后把src變成這個樣子:

如上圖所示，把文件夾和文件都新建好，后面的博文我會詳細給出每個文件的代碼的。

文件目錄說明

component	組件文件夾我們寫的一些公用的內容可以放在這里的。
config	核心配置文件夾
frame	存放自路由的文件夾
page	項目模板文件夾,所有的頁面文件全部存放與此，后面會根據需要來建立各種子目錄
style	樣式存放目錄

?

vue支持每一個模板里面寫css，這樣可以做到隨用隨取。但是，我個人不太喜歡這樣，我還是喜歡吧css給單獨放出來，因為這樣便于整理，另外，使用scss的朋友都知道，我們會預設大量的變量，代碼片供我們在寫css的時候使用，如果每個模板文件里面都需要引用一次那是及其操蛋的。

參考

參考地址：http://blog.csdn.net/fungleo/article/details/53171614

轉載于:https://www.cnblogs.com/moqiutao/p/7282198.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue2+VueRouter2+webpack 构建项目实战（二）：目录以及文件结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。