Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架

从我最初接触vue3版本到现在已经有一年的时间。由于 vue3.2 版本的发布，

getters 用法介绍

Pinia 中的 getter 与 Vuex 中的 getter 、组件中的计算属性具有相同的功能
store=> mian.ts

import { defineStore } from 'pinia'

export const useMainStore = defineStore({
  id: 'mian',
  state: () => ({
    name: '超级管理员',
  }),
  // getters
  getters: {
    nameLength: (state) => state.name.length,
  }
})

组件中使用:

actions

这里与 Vuex有极大的不同，Pinia 仅提供了一种方法来定义如何更改状态的规则，放弃 mutations 只依靠 Actions，这是一项重大的改变。

Pinia让Actions 更加的灵活：

• 可以通过组件或其他 action调用
• 可以从其他 store 的 action 中调用
• 直接在 store 实例上调用
• 支持同步或异步
• 有任意数量的参数
• 可以包含有关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）
• 可以 $patch方法直接更改状态属性

import { defineStore } from 'pinia'

export const useMainStore = defineStore({
  id: 'mian',
  state: () => ({
    name: '超级管理员',
  }),
  getters: {
    nameLength: (state) => state.name.length,
  },
  actions: {
    async insertPost(data:string){
      // 可以做异步
      // await doAjaxRequest(data);
      this.name = data;
    }
  },
})

环境变量配置

vite提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）

项目根目录新建:.env.development :

NODE_ENV=development

VITE_APP_WEB_URL= 'YOUR WEB URL'

项目根目录新建:.env.production :

NODE_ENV=production

VITE_APP_WEB_URL= 'YOUR WEB URL'

组件中使用：
console.log(import.meta.env.VITE_APP_WEB_URL)

配置package.json:

打包区分开发环境和生产环境

"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production",

使用组件库 Naive UI(也可以根据自己的技术栈选择)

组件库选择，这里我们选择 Naive UI 至于为什么选择它？我可以直接说尤大大推荐的吗？

# 安装 组件库
yarn add naive-ui
# 安装 字体
yarn add vfonts

如何使用

import { NButton } from "naive-ui"
naive-ui

全局配置 Config Provider

全局化配置设置内部组件的主题、语言和组件卸载于其他位置的 DOM 的类名。

Vite 常用基础配置

基础配置

运行 代理 和 打包 配置

server: {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    https: false,
    proxy: {}
},

生产环境去除 console debugger

build:{
  ...
  terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
  }
}

生产环境生成 .gz 文件

开启 gzip可以极大的压缩静态资源，对页面加载的速度起到了显著的作用。

使用vite-plugin-compression可以 gzip 或brotli 的方式来压缩资源，这一步需要服务器端的配合，vite 只能帮你打包出.gz 文件。此插件使用简单，你甚至无需配置参数，引入即可。

# 安装
yarn add --dev vite-plugin-compression

plugins 中添加：

import viteCompression from 'vite-plugin-compression'

// gzip压缩 生产环境生成 .gz 文件
viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),

最终 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
//@ts-ignore
import viteCompression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
  base: './', //打包路径
  plugins: [
    vue(),
    // gzip压缩 生产环境生成 .gz 文件
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ],
  // 配置别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css:{
    preprocessorOptions:{
      scss:{
        additionalData:'@import "@/assets/style/mian.scss";'
      }
    }
  },
  //启动服务配置
  server: {
    host: '0.0.0.0',
    port: 8000,
    open: true,
    https: false,
    proxy: {}
  },
  // 生产环境打包配置
  //去除 console debugger
  build: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
})

常用插件

可以查看官方文档：https://vitejs.cn/plugins/

至此一个完整的项目框架已经初步成型，可以愉快的开始业务开发了！

非常推荐使用的 hooks 库：VueUse：https://vueuse.org/

感兴趣的可以了解一下

码云地址： https://gitee.com/fengzhongzhuifeng/type-script-vue3-vite.git