[vue] 從0到1自己構架一個vue項目，說說有哪些步驟、哪些重要插件、目錄結構你會怎么組織

1 項目類型

前端的項目目前來看主要分為小程序開發(fā)，H5頁面開發(fā)、PC官網(wǎng)、后臺管理系統(tǒng)開發(fā)、Native開發(fā)。不同的項目所涉及的知識點和環(huán)境不太一樣，但是很多方面是相通的。

1.1小程序

由于框架限定在Vue，所以這里指的是使用mpvue、WePY來開發(fā)小程序項目。

1.2H5頁面

這里主要是指微信頁面、Webview中的H5頁面開發(fā)

1.3 PC官網(wǎng)

為什么單獨劃出來是因為官方的開發(fā)主要是用來展示企業(yè)信息、產(chǎn)品，對交互、體驗有一定的要求，會有一些炫酷的動畫效果。還有就是官網(wǎng)有可能需要采用SSR（比如Vue的Nuxt.js）來做，來確定良好的SEO。

1.4后臺管理系統(tǒng)

后臺管理系統(tǒng)主要功能在于數(shù)據(jù)的配置、權限的控制、數(shù)據(jù)報表的展示、日志功能等。通常又叫CMS，OA。

1.5 Native開發(fā)

這個通常就是指用前端技術去開PC應用、APP應用，比如Weex, Electron。

1.6 通吃型

比如uni-app， 可以一套代碼編譯成不同的平臺源碼。

不同的項目類型決定了其能夠使用的生態(tài)、目錄結構、特定的上下文。這里就以后臺管理系統(tǒng)為例來說一下如何基于Vue來搭建一個項目。
注: 我只會玩這個，湊合閱讀吧
基于@vue/cli的選型
后臺管理系統(tǒng)中vue-router，vuex都是必選的，其它可以自行考慮。
ES6/7 or Typescript ?
鑒于目前Typescript如此流行，很多流行的框架和庫都采用其來寫，IDE友好的智能提示、強類型結束等，在立項時是否考慮采用Typescript來寫Vue項目。如果采用Typescript，是不是很羨慕Angular中的DI注入，那可以考慮在大型項目中引入inversify這個庫；在開發(fā)過程中遇到一些庫沒有聲明文件要學會定義聲明文件，這個是Typescript初學者最頭疼的問題。

還有一個問題是團隊中有多少人會Typescript，項目周期緊不緊，有沒有時間來試錯，踩坑。Sass/Less/Stylus/PostCss ? 由于Vue項目開發(fā)本身樣式自帶scope，所以不需要像React那樣去選css-in-js框架（目前在React最流行的是styled-components），但是如果我們在Vue中采用JSX的方式來定義組件，是否考慮引入vue-styled-components這個庫（年久失修，完全脫節(jié)React版了，但依然是Vue中最好的選擇）。在Vue中sass, less, stylus可以在<style>標簽中通過lang=""來指定，如果你想使用PostCss也可以的，就是要自己花點時間去折騰一下。 關于代碼規(guī)范和風格 這個主要的選擇就是Prettier 和 Airbnb風格，如果配置不好，在IDE中滿屏的紅色波浪線和黃色的小燈光提示。在配置eslint或者tslint時主要考慮的點是是否要寫分號，未定義變量等問題。關于測試很多時間前端項目測試反而拖慢了項目的開發(fā)進度，但是在開源項目中良好的測試是保證項目質(zhì)量的一個很重要方式。這里通常分為單元測試(Unit Testing)和端到端測試(E2E Testing)，更多信息我也沒有什么經(jīng)驗，自行百度、Google。

通過 @vue/cli 生成項目后，接下來就是添加一些配置文件

通用配置

