源于目前 vite 搭建的項(xiàng)目沒有vue-router汛蝙、vuex省咨、單元測(cè)試以及測(cè)試環(huán)境腮敌，自己搭建一個(gè)開箱即用的集成項(xiàng)目
集成項(xiàng)目必備的基建
- ts
- vuex
- vue-router
- e2e
- cypress
- test unit
- jest + vtu
- eslint + prettier
- verify git commit message
- CI
- alias
- server
步驟
配置vite
安裝
yarn create @vitejs/app my-vue-app --template vue-ts
配置
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
base:"./", // 打包路徑
resolve: {
alias:{
'@': path.resolve(__dirname, './src') // 設(shè)置別名
}
},
server: {
port:4000,// 啟動(dòng)端口
open: true,
proxy: {
// 選項(xiàng)寫法
'/api': 'http://123.56.85.24:5000'// 代理網(wǎng)址
},
cors:true
}
})
配置路由
yarn add vue-router@4 --save
在src下新建router目錄竖瘾，新建index.ts文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
meta: {
title: "首頁",
keepAlive: true
},
component: () => import("../views/Home/index.vue"),
},
{
path: "/about",
name: "About",
meta: {
title: "關(guān)于",
keepAlive: true
},
component: () => import("../views/About/index.vue"),
},
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
在main.ts掛載路由
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
createApp(App)
.use(router)
.mount('#app')
配置數(shù)據(jù)中心vuex（4.x）
安裝
yarn add vuex@next --save
配置
在src下創(chuàng)建store目錄，并在store下創(chuàng)建index.ts
import { createStore } from "vuex";
export default createStore({
state: {
listData:{1:10},
num:10
},
mutations: {
setData(state,value){
state.listData=value
},
addNum(state){
state.num=state.num+10
}
},
actions: {
setData(context,value){
context.commit('setData',value)
},
},
modules: {}
});
掛載
在main.ts掛載數(shù)據(jù)中心
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from "./store";
createApp(App)
.use(router)
.use(store)
.mount('#app')
對(duì) sass的支持
不需要引入 sass 與webpack 相關(guān)的依賴包和loader
yarn add -D sass
配置cssnext處理瀏覽器兼容差異問題
安裝cssnext
yarn add postcss-cssnext -S
配置postcss-cssnext
module.exports = {
plugins: {
"postcss-cssnext": {
browsers: [
"Android >= 4.0",
"iOS >= 7",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions"
]
}
}
};
移動(dòng)端適配
采用的移動(dòng)端適配方式是將px轉(zhuǎn)rem组底，大家第一時(shí)間想到的就是使用postcss-pxtorem
安裝
yarn add postcss-pxtorem -D
配置
之前已經(jīng)配置過postcss-cssnext了丈积，而postcss-pxtorem同樣也只是postcss的一個(gè)插件，所以可以公用一個(gè)配置文件
module.exports = {
plugins: {
"postcss-cssnext": {
browsers: [
"Android >= 4.0",
"iOS >= 7",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions"
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
exclude: /node_modules/i
}
}
};
這里不再需要配置autoprefixer债鸡，因?yàn)閜ostcss-cssnext中已經(jīng)集成了autoprefixer
安裝eslint&prettier
安裝eslint江滨、prettier
yarn add -D eslint eslint-plugin-prettier
對(duì)vue進(jìn)行代碼美化
yarn add -D eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript
對(duì)ts進(jìn)行代碼美化
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
配置 prettier
在根目錄創(chuàng)建.prettierrc.json
{
"semi": false, // 結(jié)尾不加分號(hào)
"tabWidth": 2, //指定每個(gè)縮進(jìn)級(jí)別的空格數(shù)
"arrowParens": "avoid",
"singleQuote": true, // 使用單引號(hào)
"trailingComma": "all" //將>多行JSX元素放在最后一行的末尾
}
我們使用尤雨溪的配置，句尾不帶分號(hào) + 單引號(hào)娘锁。
- 尤雨溪配置：vue-next/.prettierrc
- 更多配置：官方配置文檔
集成基于jest&vtu的單元測(cè)試
安裝單元測(cè)試模塊 jest
yarn add jest --dev
安裝 jest 自動(dòng)代碼提示
yarn add @types/jest --dev
運(yùn)行jest腳本時(shí)牙寞，es6的語法是跑不通的，需要使用babel
生成基礎(chǔ)配置文件
Jest 將根據(jù)你的項(xiàng)目提出一系列問題莫秆，并且將創(chuàng)建一個(gè)基礎(chǔ)配置文件间雀。文件中的每一項(xiàng)都配有簡(jiǎn)短的說明：
jest --init
此時(shí)會(huì)生成一個(gè)文件jest.config.js,并添加如下
module.exports = {
transform: {
'^.+\\.jsx?$': 'babel-jest', // Adding this line solved the issue
}
}
使用 Babel
要使用 Babel，請(qǐng)通過 yarn 來安裝所需的依賴項(xiàng)：
yarn add --dev babel-jest @babel/core @babel/preset-env
在項(xiàng)目的根目錄下創(chuàng)建 babel.config.js 镊屎，通過配置 Babel 使其能夠兼容當(dāng)前的 Node 版本惹挟。
// babel.config.js
module.exports = {
presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};
使用vue
要使用 Vue，請(qǐng)通過 yarn 來安裝所需的依賴項(xiàng)：
yarn add vue-jest@next --dev
在jest.config.js添加
transform: {
// 用 `vue-jest` 處理 `*.vue` 文件
'^.+\\.vue$': 'vue-jest',
}
還得需要安裝Vue Test Utils 【Vue.js 官方的單元測(cè)試實(shí)用工具庫】
yarn add @vue/test-utils@next --dev
使用typescript
要使用 typescript缝驳，請(qǐng)通過 yarn 來安裝所需的依賴項(xiàng)：
yarn add ts-jest --dev
使用 yarn 安裝 @babel/preset-typescript ：
yarn add --dev @babel/preset-typescript
然后將 @babel/preset-typescript 添加到 babel.config.js 中的 presets 列表中连锯。
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
+ '@babel/preset-typescript',
],
};
還得需要修改tsconfig.json文件
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": [
"esnext",
"dom"
],
"types": [
"vite/client",
+ "jest"
]
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
+ "tests"
]
}
集成基于 cypress 的 e2e 測(cè)試環(huán)境
安裝
yarn add cypress --dev
首次使用cypress時(shí)归苍，需要安裝cypress
npx cypress install
安裝沒有完全成功，執(zhí)行命令重新安裝
npx cypress cache clear
npx cypress install
結(jié)語
這是本人搭建vue3集成項(xiàng)目倉庫运怖，歡迎大家star一下
