Vue專案框架搭建（不定時更新）
阿新 • • 發佈：2020-10-21
目錄
建立專案
使用 vue-cli 快速搭建專案結構，關於vue-cli的更多用法，請閱讀官方說明 ！vue-cli官方文件
- 建立專案
vue create cloud-film-vue
- 安裝依賴
vscode中，在終端開啟資料夾，然後
npm install或yarn
npm install
或
vue add
或
yarn
- 啟動專案
yarn run dev
或
npm run dev
以上是開發環境下，若是生產環境，dev換成build
新增單元測試
更多jest用法，閱讀官方文件 ！jest官方
- 根目錄下（與src資料夾同級目錄）新建 test資料夾
- 安裝
jest
yarn add jest
或
npm install --save-dev jest
- 配置jest啟動方式
在package.json中的 “srcipts”：{} 中新增jest的啟動方法，如下：
"scripts": {
//其他指令
"test": "jest" //test指令
},
- 在test資料夾中新增測試檔案
hello.test.js
測試檔案必須以xxx.test.js的方式命名，.test.js的檔案，無論在專案中的什麼位置，都會被識別為測試檔案，並在執行測試單元測試的時候被執行。
編寫如下程式碼：
const returnHelloWorld = () => {
return 'hello world'
}
test('輸出hello world ', () => {
expect(returnHelloWorld()).toBe('hello world')
})
- 執行測試用例hello.test.js
yarn test
或
npm run test
執行全部測試用例。若要執行單個測試用例，則在 test後指定用例名即可,如：
yarn test hello.test.js 或 npm run test hello.test.js
- 執行結果
PS E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-vue> yarn test
yarn run v1.22.4
$ jest
PASS test/hello.test.js
√ 輸出hello world (2 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.001 s
Ran all test suites.
Done in 3.13s.
如上，顯示測試通過。
eslint程式碼檢測
- 安裝
npm install eslint --save-dev
- 初始化eslint檔案
./node_modules/.bin/eslint --init
不要懷疑，就是這個指令。
執行指令後，會讓你回答一系列問題，你根據自己的需求認真選擇選項，稍後會根據你的選擇生成對應的程式碼檢測規則。
選擇編碼風格時，選 standard,這是我們團隊的規範
- 執行檢測檔案，檢測程式碼格式
./node_modules/.bin/eslint yourfile.js
執行如上命令，會檢查你的程式碼，列出格式錯誤的地方。yourfile.js是你要檢測的檔案，如main.js ，就是檢測mian.js的程式碼格式問題。
檢測結果：
PS E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-vue> ./node_modules/.bin/eslint .eslintrc.json
E:\Project\CloudFilmVueVersion-Practice\cloudFilm-vue\cloud-film-vue\.eslintrc.json
1:1 error Expected an assignment or function call and instead saw an expression no-unused-expressions
2:1 error Expected indentation of 2 spaces but found 4 indent
2:5 error Unnecessarily quoted property 'env' found quote-props
2:5 error Strings must use singlequote quotes
3:1 error Expected indentation of 4 spaces but found 8 indent
3:9 error Unnecessarily quoted property 'browser' found quote-props
3:9 error Strings must use singlequote quotes
4:1 error Expected indentation of 4 spaces but found 8 indent
4:9 error Unnecessarily quoted property 'es6' found quote-props
4:9 error Strings must use singlequote quotes
5:1 error Expected indentation of 2 spaces but found 4 indent
6:1 error Expected indentation of 2 spaces but found 4 indent
6:5 error Unnecessarily quoted property 'extends' found quote-props
6:5 error Strings must use singlequote quotes
7:1 error Expected indentation of 4 spaces but found 8 indent
7:9 error Strings must use singlequote quotes
8:1 error Expected indentation of 4 spaces but found 8 indent
8:9 error Strings must use singlequote quotes
9:1 error Expected indentation of 2 spaces but found 4 indent
10:1 error Expected indentation of 2 spaces but found 4 indent
10:5 error Unnecessarily quoted property 'globals' found quote-props
10:5 error Strings must use singlequote quotes
11:1 error Expected indentation of 4 spaces but found 8 indent
11:9 error Unnecessarily quoted property 'Atomics' found quote-props
11:9 error Strings must use singlequote quotes
11:20 error Strings must use singlequote quotes
12:1 error Expected indentation of 4 spaces but found 8 indent
12:9 error Unnecessarily quoted property 'SharedArrayBuffer' found quote-props
12:9 error Strings must use singlequote quotes
12:30 error Strings must use singlequote quotes
13:1 error Expected indentation of 2 spaces but found 4 indent
14:1 error Expected indentation of 2 spaces but found 4 indent
14:5 error Unnecessarily quoted property 'parserOptions' found quote-props
14:5 error Strings must use singlequote quotes
15:1 error Expected indentation of 4 spaces but found 8 indent
15:9 error Unnecessarily quoted property 'ecmaVersion' found quote-props
15:9 error Strings must use singlequote quotes
16:1 error Expected indentation of 4 spaces but found 8 indent
16:9 error Unnecessarily quoted property 'parser' found quote-props
16:9 error Strings must use singlequote quotes
16:19 error Strings must use singlequote quotes
17:1 error Expected indentation of 4 spaces but found 8 indent
17:9 error Unnecessarily quoted property 'sourceType' found quote-props
17:9 error Strings must use singlequote quotes
17:23 error Strings must use singlequote quotes
18:1 error Expected indentation of 2 spaces but found 4 indent
19:1 error Expected indentation of 2 spaces but found 4 indent
19:5 error Unnecessarily quoted property 'plugins' found quote-props
19:5 error Strings must use singlequote quotes
20:1 error Expected indentation of 4 spaces but found 8 indent
20:9 error Strings must use singlequote quotes
21:1 error Expected indentation of 4 spaces but found 8 indent
21:9 error Strings must use singlequote quotes
22:1 error Expected indentation of 2 spaces but found 4 indent
23:1 error Expected indentation of 2 spaces but found 4 indent
23:5 error Unnecessarily quoted property 'rules' found quote-props
23:5 error Strings must use singlequote quotes
24:1 error Expected indentation of 2 spaces but found 4 indent
25:2 error Newline required at end of file but not found eol-last
✖ 59 problems (59 errors, 0 warnings)
58 errors and 0 warnings potentially fixable with the `--fix` option.
檢測結果：59個問題格式
在vue中如何關閉eslint的程式碼檢測
- 在專案根目錄下增加
vue.config.js,內容為：
// vue.config.js
module.exports = {
lintOnSave: false
}
新增UI庫Vux
UI庫可以使用Vux，還比較火，更多Vux相關，請檢視官方文件 ！Vux官方文件
- 安裝vux
npm install vux --save
或
yarn add vux //安裝
yarn upgrade vux // 更新
- 安裝和配置
vux-loader
vux2必須配合vux-loader使用，並配置build/webpack.base.conf.js //新版腳手架可能不用配這個
npm install vux-loader --save-dev
- 安裝
less-loader(用以正確編譯less原始碼)
npm install less less-loader --save-dev
- 安裝
yaml-loader以進行語言檔案讀取
npm install yaml-loader --save-dev
- 使用
以下是從官方文件中copy的一段程式碼，展示效果如下圖：
<template>
<div>
<v-chart :data="data" prevent-default>
<v-scale x :tick-count="3" />
<v-tooltip :show-item-marker="false" show-x-value />
<v-line />
</v-chart>
</div>
</template>
<script>
import { VChart, VTooltip, VLine, VScale } from 'vux'
export default {
components: {
VChart,
VTooltip,
VLine,
VScale
},
data () {
return {
data: [
{ date: '2017-06-05', value: 116 },
{ date: '2017-06-06', value: 129 },
{ date: '2017-06-07', value: 135 },
{ date: '2017-06-08', value: 86 },
{ date: '2017-06-09', value: 73 },
{ date: '2017-06-10', value: 85 },
{ date: '2017-06-11', value: 73 },
{ date: '2017-06-12', value: 68 },
{ date: '2017-06-13', value: 92 },
{ date: '2017-06-14', value: 130 },
{ date: '2017-06-15', value: 245 },
{ date: '2017-06-16', value: 139 },
{ date: '2017-06-17', value: 115 },
{ date: '2017-06-18', value: 111 },
{ date: '2017-06-19', value: 309 },
{ date: '2017-06-20', value: 206 },
{ date: '2017-06-21', value: 137 },
{ date: '2017-06-22', value: 128 },
{ date: '2017-06-23', value: 85 },
{ date: '2017-06-24', value: 94 },
{ date: '2017-06-25', value: 71 },
{ date: '2017-06-26', value: 106 },
{ date: '2017-06-27', value: 84 },
{ date: '2017-06-28', value: 93 },
{ date: '2017-06-29', value: 85 },
{ date: '2017-06-30', value: 73 },
{ date: '2017-07-01', value: 83 },
{ date: '2017-07-02', value: 125 },
{ date: '2017-07-03', value: 107 },
{ date: '2017-07-04', value: 82 },
{ date: '2017-07-05', value: 44 },
{ date: '2017-07-06', value: 72 },
{ date: '2017-07-07', value: 106 },
{ date: '2017-07-08', value: 107 },
{ date: '2017-07-09', value: 66 },
{ date: '2017-07-10', value: 91 },
{ date: '2017-07-11', value: 92 },
{ date: '2017-07-12', value: 113 },
{ date: '2017-07-13', value: 107 },
{ date: '2017-07-14', value: 131 },
{ date: '2017-07-15', value: 111 },
{ date: '2017-07-16', value: 64 },
{ date: '2017-07-17', value: 69 },
{ date: '2017-07-18', value: 88 },
{ date: '2017-07-19', value: 77 },
{ date: '2017-07-20', value: 83 },
{ date: '2017-07-21', value: 111 },
{ date: '2017-07-22', value: 57 },
{ date: '2017-07-23', value: 55 },
{ date: '2017-07-24', value: 60 }
]
}
}
}
</script>
路由 Vue Router
Vue路由使用 Vue router,具體使用方法詳情，參見 Vue Router中文文件
- 安裝
npm install vue-router
- 使用
具體使用見官方文件，內容較多，暫不記錄
需要顯式的通過Vue.use()來安裝VueRouter:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
狀態管理 Vuex
Vue使用Vuex進行狀態管理，其核心思想同redux型別，詳情參見 Vuex中文文件
- 安裝
npm install vuex --save
或
yarn add vuex
- 使用
需要顯式的通過Vue.use()來安裝Vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
- 在專案中使用
第一步：在src下新建資料夾 store,在資料夾下新建4個檔案
+ index.js
+ state.js
+ action.js
+ motation.js
第二步：在 state.js action.js motation.js中分別編寫對應的程式碼：
state.js
const state = {
name: 'cherish',
age: 26,
sex: 'male',
birthday: '1994-10-22'
}
export default state
action.js
export default {
// 這裡寫對應的程式碼 或參照 state.js的寫法也可
}
motation.js
export default {
// 這裡寫對應的程式碼 或參照 state.js的寫法也可
}
第三步：在 index.js中引入以上三個檔案，引入Vuex,建立store
import mutation from './mutation'
import action from './action'
import state from './state'
import Vuex from 'vuex'
// Vuex 狀態管理的完整使用模式
Vue.use(Vuex)
const store = new Vuex.Store({
state,
mutation,
action
})
export default store
第四步：在元件中提交 motation 或 action
在元件中使用
this.$store.commit('xxx')提交 mutation，或者使用mapMutations輔助函式將元件中的 methods 對映為store.commit呼叫（需要在根節點注入store）
// 提交motation
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 對映為 `this.$store.commit('increment')`
// `mapMutations` 也支援載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 對映為 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 將 `this.add()` 對映為 `this.$store.commit('increment')`
})
}
}
// 提交action
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 將 `this.increment()` 對映為 `this.$store.dispatch('increment')`
// `mapActions` 也支援載荷：
'incrementBy' // 將 `this.incrementBy(amount)` 對映為 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 將 `this.add()` 對映為 `this.$store.dispatch('increment')`
})
}
}
第五步：對於比較複雜的專案，可以將store模組化，最後在一個總的index.js組合起來
具體實現參見Vuex核心概念——Modules
這有點類似於 React 中的 dva.js 也有名稱空間等概念