一個前端項目在開發(fā)過程中少不了各種框架、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,
// 不能有聲明后未被使用的變量或參數(shù)
“no-unused-vars”:[2, {
“vars”: “l(fā)ocal”,
“args”: “none”
}],
// 禁止修改const聲明的變量
“no-const-assign”: 2,
// 函數(shù)參數(shù)不能重復
“no-dupe-args”: 2,
// 如果if語句里面有return,后面不能跟else語句
“no-else-return”: 2,
// 塊語句中的內(nèi)容不能為空
“no-empty”: 2,
// 禁止對null使用==或!=運算符
“no-eq-null”: 2,
// 禁止擴展native對象
“no-extend-native”: 2,
// 禁止不必要的函數(shù)綁定
“no-extra-bind”: 2,
// 禁止非必要的括號
“no-extra-parens”: 2,
// 禁止多余的冒號
“no-extra-semi”:2,
// 禁止省略浮點數(shù)中的0 .5 3.
“no-floating-decimal”: 2,
// 禁止行內(nèi)備注
“no-inline-comments”: 0,
// 不能有不規(guī)則的空格
“no-irregular-whitespace”: 2,
// 不能用多余的空格
“no-multi-spaces”: 1,
// 禁止重復聲明變量
“no-redeclare”: 2,
// 禁止使用javascript:void(0)
“no-script-url”: 0,
// 禁止稀疏數(shù)組， [0,2]
“no-sparse-arrays”: 2,
// 禁止使用三目運算符
“no-ternary”: 0,
// 一行結束后面不要有空格
“no-trailing-spaces”: 1,
// 標識符不能以_開頭或結尾
“no-underscore-dangle”: 1,
// 是否允許非空數(shù)組里面有多余的空格
“array-bracket-spacing”: [2, “never”],
// 箭頭函數(shù)用小括號括起來
“arrow-parens”: 0,
// =>的前/后括號
“arrow-spacing”: 0,
// 塊語句中使用var
“block-scoped-var”: 0,
// 逗號風格，換行時在行首還是行尾
“comma-style”: [2, “l(fā)ast”],
// 避免不必要的方括號
“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”],
// 單個組件無內(nèi)容自結尾
“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”
}],
// 屬性每行數(shù)量
“vue/max-attributes-per-line”: [“error”, {
// 一行最多3個屬性
“singleline”: 3,
“multiline”: {
“max”: 1,
“allowFirstLine”: true
}
}],
// 單行html元素內(nèi)容是否換行
“vue/singleline-html-element-content-newline”: [“error”, {
“ignoreWhenNoAttributes”: true,
“ignoreWhenEmpty”: true,
“ignores”: [
“pre”,
“textarea”,
“span”,
“i”,
“l(fā)abel”,
“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

這個文件自動生成，里面的內(nèi)容就是指定autoprefixer兼容配置

Babel配置: babel.config.js

主要是配置Babel的plugins、presets和parse等

StyleLint：.stylelintrc

如果代碼對樣式有一定的規(guī)范的話，可以加一個，沒有就不需要配置這個。

{
“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的代碼調(diào)試以及eslint配置。
版本控制

不管是多人協(xié)作開發(fā)還個一個人開發(fā)在使用git時都需要一套流程規(guī)范來執(zhí)行。

Git Flow

這個每個團隊的做法不太一樣，有的采用多分支開發(fā)，有的采用單一master分支開發(fā)，有的還采用submodule的方式，有的在項目中使用了lerna來做多packages，甚至有的公司一個分支一個項目。

在開發(fā)環(huán)境的區(qū)分上通常分為生產(chǎn)（線上）環(huán)境、預發(fā)布環(huán)境、開發(fā)環(huán)境，有的還有什么沙盒環(huán)境，很多做得好的公司基于Docker前后端都可以根據(jù)每一個commit來發(fā)布。

有時候不想把有些代碼提交上去，除了選擇性提交單個文件外，還有使用git的stash功能，此外如果使用Webstorm可還可以使用其提供的Changelist來緩存修改，切換分支。

Git Commit

項目提交的描述如果沒有一定的規(guī)范，隨性而為的話，就會讓其它人誤解。通常提交采用英文作為描述，可以多行文字。在社區(qū)中有很多流行的方案(比如Conventional Commit)，更多的是采用Angular的方式。

Change Log

如果采用了社區(qū)統(tǒng)一的commit方式，那么我們就可以基于提交來生成變更記錄，在每一次版本發(fā)布時自動關聯(lián)Jira中的Issue。

版本號生成

這個通常是按照Semantic Versioning的規(guī)范來打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”,
“l(fā)int”: “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”,
“l(fā)int-staged”: “^9.2.3”,
“stylelint”: “^10.1.0”,
“stylelint-config-standard”: “^18.3.0”,
“stylelint-scss”: “^3.9.4”,
},
“gitHooks”: {
“pre-commit”: “l(fā)int-staged”
},
“l(fā)int-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。
持續(xù)集成和部署

目前開源項目通常采用Travis，而一般公司內(nèi)部項目通常采用Jenkins來做持續(xù)集成，在部署上通常采用Docker，集群上使用KubeOperator來管理。

4 API請求方式

通常采用Restfull的方式來請求數(shù)據(jù)，也可以采用GraphQL的方式來請求。如果采用Restfull的方式通常可以使用axios, fetch api。GraphQL可以使用Apollo Client。
代理和數(shù)據(jù)Mock

SPA頁面開發(fā)通常都是配置代碼來調(diào)用后端的接口數(shù)據(jù)，怎么配置可以參考@vue/cli文檔。數(shù)據(jù)Mock主要用到一個mockjs，至于怎么起服務自行搜索。
項目用到的庫

下面這些庫可以在所有項目中使用

UI框架: Element, iView, vue-strap等注：UI風格目前有Bookstrap、Antd和Google Materials三種風格，在項目搭建時這也是一個很重要的技術選型。日期: moment, dayjsURL解析: query-string, path-to-reqexp實用方法: lodashCookie: js-cookie混淆ID: hashids圖表: echartsAjax: axios, isomorphic-fetch, vue-apollo拖拽: Vue.DraggableMeta修改: vue-meta注：這些只是我能想到的

5項目目錄劃分

視圖頁面放在 pags或者views中 靜態(tài)文件放在static中 資源文件放在assets中 樣式文件放在styles中 輔助庫放在utils中 配置文件可以放在config或者constants中 vuex的文件放在stores中，至于getters, actions, mutation, modules可以參考vuex的文檔 路由文件放在routes中 所有組件放在components中 共享代碼也可以使用shared作為目錄 布局組件可以放在layouts目錄中

權限配置

主要分為頁面權限（路由）、功能權限，采用多級角色劃分方式。菜單配置數(shù)據(jù)直接通過接口返回

6開發(fā)

接著建好專案後，通常會依照需求裝入以下插件：

svg-loader - 將 svg 作為組件使用 axios dayjs - 以往常用的 moment.js 除了既有舊專案外，構建團隊今年中建議改採其他更為輕量的 library bootstrap-vue 看設計稿，如果是需要手刻的就偏向引入頁面結構組件如 b-row

專案目錄大致如下，將剛剛預先規(guī)劃的 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

頁面路由及組件樣式切分完成，接著便可以開始開發(fā)功能以及串接資料。

7個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[vue] 从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。