上一篇博文,咱們搭建了一套基礎的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