Vite+ Vue3.0+ pinia+ vue-router@4+ G2+ Antd Vue +TypeScript 搭建管理端项目

前言

---

vue3 已经出了有一年的时候，在beat版本时候就对vue3有了解过 但是没有真正使用和研究过，最近团队做项目，我把前端技术栈升级到了vue3版本。现在已经有很多公司都在切换vue3。希望可以帮助大家理解和使用vue3

本次安装使用的 pnpm 所以创建项目之前需要先确保安装 pnpm

// 安装 pnpm
npm install pnpm -g

pnpm 介绍 zhuanlan.zhihu.com/p/404784010

初始化项目

// 本次采用的是pnpm 
// > node >16.0

npm init @vitejs/app
or
pnpm creat @vitejs/app

配置相关代码

由于使用 vite 创建项目 不会把预先的node_modules安装好 所以需要我们手动执行安装

启动项目

// 执行安装命令
cd vite-project
npm install
npm run dev
// or
cd vite-project
pnpm install
pnpm dev

安装组件库

本次采用 ant-design-vue@next 因为组件库和图标库分离 所以还需要安装图标库 @ant-design/icons-vue

// 组件库
pnpm add ant-design-vue@next
// 图标库
pnpm add @ant-design/icons-vue
// 配置按需加载
官方支持插件： vite-plugin-components // 之前配置不起效果 后查资料好像是有重名的
现在使用插件： unplugin-vue-components
// 插件安装
pnpm add unplugin-vue-components -D
// 安装less
pnpm add less

// 配置 文件通配符 导入 path 的时候提示报错，需要安装 @types/node 类型检测 
pnpm add @types/node
//支持tsx/jsx
pnpm add @vitejs/plugin-vue-jsx

配置相关代码

安装配置 VueRouter@4.0

// 安装vue-router
pnpm add vue-router@4

配置相关代码

// 创建routers.ts
const routes = [

]

export default routes

安装配置pinia

由于 vuex 4 对 typescript 的支持不好，所以状态管理弃用了 vuex 而采取了 pinia。 pinia 的作者是 Vue 核心团队成员。 尤大神 说 pinia 可能会代替 vuex，所以请放心使用。

// 由于vuex@4 对vue支持不是很好所以项目中选用了 pinia
pnpm add pinia@next

mian.ts配置

// 引入 
import { createPinia } from "pinia" 
// 创建根存储库并将其传递给应用程序 
app.use(createPinia())

创建store

// store.ts
import { defineStore } from 'pinia' 
export const useMainStore = defineStore({ 
    // 必须要加
    id: 'mian',
    state: () =>({ 
        name: '超级管理员' 
    }), 
    actions:{
      // 异步操作修改值
    },
    getters:{}
})

// 可视化图表
pnpm add @antv/g2

// 图表使用  创建chart.vue
<template>
  <div>
    可视化图表
    <div id="container" />
  </div>
</template>
<script lang="ts">
import { Chart } from '@antv/g2';
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
    setup() {
        const data = [
            { year: '2001 年', sales: 38 },
            { year: '2002 年', sales: 52 },
            { year: '2003 年', sales: 61 },
            { year: '2004 年', sales: 145 },
            { year: '2005 年', sales: 48 },
            { year: '2020 年', sales: 38 },
            { year: '2021 年', sales: 38 },
            { year: '2022 年', sales: 38 },
        ];
       
        onMounted(()=>{
            // 初始化示例
            const chart = new Chart({
                container: 'container',
                autoFit: true,
                height: 500,
            });
            // 加载数据
            chart.data(data);
            // 到顶显示 标尺
            chart.scale('sales', {
                nice: true,
            });
            chart.tooltip({
                showMarkers: false
            });
            chart.interaction('active-region');
            chart.interval().position('year*sales');
            // 渲染
            chart.render();
        })
        return {
            // chart
        }
    },
})
</script>

代码检查/版本管理

// 安装 commitizen conventional-changelog-cli standard-version @commitlint/cli @commitlint/config-conventional cz-conventional-changelog lint-staged yorkie
pnpm add  commitizen conventional-changelog-cli standard-version @commitlint/cli @commitlint/config-conventional cz-conventional-changelog lint-staged yorkie

详细配置 533wusaisai.github.io/wss/develop…

总结

pnpm
node > 16
vue3.0
ts
vue-router@4
pinia@next
G2