[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個人簡介
我是歌謠，歡迎和大家一起交流前后端知識，放棄很容易，
但堅持一定很酷，
主目錄
與歌謠一起通關前端面試題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/243862.html
標籤：其他
上一篇：用js寫的旋轉木馬，在新年的第一天，獻給各位剛登基的皇帝，讓你的后宮轉起來！
下一篇：node處理圖片問題 ！！！