亲宝软件园·资讯

展开

Vite开发环境搭建详解

尼羲 人气:0

​Vite​​​现在可谓是炙手可热,可能很多小伙伴还没有使用过​​Vite​​​,但是我相信大多数小伙伴已经在使用​​Vite​​​了,因为是太香了有没有。可能在使用过程中很多东西​​Vite​​​不是配置好的,并不像​​Vue-cli​​配置的很周全,那么今天就说一下如何配置开发环境,其中主要涉及到的点有一下几个:

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-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"
}
};

加载全部内容

相关教程
猜你喜欢
用户评论