[vue] 從0到1自己構架一個vue項目，說說有哪些步驟、哪些重要插件、目錄結構你會怎麼組織
1 項目類型
前端的項目目前來看主要分爲小程序開發，H5頁面開發、PC官網、後臺管理系統開發、Native開發。不同的項目所涉及的知識點和環境不太一樣，但是很多方面是相通的。
1.1小程序
由於框架限定在Vue，所以這裏指的是使用mpvue、WePY來開發小程序項目。
1.2H5頁面
這裏主要是指微信頁面、Webview中的H5頁面開發
1.3 PC官網
爲什麼單獨劃出來是因爲官方的開發主要是用來展示企業信息、產品，對交互、體驗有一定的要求，會有一些炫酷的動畫效果。還有就是官網有可能需要採用SSR（比如Vue的Nuxt.js）來做，來確定良好的SEO。
1.4後臺管理系統
後臺管理系統主要功能在於數據的配置、權限的控制、數據報表的展示、日誌功能等。通常又叫CMS，OA。
1.5 Native開發
這個通常就是指用前端技術去開PC應用、APP應用，比如Weex, Electron。
1.6 通喫型
比如uni-app， 可以一套代碼編譯成不同的平臺源碼。
不同的項目類型決定了其能夠使用的生態、目錄結構、特定的上下文。這裏就以後臺管理系統爲例來說一下如何基於Vue來搭建一個項目。
注: 我只會玩這個，湊合閱讀吧
基於@vue/cli的選型
後臺管理系統中vue-router，vuex都是必選的，其它可以自行考慮。
ES6/7 or Typescript ?
鑑於目前Typescript如此流行，很多流行的框架和庫都採用其來寫，IDE友好的智能提示、強類型結束等，在立項時是否考慮採用Typescript來寫Vue項目。如果採用Typescript，是不是很羨慕Angular中的DI注入，那可以考慮在大型項目中引入inversify這個庫；在開發過程中遇到一些庫沒有聲明文件要學會定義聲明文件，這個是Typescript初學者最頭疼的問題。
還有一個問題是團隊中有多少人會Typescript，項目週期緊不緊，有沒有時間來試錯，踩坑。
Sass/Less/Stylus/PostCss ?
由於Vue項目開發本身樣式自帶scope，所以不需要像React那樣去選css-in-js框架（目前在React最流行的是styled-components），但是如果我們在Vue中採用JSX的方式來定義組件，是否考慮引入vue-styled-components這個庫（年久失修，完全脫節React版了，但依然是Vue中最好的選擇）。在Vue中sass, less, stylus可以在<style>標籤中通過lang=""來指定，如果你想使用PostCss也可以的，就是要自己花點時間去折騰一下。
關於代碼規範和風格
這個主要的選擇就是Prettier 和 Airbnb風格，如果配置不好，在IDE中滿屏的紅色波浪線和黃色的小燈光提示。
在配置eslint或者tslint時主要考慮的點是是否要寫分號，未定義變量等問題。
關於測試
很多時間前端項目測試反而拖慢了項目的開發進度，但是在開源項目中良好的測試是保證項目質量的一個很重要方式。這裏通常分爲單元測試(Unit Testing)和端到端測試(E2E Testing)，更多信息我也沒有什麼經驗，自行百度、Google。
通過 @vue/cli 生成項目後，接下來就是添加一些配置文件
通用配置
一個前端項目在開發過程中少不了各種框架、IDE的配置文件。前端項目的配置文件通常格式有xx.json、.xxrc、xx.config.js、xxconfig等方式。
2編輯器配置：.editorconfig
這裏最重要的是縮進方式，及Tab大小，建議2個空格作用縮進。
https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
Git忽略文件配置: .gitignore
這裏的配置決定了哪些文件會被版本控制所忽略
See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2.1dependencies
/node_modules
/.pnp
.pnp.js
2.2testing
/coverage
2.3production
/build
2.4 misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
3 editor
/.idea
Eslint配置: .eslintrc.js，.eslintignore等
說實話eslint要是配置不好，代碼在IDE中提示真的很噁心，但是配置項又太多，還有很多專有的擴展，這裏給出我的一個配置（也是到處copy過來的）
module.exports = {
root: true,
env: {
node: true
},
extends: [“plugin:vue/strongly-recommended”],
rules: {
“no-console”: process.env.NODE_ENV === “production” ? “error” : “off”,
“no-debugger”: process.env.NODE_ENV === “production” ? “error” : “off”,
// 不加分號
“semi”: [0],
// 不能有未定義的變量
“no-undef”: 1,
// 不能有聲明後未被使用的變量或參數
“no-unused-vars”:[2, {
“vars”: “local”,
“args”: “none”
}],
// 禁止修改const聲明的變量
“no-const-assign”: 2,
// 函數參數不能重複
“no-dupe-args”: 2,
// 如果if語句裏面有return,後面不能跟else語句
“no-else-return”: 2,
// 塊語句中的內容不能爲空
“no-empty”: 2,
// 禁止對null使用==或!=運算符
“no-eq-null”: 2,
// 禁止擴展native對象
“no-extend-native”: 2,
// 禁止不必要的函數綁定
“no-extra-bind”: 2,
// 禁止非必要的括號
“no-extra-parens”: 2,
// 禁止多餘的冒號
“no-extra-semi”:2,
// 禁止省略浮點數中的0 .5 3.
“no-floating-decimal”: 2,
// 禁止行內備註
“no-inline-comments”: 0,
// 不能有不規則的空格
“no-irregular-whitespace”: 2,
// 不能用多餘的空格
“no-multi-spaces”: 1,
// 禁止重複聲明變量
“no-redeclare”: 2,
// 禁止使用javascript:void(0)
“no-script-url”: 0,
// 禁止稀疏數組， [0,2]
“no-sparse-arrays”: 2,
// 禁止使用三目運算符
“no-ternary”: 0,
// 一行結束後面不要有空格
“no-trailing-spaces”: 1,
// 標識符不能以_開頭或結尾
“no-underscore-dangle”: 1,
// 是否允許非空數組裏面有多餘的空格
“array-bracket-spacing”: [2, “never”],
// 箭頭函數用小括號括起來
“arrow-parens”: 0,
// =>的前/後括號
“arrow-spacing”: 0,
// 塊語句中使用var
“block-scoped-var”: 0,
// 逗號風格，換行時在行首還是行尾
“comma-style”: [2, “last”],
// 避免不必要的方括號
“dot-notation”: [0, { “allowKeywords”: true }],
// 必須使用全等
“eqeqeq”: 2,
// 對象字面量中冒號的前後空格
“key-spacing”: [0, {
“beforeColon”: false,
“afterColon”: true
}],
// 變量聲明後是否需要空一行
“newline-after-var”: 0,
// 引號類型 `` “” ‘’
“quotes”: [1, “single”],
// 變量聲明時排序
“sort-vars”: 0,
// 禁止比較時使用NaN，只能用isNaN()
“use-isnan”: 2,
//jsx中使用單引號
“jsx-quotes”: [“error”, “prefer-single”],
// 單個組件無內容自結尾
“vue/html-self-closing”: [“error”, {
“html”: {
“void”: “always”,
“normal”: “always”,
“component”: “always”
},
“svg”: “always”,
“math”: “always”
}],
// 設置html縮進
“vue/html-indent”: [“error”, 2, {
“attribute”: 2,
“baseIndent”: 1,
“closeBracket”: 0,
“alignAttributesVertically”: false,
“ignores”: []
}],
// 屬性順序
“vue/attributes-order”: 1,
// 註釋前面需要添加空格
“spaced-comment”: [“error”, “always”, { “exceptions”: ["-", “+”] }],
// html屬性賦值等號左右不能有空格
“vue/no-spaces-around-equal-signs-in-attribute”: [“error”],
// 強制prop以駝峯命名
“vue/prop-name-casing”: [“error”, “camelCase”],
// 移除多餘不使用的空格
“vue/no-multi-spaces”: [“error”, {
“ignoreProperties”: false
}],
// html結尾 >
“vue/html-closing-bracket-newline”: [“error”, {
“singleline”: “never”,
“multiline”: “never”
}],
// 屬性每行數量
“vue/max-attributes-per-line”: [“error”, {
// 一行最多3個屬性
“singleline”: 3,
“multiline”: {
“max”: 1,
“allowFirstLine”: true
}
}],
// 單行html元素內容是否換行
“vue/singleline-html-element-content-newline”: [“error”, {
“ignoreWhenNoAttributes”: true,
“ignoreWhenEmpty”: true,
“ignores”: [
“pre”,
“textarea”,
“span”,
“i”,
“label”,
“el-button”,
“el-radio”,
“el-checkbox”,
“el-link”,
“el-tab-pane”,
“el-dropdown-item”,
“el-step”,
“el-table-column”,
“el-option”
]
}]
},
parserOptions: {
parser: “babel-eslint”
}
};
PostCss配置: postcss.config.js
這個文件自動生成，裏面的內容就是指定autoprefixer兼容配置
Babel配置: babel.config.js
主要是配置Babel的plugins、presets和parse等
StyleLint：.stylelintrc
如果代碼對樣式有一定的規範的話，可以加一個，沒有就不需要配置這個。
{
“extends”: “stylelint-config-standard”,
“plugins”: [“stylelint-scss”]
}
@vue/cli配置：vue.config.js
在這個裏面我們可以對@vue/cli的Webpack進行配置和覆蓋。
module.exports = {
devServer: {
proxy: {
‘/kpi’: {
target: process.env.VUE_APP_KPI_API,
changeOrigin: true
}
}
}
}
Webpack配置：webpack.config.js
因爲在webpack中不能識別@vue/cli中的@路徑，所以需要一個配置文件讓webapck提示正常。具體怎麼配置可以自行搜索。
‘use strict’
const path = require(‘path’)
function resolve (dir) {
return path.join(__dirname, ‘.’, dir)
}
module.exports = {
context: path.resolve(__dirname, ‘./’),
resolve: {
extensions: [’.js’, ‘.vue’, ‘.json’],
alias: {
‘@’: resolve(‘src’),
‘_c’: resolve(‘src/components’)
}
}
}
Visual Studio Code配置：.vscode目錄
這裏主要是配置基於vscode的代碼調試以及eslint配置。
版本控制
不管是多人協作開發還個一個人開發在使用git時都需要一套流程規範來執行。
Git Flow
這個每個團隊的做法不太一樣，有的採用多分支開發，有的採用單一master分支開發，有的還採用submodule的方式，有的在項目中使用了lerna來做多packages，甚至有的公司一個分支一個項目。
在開發環境的區分上通常分爲生產（線上）環境、預發佈環境、開發環境，有的還有什麼沙盒環境，很多做得好的公司基於Docker前後端都可以根據每一個commit來發布。
有時候不想把有些代碼提交上去，除了選擇性提交單個文件外，還有使用git的stash功能，此外如果使用Webstorm可還可以使用其提供的Changelist來緩存修改，切換分支。
Git Commit
項目提交的描述如果沒有一定的規範，隨性而爲的話，就會讓其它人誤解。通常提交採用英文作爲描述，可以多行文字。在社區中有很多流行的方案(比如Conventional Commit)，更多的是採用Angular的方式。
Change Log
如果採用了社區統一的commit方式，那麼我們就可以基於提交來生成變更記錄，在每一次版本發佈時自動關聯Jira中的Issue。
版本號生成
這個通常是按照Semantic Versioning的規範來打tag，具休怎麼做可以自行嘗試
在項目中通常使用gitHooks和husky這二個node包來配置上面提到的這些。在git鉤子中我們在每次提交、push前跑一次單元測試、代碼覆蓋率。前端代碼覆蓋率一般來說沒有必要加，不然很痛苦。
下面是package.json文件中相關的配置示例（試驗性代碼）
{
“name”: “your-project-name”,
“version”: “0.1.0”,
“scripts”: {
“clean”: “rm -rf node_modules”,
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint --no-fix”,
“stylelint”: “stylelint src/**/.{scss,css,less,css,vue,jsx} --fix",
“eslint”: “eslint --ext .js,.jsx,.vue src --fix”,
“changelog”: “conventional-changelog -p angular -i CHANGELOG.md -s -r 0”
},
“repository”: {
“type”: “git”,
“url”: “http://gitlab.transsion.com/mi/mi-bigdata-admin.git”
},
“dependencies”: {},
“devDependencies”: {
“@commitlint/cli”: “^8.1.0”,
“@commitlint/config-conventional”: “^8.1.0”,
“babel-eslint”: “^10.0.1”,
“conventional-changelog-cli”: “^2.0.23”,
“eslint”: “^6.2.1”,
“eslint-plugin-vue”: “^5.2.3”,
“husky”: “^3.0.4”,
“lint-staged”: “^9.2.3”,
“stylelint”: “^10.1.0”,
“stylelint-config-standard”: “^18.3.0”,
“stylelint-scss”: “^3.9.4”,
},
“gitHooks”: {
“pre-commit”: “lint-staged”
},
“lint-staged”: {
"
.{js,vue}”: [
“vue-cli-service lint”,
“eslint --fix --ext .js,.vue src”,
“git add”
],
“*.{css,scss,less,vue}”: [
“stylelint --fix”,
“git add”
]
},
“husky”: {
“hooks”: {
“commit-msg”: “commitlint -E HUSKY_GIT_PARAMS”
}
}
}
項目文檔和組件測試文檔
除了在項目根目錄放一個README.MD文件外，通常還需要一些比如CHANGELOG.md, PLAD.md等文檔，還有一些組件的使用文檔，可以考慮使用styleguide和storybook。
持續集成和部署
目前開源項目通常採用Travis，而一般公司內部項目通常採用Jenkins來做持續集成，在部署上通常採用Docker，集羣上使用KubeOperator來管理。
4 API請求方式
通常採用Restfull的方式來請求數據，也可以採用GraphQL的方式來請求。如果採用Restfull的方式通常可以使用axios, fetch api。GraphQL可以使用Apollo Client。
代理和數據Mock
SPA頁面開發通常都是配置代碼來調用後端的接口數據，怎麼配置可以參考@vue/cli文檔。數據Mock主要用到一個mockjs，至於怎麼起服務自行搜索。
項目用到的庫
下面這些庫可以在所有項目中使用
UI框架: Element, iView, vue-strap等
注：UI風格目前有Bookstrap、Antd和Google Materials三種風格，在項目搭建時這也是一個很重要的技術選型。
日期: moment, dayjs
URL解析: query-string, path-to-reqexp
實用方法: lodash
Cookie: js-cookie
混淆ID: hashids
圖表: echarts
Ajax: axios, isomorphic-fetch, vue-apollo
拖拽: Vue.Draggable
Meta修改: vue-meta
注：這些只是我能想到的
5項目目錄劃分
視圖頁面放在 pags或者views中
靜態文件放在static中
資源文件放在assets中
樣式文件放在styles中
輔助庫放在utils中
配置文件可以放在config或者constants中
vuex的文件放在stores中，至於getters, actions, mutation, modules可以參考vuex的文檔
路由文件放在routes中
所有組件放在components中
共享代碼也可以使用shared作爲目錄
佈局組件可以放在layouts目錄中
權限配置
主要分爲頁面權限（路由）、功能權限，採用多級角色劃分方式。菜單配置數據直接通過接口返回
6開發
接著建好專案後，通常會依照需求裝入以下插件：
svg-loader - 將 svg 作為組件使用
axios
dayjs - 以往常用的 moment.js 除了既有舊專案外，構建團隊今年中建議改採其他更為輕量的 library
bootstrap-vue 看設計稿，如果是需要手刻的就偏向引入頁面結構組件如 b-row
專案目錄大致如下，將剛剛預先規劃的 component、views 先建立好，接著便可以開始切分組件 css：
src
├── App.vue
├── assets
│ ├── img
│ │ ├── access_time-24px.svg
│ │ ├── accessibility_new-24px.svg
│ │ ├── add_circle_outline-24px.svg
│ │ ├── alarm.svg
│ │ ├── apps-24px.svg
│ └── scss
│ ├── abstracts
│ ├── base
│ ├── main.scss
│ └── plugin
├── components
│ ├── Base
│ │ ├── BaseCard.vue
│ │ ├── BaseCol.vue
│ │ ├── BaseLoadCard.vue
│ │ ├── BaseRow.vue
│ │ └── FlexSystem.md
│ ├── Home
│ │ ├── HomeChart.js
│ │ ├── HomeItem.vue
│ │ ├── HomeNavbar.vue
│ │ ├── HomeSideBar.vue
│ │ └── HomeSortbar.vue
│ └── Information
│ └── InformationChart.js
├── main.js
├── router
│ └── index.js
├── service
│ ├── api.js
│ └── dayFormate.js
├── store
│ └── index.js
└── views
├── Home.vue
└── Information.vue
頁面路由及組件樣式切分完成，接著便可以開始開發功能以及串接資料。
7個人簡介
我是歌謠，歡迎和大家一起交流前後端知識。放棄很容易，
但堅持一定很酷。