三、VueJs 填坑日記之項目文件認識

上一篇博文，我們搭建了一套基礎的vuejs的環境，首先安裝node.js，然后利用npm包管理器，安裝vue-cli，設置淘寶鏡像，初始化項目，安裝依賴，運行。在這一篇，我們將認識vuejs項目里的各個目錄結構。

基礎項目目錄

build	// 編譯配置文件，一般不用管
    |-build.js
    |-check-versions.js
    |-logo.png
    |-utils.js
    |-vue-loader.conf.js
    |-webpack.base.conf.js
    |-webpack.dev.conf.js
    |-webpack.prod.conf.js
    |-webpack.test.conf.js
config	// 項目基本設置文件夾
    |-dev.env.js	// 開發配置文件
    |-index.js	// 配置主文件
    |-prod.env.js	// 編譯配置文件
node_modules	// 項目依賴包文件夾
src	// 我們的項目的源碼編寫文件
    |-assets	// 初始項目資源目錄，回頭刪掉
    |-components	// 組件目錄
    |-HelloWorld.vue	// 測試組件
    |-router	// 路由配置文件夾
    |-index.js	// 路由配置文件
    |-App.vue	// APP入口文件
    |-main.js	// 主配置文件
static	// 資源放置目錄
index.html	// 項目入口文件
package.json	// 項目依賴包配置文件

上面就是vuejs項目初始化后的目錄結構，我們一般情況下，只需要關注src和static資源目錄就可以了，其它目錄大多都是一些配置信息，不需要太費精力的關注。

配置SRC目錄

src
    |-api	// 接口調用工具文件夾
        |-index.js	// 接口調用工具
    |-components	// 組件文件夾，目前為空
    |-config	// 項目配置文件夾
        |-index.js	// 項目配置文件
    |-frame	// 子路由文件夾
        |-frame.vue	// 默認子路由文件
    |-pages	// 我們的頁面組件文件夾
        |-Index.vue
        |-Content.vue	
    |-router	// 路由配置文件夾
        |-index.js	// 路由配置文件
    |-style	// scss 樣式存放目錄
        |-base	// 基礎樣式存放目錄
        |-scss	// 頁面樣式文件夾
        |-style.scss	// 主樣式文件
    |-utils	// 常用工具文件夾
    |-App.vue	// APP入口文件
    |-main.js	// 項目配置文件        

將目錄結構按上面的層級配置完成后，不要着急運行項目，這個時候由於刪除了一些文件夾，項目是跑不起來的。

配置staitc資源目錄

static
    |-css	// 放一些第三方的樣式文件
    |-font	// 放字體圖標文件
    |-images	// 放圖片文件，如果是復雜項目，可以在這里面再分門別類
    |-js	// 放一些第三方的JS文件，如 jquery

對於一些不經常修改變動的css和js咱們統一放到static目錄里，因為在src里面的文件，將來每次打包時都會對其進行打包，而文件特別多的情況下，打包會變的特別慢。

調整App.vue
上面我們進行的是一些目錄結構的設置，現在我們對文件進行修改配置，使項目重新運行起來。首先將App.vue調整成如下代碼：

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'app'
}
</script>

<style lang="scss">
    @import "./style/style";	<!--在這里我們直接導入主樣式文件-->
</style>    

注意上面使用了lang="scss"，這是因為我們使用了 scss 文件預編譯，所以我們要安裝scss的npm包。

cnpm install sass-loader -D
cnpm install node-sass -D

 

 

 

調整Index.vue和Content.vue
src/pages/Index.vue

<template>
    <div>index page</div>
</template>

 

src/pages/Content.vue

<template>
<div>content page</div>
</template>

暫時先寫如上代碼，后面會對上面代碼進行講解和豐富。

 

調整 router 路由文件
打開src/router/index.js，目前文件是這樣的，也是默認的，我們並沒有做過任何修改。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

調整為如下代碼：

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/Index'
import Content from '@/pages/Content'

Vue.use(Router)

export default new Router({
　　routes: [
　　　　{
　　　　　　path: '/',
　　　　　　component: Index
　　　　},
　　　　{
　　　　　　path: '/Content/:id',
　　　　　　component: Content
　　　　}
　　]
})

上面的/就是默認的意思，這里默認顯示我們的Index.vue，而大家可能會對Content/:id有疑問，因為咱們做的是一個列表，然后點擊列表中具體的某一條，就進入到了內容頁面。而:id就是vuejs路由的動態路由配置。我們用id來區分顯示不同的內容。

上些工作做完， 我們的項目就基本配置好了，這個時候來啟動我們的項目

cnpm run dev

當出現上圖，則表示啟動成功，如果有ERROR則表示失敗，請仔細檢查上面的各個文件的內容是否書寫有錯。啟動成功我們打開瀏覽器，輸入http://localhost:8080，如果看到以下界面，則說明和我的項目是一樣的。

本篇文章大部分內容摘抄至FungLeo博客，忠心感謝FungLeo，是你們無私的奉獻，才讓我們有了學習的參考，以下是地址：
http://blog.csdn.net/FungLeo/article/details/77585205