Vite开发环境搭建详解
尼羲 人气:0Vite
现在可谓是炙手可热,可能很多小伙伴还没有使用过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" } };
加载全部内容