5分钟搭建 vite + vue3 工程，简单，实用！跟随作者来搭建 vite + vue3 + vue-router4

介绍

本文主要介绍 vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建。2021年，若还没有体验过 vite 的速度，要抓紧动手试一下啦！

创建 vite 项目

执行创建命令

执行 vite 项目创建命令，在创建导航过程中，选择 vue+ts 模式。

yarn create vite
yarn
yarn dev

修改 vite 配置文件

当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。这里，我们简单设置一下将 @ 指向 src 以及开发时与后端联调必须进行的proxy代理设置。其它配置参数可参考官网。（cn.vitejs.dev/config/）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    // 代理
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

安装 vue-router

执行安装命令

yarn add vue-router@4

创建router文件

创建 src/router/index.ts 文件，创建路由时，建议使用路由懒加载，优化访问性能。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue') // 建议进行路由懒加载，优化访问性能
  },
  {
    path: '/demo',
    name: 'demo',
    component: () => import('@/views/Demo.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

引入router

在 main.ts 文件中 vue 示例中 use router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

使用 router-view 组件

在 App.vue 文件中使用 router-view 组件，路由匹配到组件会通过 router-view 组件进行渲染。

<template>
  <router-view />
</template>

安装vuex

执行安装命令

yarn add vuex@next

创建store文件

创建 src/store/index.ts 文件

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state: typeof defaultState) {
      state.count++
    }
  }
})
export default store;

引入vuex

在 main.ts 文件中 vue 示例中 use store，这样我们就可以在页面编码中使用全局状态管理插件 vuex 啦。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'

createApp(App).use(router).use(store).mount('#app')

安装UI库 ant-design-vue

执行安装命令

yarn add ant-design-vue@next

引用 ant-design-vue

在 main.ts 中引入 antd 插件及 css 样式文件，在 vue 实例中 use 插件。这里我们使用了全局引用的方式，当然，也可以参考官网进行按需引用。（2x.antdv.com/docs/vue/ge…

import { createApp } from 'vue'
import Antd from "ant-design-vue";
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import "ant-design-vue/dist/antd.css";

createApp(App).use(router).use(store).use(Antd).mount('#app')

使用 ant-design-vue

引用后，我们就可以在组件中进行使用了

<template>
  <a-button type="primary">按钮</a-button>
</template>

安装axios

执行安装命令

yarn add axios

创建公共请求方法

我们将工具类方法放到 utils 文件夹中，创建文件 src/utils/request.ts

import axios from 'axios'

interface ApiConfig {
  body: object;
  data: object
}

async function request(url: string, options: ApiConfig) {
  // 创建 axios 实例
  const service = axios.create({
    baseURL: "", // api base_url
    timeout: 6000 // 请求超时时间
  });
  // 请求拦截
  service.interceptors.request.use(config => {
    // 这里可设置请求头等信息
    if (options && options.body) {
      config.data = options.body;
    }
    return config;
  });
  // 返回拦截
  service.interceptors.response.use(response => {
    // 这里可进行返回数据的格式化等操作
    return response.data;
  });
  return service(url, options);
}
export default request;

使用请求方法

<script>
import request from "@/utils/request.ts"

export default {
  mounted() {
    request('/api/getUser')
  }
}
</script>

安装 mock 工具

mock 模拟数据我们选用 mockjs 插件，vite 中需要安装 vite-plugin-mock 插件。

执行安装命令

yarn add mockjs
yarn add vite-plugin-mock -D

vite.config.ts 中引用插件

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({ supportTs: true })
  ],
})

使用 mock

在 src/mock 文件中创建 index.ts 文件，添加如下代码示例代码

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getList',
    method: 'get',
    response: () => {
      return {
          code: 0,
          message: 'ok',
          data: ['aa', 'bb']
      }
    }
  },
] as MockMethod[]

这样我们就可以在工程中进行 mock 数据的访问了，这里我们使用在前文中创建公共 api 请求方法 request。

import request from "@/utils/request.ts"

request('/api/getList').then(res => {
  console.log(res);
})

其它

less

vite项目使用less，不需要额外安装less-loader，只安装less即可。

yarn add less --dev

结束

好啦，到此，一个简单实用的 vite + vue3 工程就搭建完毕了，当然，前端工程里还必不可少代码规范工具及单元测试工具等，大家可以根据需要自行补充。快动手试试吧！