vue項目結構設計
阿新 • • 發佈:2018-01-28
pack 信息 enc span 編寫 除了 什麽 image module
感覺這個寫的挺詳細的,要詳細了解可以看這個→ 結構詳細介紹
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
介紹自己這個項目的,隨便寫,讓別人看得懂就行,看不懂就算了
詳細介紹:
1、package.json
package.json文件是項目的配置文件,除了一些項目的基本配置信息,還有幾個地方需要重點記憶
dependcies:項目發布時的依賴
devDependencies:項目開發時的依賴
scripts:編譯項目時的一些命令
2、.babellrc文件:
.babelrc文件定義了ES6的轉碼規則,基於ES6編寫的js代碼在編譯時都會被babel轉碼器轉換為ES5代碼
{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}
3、index.html
主頁我們可以像平時普通的html文件一樣引入文件和書寫基本信息,添加meta標簽等。
4、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)
5、App.vue
這個是一個標準的vue組件,包含三個部分,一個是模板,一個是script,一個是樣式
持續更新中。。。。
vue項目結構設計