Vue學習(一)Vue目錄結構 vue 文件目錄結構詳解

時間 2019-12-11

原文原文鏈接

安裝教程網上一大把，能夠本身搜索。記錄下學習過程。javascript

認識下Vue的目錄結構，取自:https://www.cnblogs.com/dragonir/p/8711761.htmlcss

vue 文件目錄結構詳解

本篇文章主要介紹了vue 文件目錄結構詳解，小編以爲挺不錯的，如今分享給你們，也給你們作個參考。一塊兒跟隨小編過來看看吧
項目簡介
基於 vue.js 的前端開發環境，用於先後端分離後的單頁應用開發，能夠在開發時使用 ES Next、scss 等最新語言特性。項目包含：html

基礎庫: vue.js、vue-router、vuex、whatwg-fetch
編譯/打包工具：webpack、babel、node-sass
單元測試工具：karma、mocha、sinon-chai
本地服務器：express
目錄結構前端

├── README.md 項目介紹 ├── index.html 入口頁面 ├── build 構建腳本目錄 │ ├── build-server.js 運行本地構建服務器，能夠訪問構建後的頁面 │ ├── build.js 生產環境構建腳本 │ ├── dev-client.js 開發服務器熱重載腳本，主要用來實現開發階段的頁面自動刷新 │ ├── dev-server.js 運行本地開發服務器 │ ├── utils.js 構建相關工具方法 │ ├── webpack.base.conf.js wabpack基礎配置 │ ├── webpack.dev.conf.js wabpack開發環境配置 │ └── webpack.prod.conf.js wabpack生產環境配置 ├── config 項目配置 │ ├── dev.env.js 開發環境變量 │ ├── index.js 項目配置文件 │ ├── prod.env.js 生產環境變量 │ └── test.env.js 測試環境變量 ├── mock mock數據目錄 │ └── hello.js ├── package.json npm包配置文件，裏面定義了項目的npm腳本，依賴包等信息 ├── src 源碼目錄 │ ├── main.js 入口js文件 │ ├── app.vue 根組件 │ ├── components 公共組件目錄 │ │ └── title.vue │ ├── assets 資源目錄，這裏的資源會被wabpack構建 │ │ └── images │ │ └── logo.png │ ├── routes 前端路由 │ │ └── index.js │ ├── store 應用級數據（state） │ │ └── index.js │ └── views 頁面目錄 │ ├── hello.vue │ └── notfound.vue ├── static 純靜態資源，不會被wabpack構建。 └── test 測試文件目錄（unit&e2e） └── unit 單元測試 ├── index.js 入口腳本 ├── karma.conf.js karma配置文件 └── specs 單測case目錄 └── Hello.spec.js

開啓本地開發服務器，監控項目文件的變化，實時構建並自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081

npm run devvue

使用生產環境配置構建項目，構建好的文件會輸出到 "dist" 目錄，

npm run buildjava

運行構建服務器，能夠查看構建的頁面

npm run build-servernode

運行單元測試

npm run unitwebpack

先後端分離

項目基於 spa 方式實現先後端分離，服務器經過 nginx 區分前端頁面和後端接口請求，分發到不一樣服務。前端物理上只有一個入口頁面, 路由由前端控制（基於vue-router），根據不一樣的 url 加載相應數據和組件進行渲染。nginx

接口 mock

先後端分離後，開發前須要和後端同窗定義好接口信息（請求地址，參數，返回信息等），前端經過 mock 的方式，便可開始編碼，無需等待後端接口 ready。項目的本地開發服務器是基於 express 搭建的，經過 express 的中間件機制，咱們已經在 dev-server 中添加了接口 mock 功能。開發時，接口的 mock 數據統一放在 mock 目錄下，每一個文件內以下：web

module.exports = { // 接口地址 api: '/api/hello', // 返回數據 參考http://expressjs.com/zh-cn/4x/api.html response: function (req, res) { res.send(` <p>hello vue!</p> `); } }

模塊化

開發時可使用 ES2015 module 語法，構建時每一個文件會編譯成 amd 模塊。

組件化

整個應用經過 vue 組件的方式搭建起來，經過 vue-router 控制相應組件的展示，組件樹結構以下：

app.vue 根組件（整個應用只有一個）
├──view1.vue 頁面級組件，放在 views 目錄裏面，有子組件時，能夠創建子目錄
│ ├──component1.vue 功能組件，公用的放在 components 目錄，不然放在 views 子目錄
│ ├──component2.vue
│ └──component3.vue
├──view2.vue
│ ├──component1.vue
│ └──component4.vue
└──view3.vue
├──component5.vue
……

單元測試

能夠爲每一個組件編寫單元測試，放在 test/unit/specs 目錄下面, 單元測試用例的目錄結構建議和測試的文件保持一致（相對於src），每一個測試用例文件名以 .spec.js結尾。執行 npm run unit 時會遍歷全部的 spec.js 文件，產出測試報告在 test/unit/coverage 目錄。