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

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

基礎項目目錄html

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資源目錄就能夠了,其它目錄大多都是一些配置信息,不須要太費精力的關注。vue

配置SRC目錄node

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	// 項目配置文件        

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

配置staitc資源目錄webpack

static
    |-css	// 放一些第三方的樣式文件
    |-font	// 放字體圖標文件
    |-images	// 放圖片文件,若是是複雜項目,能夠在這裏面再分門別類
    |-js	// 放一些第三方的JS文件,如 jquery

對於一些不常常修改變更的css和js我們統一放到static目錄裏,由於在src裏面的文件,未來每次打包時都會對其進行打包,而文件特別多的狀況下,打包會變的特別慢。web

調整App.vue
上面咱們進行的是一些目錄結構的設置,如今咱們對文件進行修改配置,使項目從新運行起來。首先將App.vue調整成以下代碼:vue-router

<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包。vue-cli

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

 

 

 

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

<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

相關文章
相關標籤/搜索