#yyds干货盘点#Vite开发环境搭建
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#Vite开发环境搭建相关的知识，希望对你有一定的参考价值。
Vite现在可谓是炙手可热，可能很多小伙伴还没有使用过Vite，但是我相信大多数小伙伴已经在使用Vite了，因为是太香了有没有。可能在使用过程中很多东西Vite不是配置好的，并不像Vue-cli配置的很周全，那么今天就说一下如何配置开发环境，其中主要涉及到的点有一下几个：
- TypeScript
- Vuex
- Vue-Router
- E2E
- Cypress
- Test unit
- Jest
- vtu
- Eslint + Perttite
- verify git commit message
- CI
- alias
Vite初始化项目
在开始之前首先要先使用Vite创建项目，如果小伙伴已经对Vite已经有了一定的了解，那么可以跳过。根据Vite官网介绍可以使用npm或yarn来创建项目。
使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpx create-vite
输入完命令之后然后按照提示操作即可，因为在项目要支持TypeScript所以我这里就选择的是vue-ts。创建好之后Vite会帮助我们把项目给创建好，可以发现Vite所创建好的项目其实与使用Vue-cli所创建的项目目录结构其实是差不多的，这里也就不多赘述了。
集成Vue-Router
Vue-Router是大多数项目中比不可少的工具之一了，Vue-Router可以让构建单页面应用变得更加的容易。包含的功能有：
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- html5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
以上截取自Vue-router官网
安装Vue-Router：
使用 NPM:
npm install vue-router@next --save
使用 Yarn:
yarn add vue-router@next --save
安装完成之后在src目录下创建文件夹router/index.ts，创建完成之后需要在Vue-Router中对Vue-Router进行初始化配置。我们暂时把初始化的工作搁置一下，先需要创建pages文件夹，把需要展示的页面创建完成。
创建完成之后，接下来就是完善router/index.ts中文件的初始化工作了：
import createRouter, createWebHashHistory from "vue-router";
const router = createRouter(
history: createWebHashHistory(),
routes: [
path: "/home",
name: "Home",
alias: "/",
component: () => import("../pages/Home.vue")
,
path: "/about",
name: "About",
component: () => import("../pages/About.vue")
]
)
export default router;
接下来在main.ts文件中集成Vue-Router：
import createApp from vue;
import App from ./App.vue;
import router from "./router";
const app = createApp(App);
app.use(router);
app.mount(#app);
测试一下，这里修改一下App.vue的代码，测试一下我们的路由是否已经可以正常使用了。
<template>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>
<script lang="ts">
import defineComponent from vue
export default defineComponent(
name: App
)
</script>
接下来启动服务就可以看到所配置的页面了，说明配置的路由已经生效了。Good Job，真的很不错~~~
集成Vuex
Vuex是Vue所支持的状态管理工具，在在实际应用过程中也有很大的作用，当多个组件之间的数据流转变得非常困难，因此需要集中的对状态进行管理，Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
安装Vuex:
使用 NPM:
npm install vuex@next --save
使用 Yarn:
yarn add vuex@next --save安装完成之后，首先添加store/index.ts来初始化Vuex。需要注意的是，如下示例使用了Vuex命名空间。可能在实际项目中使用命名空间相对来说还是比较普遍的，避免进行状态管理的时候导致变量污染。
import createStore from "vuex";
const store = createStore(
modules:
home:
namespaced: true,
state:
count: 1
,
mutations:
add(state)
state.count++;
)
export default store;
集成到Vue中：
import createApp from vue;
import App from ./App.vue;
import router from "./router";
import store from "./store";
const app = createApp(App);
app.use(router);
app.use(store);
app.mount(#app);
现在Vuex就已经被集成到Vue中了为了保证集成的Vuex是有效地，那么需要对此进行测试：
pages/Home.vue
<template>
<h1>Home</h1>
<h2>count</h2>
<button @click="handleClick">click</button>
</template>
<script lang="ts">
import defineComponent, computed from vue;
import useStore from vuex;
export default defineComponent(
setup ()
const store = useStore();
const count = computed(() => store.state.home.count);
const handleClick = () =>
store.commit(home/add);
;
return
handleClick,
count
;
)
</script>
当点击按钮的时候，就可以发现count值也随着点击每次递增，那么store是可以正常使用。Good Job，真的很不错~~~
集成Git提交验证
在开发项目的时候可能并不是一个人进行开发的，可能会由多个人进行开发，那么作为标准的自动化来讲，对于Git提交的时候，要有一些固定显著的格式来规范我们的项目开发人员，这个时候就需要使用某些工具进行约束。
安装相关依赖：
使用 NPM:
npm install yorkie -D
npm install chalk -D
使用 Yarn:
yarn add yorkie --dev
yarn add chalk --dev
安装完依赖之后，对yorkie之后需要对其进行相关的配置，在package.json中添加字段：
"gitHooks":
"commit-msg": "node scripts/commitMessage.js"
在上面的配置中，运行了一个js文件，那么这个js文件中则是对提交内容的校验。
scripts/commitMessage.js
const chalk = require(chalk)
const msgPath = process.env.GIT_PARAMS
const msg = require(fs).readFileSync(msgPath, utf-8).trim()
const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\\(.+\\))?(.1,10)?: .1,50/
const mergeRe = /^(Merge pull request|Merge branch)/
if (!commitRE.test(msg))
if (!mergeRe.test(msg))
console.log(msg)
console.error(
` $chalk.bgRed.white( ERROR ) $chalk.red(
`invalid commit message format.`,
)\\n\\n` +
chalk.red(
` Proper commit message format is required for automated changelog generation. Examples:\\n\\n`,
) +
` $chalk.green(`feat(compiler): add comments option`)\\n` +
` $chalk.green(
`fix(v-model): handle events on blur (close #28)`,
)\\n\\n` +
chalk.red(
` See https://github.com/vuejs/vue-next/blob/master/.github/commit-convention.md for more details.\\n`,
),
)
process.exit(1)
集成Eslint
Eslint对于团队开发来说是一个很不错的工具，可以根据Eslint的配置给约束开发者代码的风格，以及书写格式。
安装相关依赖：
使用 NPM:
npm install eslint -D
npm install eslint-plugin-vue -D
npm install @vue/eslint-config-typescript -D
npm install @typescript-eslint/parser -D
npm install @typescript-eslint/eslint-plugin -D
npm install typescript -D
npm install prettier -D
npm install eslint-plugin-prettier -D
npm install @vue/eslint-config-prettier -D
使用 Yarn:
yarn add eslint --dev
yarn add eslint-plugin-vue --dev
yarn add @vue/eslint-config-typescript --dev
yarn add @typescript-eslint/parser --dev
yarn add @typescript-eslint/eslint-plugin --dev
yarn add typescript --dev
yarn add prettier --dev
yarn add eslint-plugin-prettier --dev
yarn add @vue/eslint-config-prettier --dev
配置安装完成之后呢，还需要对eslint进行配置，在根目录下创建.eslintrc:
.eslintrc
"root": true,
"env":
"browser": true,
"node": true,
"es2021": true
,
"extends": [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended"
],
"parserOptions":
"ecmaVersion": 2021
配置项已经添加好了，如何去运行已经配置好的eslint呢？接下来就需要在package.json中添加命令：
"lint": "eslint --ext src/**/*.ts,vue --no-error-on-unmatched-pattern"
接下来运行一下yarn lint就可以了，可以通过eslint完成格式的校验了，现在的问题是什么，在执行yarn lint的时候把所有的文件全部都校验了一次，这个可不是我们所希望的，如果有很多文件的话，那么速度将会很慢，那么有没有办法，只在git提交的时候对修改的文件进行eslint校验呢？
安装相关依赖：
使用 NPM:
npm install lint-staged -D
使用 Yarn:
yarn add lint-staged --dev
修改package.json：
"gitHooks":
"commit-msg": "node scripts/commitMessage.js",
"pre-commit": "lint-staged"
,
"lint-staged":
"*.ts,vue": "eslint --fix"
,
"scripts":
"test:unit": "jest",
"test:e2e": "cypress open",
"test": "yarn test:unit && npx cypress run",
"lint": "npx prettier -w -u . && eslint --ext .ts,.vue src/** --no-error-on-unmatched-pattern",
"bea": "npx prettier -w -u ." // 美化代码
,
配置alias
在使用cli的时候总是使用@去引入某些文件，由于Vite没有提供类似的配置，所以我们需要手动的对其进行一些相关的配置，才能继续使用@符号去快捷的引入文件。
修改vite.config.ts:
import defineConfig from vite;
import vue from @vitejs/plugin-vue;
import join from "path";
// https://vitejs.dev/config/
export default defineConfig(
plugins: [vue()],
resolve:
alias: [
find: @,
replacement: /src,
,
find: views, replacement: /src/views ,
find: components, replacement: /src/components ,
]
);
修改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"],
"baseUrl": ".",
"paths":
"@/*": ["src/*"]
,
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/unit"
]
为了保证在单元测试中也可以使用@引入src下面的文件需要对jest.config.js配置进行修改：
修改jest.config.js：
module.exports =
transform:
^.+\\\\.vue$: vue-jest,
^.+\\\\.jsx?$: babel-jest,
^.+\\\\.tsx?$: ts-jest,
,
testMatch: [**/?(*.)+(test).[jt]s?(x)],
moduleNameMapper:
"@/(.*)$": "<rootDir>/src/$1"
;
以上是关于#yyds干货盘点#Vite开发环境搭建的主要内容，如果未能解决你的问题，请参考以下文章
Windows 下搭建ActiveMQ环境 #yyds干货盘点#
#yyds干货盘点# Docker环境搭建以及常用技巧可视化