vue項目結構設計

感受這個寫的挺詳細的，要詳細瞭解能夠看這個→ 結構詳細介紹

vue項目結構圖：

簡單介紹：

build目錄是一些webpack的文件，配置參數什麼的，通常不用動

config是vue項目的基本配置文件 

node_modules是項目中安裝的依賴模塊 

src源碼文件夾，基本上文件都應該放在這裏。

　　—assets 資源文件夾，裏面放一些靜態資源 
　　—components這裏放的都是各個組件文件 
　　—App.vue App.vue組件 
　　—main.js入口文件 

static生成好的文件會放在這個目錄下。

test測試文件夾，測試都寫在這裏 

.babelrc babel編譯參數，vue開發須要babel編譯 
.editorconfig 編輯器的配置文件 
.gitignore 用來過濾一些版本控制的文件，好比node_modules文件夾 ，通常在githubpush文件的時候須要用到
index.html 主頁 
package.json 項目文件，記載着一些命令和依賴還有簡要的項目描述信息 
README.md 介紹本身這個項目的，隨便寫，讓別人看得懂就行，看不懂就算了

詳細介紹：

一、package.json
　　package.json文件是項目的配置文件，除了一些項目的基本配置信息，還有幾個地方須要重點記憶
　　　　dependcies：項目發佈時的依賴
　　　　devDependencies：項目開發時的依賴
　　　　scripts：編譯項目時的一些命令
二、.babellrc文件：
　　.babelrc文件定義了ES6的轉碼規則，基於ES6編寫的js代碼在編譯時都會被babel轉碼器轉換爲ES5代碼
　　　　{ 
　　　　　　"presets": ["es2015", "stage-2"],
　　　　　　 "plugins": ["transform-runtime"],
　　　　　　 "comments": false 
　　　　}
三、index.html
　　主頁咱們能夠像平時普通的html文件同樣引入文件和書寫基本信息，添加meta標籤等。
四、main.js
　　這裏是入口文件，能夠引入一些插件或者是靜態資源，引入以前要肯定已經安裝了該插件，記錄能夠在package.json文件中查看
　　/*引入Vue框架*/ 
　　import Vue from 'vue' 
　　/*引入資源請求插件*/ 
　　import VueResource from 'vue-resource' 
　　/*重置樣式*/ 
　　import "assets/css/base.css" 
　　/*基本JS*/ 　　
　　import "assets/js/common.js" 
　　/*引入路由設置*/ 
　　import "./routers.js" 　　
　　/*使用VueResource插件*/ 
　　Vue.use(VueResource)
五、App.vue
　　這個是一個標準的vue組件，包含三個部分，一個是模板，一個是script，一個是樣式
　　

 

持續更新中。。。。