搭建 vite + vue3 项目

一、介绍

该文章主要通过 vite + vue3 + vue-router4 + vuex4 + Element Plus + axios + mockjs 搭建项目。

二、通过vite创建项目

1. 通过vite创建 vue+ts 项目

注意： 经过我的测试，使用cnpm create vite时不能自定义项目名称；所以推荐使用 npm 或者 yarn

// 创建项目 => vite-test
yarn create vite

// 进入 vite-test
cd vite-test

// 安装依赖
yarn

// 启动项目
yarn dev

2. 修改vite基本配置

项目生成后，目录文件里面包含vite的配置文件vite.config.ts。而当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。

详细配置官方文档

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],     // 默认配置

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')    // 配置别名；将 @ 指向'src'目录
    }
  },

  server: {
    port: 3000,       // 设置服务启动的端口号；如果端口已经被使用，Vite 会自动尝试下一个可用的端口
    open: true,       // 服务启动后自动打开浏览器
    proxy: {          // 代理
      '/api': {
        target: '真实接口服务地址',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')     // 注意代理地址的重写
      },
      // 可配置多个... 
    }
  }
})

二、安装vue-router

1. 安装

cnpm install vue-router@4 --save

2. 配置router文件

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

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

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

const router = createRouter({
  // history: createWebHistory(),    // 使用history模式
  history: createWebHashHistory(),	 // 使用hash模式
  routes
})

export default router

3. main.ts 里面引入router

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

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

4. 使用router

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