Vue2+VueRouter2+webpack 構建項目實戰（二）：目錄以及檔案結構

標籤：是什麼   設定檔   run   route   tar   rom   瞭解   對象   time   

通過上一篇博文《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

Vue2+VueRouter2+webpack 構建項目實戰（二）：目錄以及檔案結構