5分钟搭建 vite + vue3 工程

转自“前端进阶之旅” 2021-12-16的一片文章。

介绍

本文主要介绍 vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建。

创建 vite 项目

执行创建命令

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

yarn create vite
yarn
yarn dev

修改 vite 配置文件

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

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

安装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或者element-ui

跟router安装、引用、使用一样 就不过多赘述了。

安装axios

跟router安装、引用、使用一样 就不过多赘述了。此处建议封装业务接口到专门的文件，拦截器啥的跟vue2差不多。

安装 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);
})

结束

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