5分钟搭建 vite + vue3 工程，简单，实用！

介绍

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

创建 vite 项目

执行创建命令

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

代码语言：javascript复制

yarn create vite
yarn
yarn dev
复制代码

修改 vite 配置文件

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

代码语言：javascript复制

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

执行安装命令

代码语言：javascript复制

yarn add vue-router@4
复制代码

创建router文件

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

代码语言：javascript复制

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

代码语言：javascript复制

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 组件进行渲染。

代码语言：javascript复制

<template>
  <router-view />
</template>
复制代码

安装vuex

执行安装命令

代码语言：javascript复制

yarn add vuex@next
复制代码

创建store文件

创建 src/store/index.ts 文件

代码语言：javascript复制

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 啦。

代码语言：javascript复制

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

执行安装命令

代码语言：javascript复制

yarn add ant-design-vue@next
复制代码

引用 ant-design-vue

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

代码语言：javascript复制

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

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

代码语言：javascript复制

<template>
  <a-button type="primary">按钮</a-button>
</template>
复制代码

安装axios

执行安装命令

代码语言：javascript复制

yarn add axios
复制代码

创建公共请求方法

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

代码语言：javascript复制

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;
复制代码

使用请求方法

代码语言：javascript复制

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

export default {
  mounted() {
    request('/api/getUser')
  }
}
</script>
复制代码

安装 mock 工具

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

执行安装命令

代码语言：javascript复制

yarn add mockjs
yarn add vite-plugin-mock -D
复制代码

vite.config.ts 中引用插件

代码语言：javascript复制

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

export default defineConfig({
  plugins: [
    viteMockServe({ supportTs: true })
  ],
})
复制代码

使用 mock

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

代码语言：javascript复制

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。

代码语言：javascript复制

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

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

结束

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

来自：多肉攻城狮

https://juejin.cn/post/7009145360694116382

typescript vue.js apache http

0 人点赞