3、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