Vite是一种新型前端构建工具，能够显著提升前端开发体验。主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
- 本文将基于vite一步步的构建vue3全家桶项目，其中整合的内容包括：vue3+vite4+TypeScript+vue-router+eslint+vuex+axios+antd。
1、创建项目
1-1、创建项目
使用yarn创建项目： yarn create vite
- Project name: vue3-vite-template
- Select a framework: vue
- Select a variant: TypeScript
1-2、启动项目
项目创建完成之后，按照命令行的提示进行操作：
cd vue3-vite-template
yarn
yarn dev
项目启动成功页面：
2、项目配置
2-1、配置别名
- 安装类型声明文件, 在引入文件时，习惯使用 @ 代替 src，vite 默认是不识别的
yarn add @types/node -D
- 在vite.config.ts中配置如下代码：
import { defineConfig } from 'vite'
import { resolve } from "path"
export default defineConfig({
......
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
},
},
})
此时如果修改App.vue中HelloWorld组件的引入方式，通过别名@引入会报如下所错“找不到模块“@/components/HelloWorld.vue”或其相应的类型声明。”，所以还需要在tsconfig.json中配置如下代码：
{
"compilerOptions": {
......
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
......
}
2-2、配置less，在项目中引入less
- 首先在项目中安装less less-loader依赖
yarn add less less-loader
- 配置vite.config.js
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
此时在项目中就可以正常使用less，可以在组件style指定lang=‘less’
3、添加ESLint
ESLint 主要用于代码规范、统一代码风格。
3-1、安装ESLint 依赖
yarn add eslint -D
3-2、初始化 ESLint 配置，执行命令进行eslint初始化
npx eslint --init
执行上述命令后，控制台会有如下步骤：
1、How would you like to use ESLint? （想用ESLint来做什么）
To check syntax, find problems, and enforce code style （检查语法、发现问题和加强代码风格）
2、? What type of modules does your project use? （你的项目使用什么类型的模块）
JavaScript modules (import/export) （选择JavaScript类型模块）
3、? Which framework does your project use? （你的项目使用哪个框架）
Vue.js
4、? Does your project use TypeScript? (项目是否要使用ts) => yes
5、? Where does your code run? （项目运行在什么环境）
Browser
6、? How would you like to define a style for your project?（你想如何为你的项目定义一个风格）
Use a popular style guide（使用流行的风格指南）
7、? Which style guide do you want to follow? （你想遵循哪种风格指南）
Standard（标准风格）
8、? What format do you want your config file to be in? （ESLint 配置文件的格式）
JavaScript
依赖安装完成后会在根目录下生成“.eslintrc.cjs”文件
3-3、配置vite的eslint插件
- 安装插件
yarn add vite-plugin-eslint -D
- 在vite.config.js中添加该插件
import eslint from 'vite-plugin-eslint'
export default defineConfig({
plugins: [ vue(), eslint() ],
...
})
4、配置路由
在src下创建router文件夹，在src/router下创建index.ts文件，在此文件下定义路由和创建路由对象
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/',
component: () => import('@/components/HelloWorld.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在main.ts下引入路由
import { createApp } from 'vue'
import './style.css'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
修改App.vue中HelloWorld组件的引入方式，通过router-view引入对应路径下的组件
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
5、状态管理vuex
5-1、安装依赖
yarn add vuex
5-2、配置
在src下创建文件夹store，在src/store下创建index.ts,在此文件下定义状态,对对外暴露store
import { createStore } from 'vuex'
import { ref } from 'vue';
const store = createStore({
state() {
return {
count: ref(0)
}
},
mutations:{
increment(state: any){
state.count++;
}
}
})
export default store
在main.ts中引入store
import { createApp } from 'vue'
import store from './store'
import App from './App.vue'
const app = createApp(App)
app.use(store)
app.mount('#app')
修改helloWorld组件下count，由在组件中定义，到从store中读取，修改count通过commit进行提交到 mutation
<script setup lang="ts">
import { useStore } from 'vuex'
import { computed } from '@vue/reactivity';
const store = useStore();
const count = computed(() => {
return store.state.count
})
const onclick = () => {
store.commit('increment')
}
</script>
<template>
<div class="card">
<button type="button" @click="onclick">count is {{ count }}</button>
</div>
</template>
如果项目能正常启动，且helloWorld组件内的计数器可以正常进行加值操作，则说明vuex引入成功
6、项目中引入antd
6-1、安装依赖
yarn add ant-design-vue@next
6-2、安装 unplugin-vue-components 用于按需引入 ant design vue
yarn add unplugin-vue-components -D
6-3、配置vite.config.ts按需加载antd中的组件
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
...
// 按需引入ant-design-vue
Components({
resolvers: [
AntDesignVueResolver({
// importStyle: 'less', // 一定要开启这个配置项
importStyle: true // 通过引入样式文件来自定义样式主题色,然后在app.vue中引入全局样式文件
}),
],
})
],
// css预处理
css: {
preprocessorOptions: {
less: {
// modifyVars: { // 在这里自定义antd主题色等样式
// 'primary-color': '#1da57a',
// 'link-color': '#1da57a',
// 'border-radius-base': '2px',
// },
javascriptEnabled: true,
},
},
},
})
6-4、引入antd的全局样式
<style lang="less" scoped>
@import './assets/global.less';
</style>
//在global.less文件中引入antd的样式
@import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
// 全局样式的配置可以在这里进行
@primary-color: #1da57a; // 自定义全局主色
@link-color: #535bf2; // 自定义链接色
6-5、在HelloWorld组件中验证antd是否引入成功
<script setup lang="ts">
import { useStore } from 'vuex'
import { computed } from '@vue/reactivity';
import { useRouter } from 'vue-router';
// defineProps<{ msg: string }>()
const store = useStore();
const count = computed(() => {
return store.state.count
})
const onclick = () => {
store.commit('increment')
}
</script>
<template>
<a-layout>
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-sider>Sider</a-layout-sider>
<a-layout-content>
<a-card title="基础样式布局">
<a-button type="default" @click="onclick">count is {{ count }}</a-button>
<a-button type="primary">primary</a-button>
<a-button type="dashed">Dashed Button</a-button>
</a-card>
</a-layout-content>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
</template>
<style scoped lang="less">
.ant-layout-header,
.ant-layout-footer {
color: #fff;
background: #7dbcea;
}
.ant-layout-sider {
color: #fff;
line-height: 120px;
background: #3ba0e9;
}
.ant-layout-content {
min-height: 80vh;
color: #333;
// background: rgba(16, 142, 233, 1);
background: #fff;
}
</style>
运行项目，在浏览器中打开antd引入成功
文章到这里基本上算配置成功了，还有关于axios的封装，会在后续补充，感谢您的阅读。
