Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】

哈喽,大家好 我是xy???。 从我最初接触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 至于为什么选择它？我可以直接说尤大大推荐的吗？

• 官方介绍：
  • 一个 Vue 3 组件库
  • 比较完整，主题可调，使用 TypeScript，不算太慢
  • 有点意思

介绍还是比较谦虚的，既然尤大推荐，肯定有它的优势了!!!

安装 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/

• @vitejs/plugin-vue 提供 Vue 3 单文件组件支持
• @vitejs/plugin-vue-jsx 提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件）
• @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持
• unplugin-vue-components 组件的按需自动导入
• vite-plugin-compression 使用 gzip 或者 brotli 来压缩资源
• …

非常推荐使用的 hooks 库

因为vue3.x和react hooks真的很像，所以就称为 hooks

VueUse：https://vueuse.org/

看到这个库的第一眼，让我立马想到了 react 的 ahooks

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。

??想要入手 vue3 的小伙伴，赶快学习起来吧！！！

??最后给大家奉上仓库地址吧：https://github.com/xushanpei/vite_vue3_ts

写在最后

公众号：前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 ??? 点一个赞 ?? 或者 关注 都是对我最大的支持。

欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

关注公众号后，在首页：

• 回复面试题，获取最新大厂面试资料。
• 回复简历，获取 3200 套 简历模板。
• 回复React实战，获取 React 最新实战教程。
• 回复Vue实战，获取 Vue 最新实战教程。
• 回复ts，获取 TypeAcript 精讲课程。
• 回复vite，获取 精讲课程。
• 回复uniapp，获取 uniapp 精讲课程。
• 回复js书籍，获取 js 进阶 必看书籍。
• 回复Node，获取 Nodejs+koa2 实战教程。
• 回复数据结构算法，获取 数据结构算法 教程。
• 回复架构师，获取 架构师学习资源教程。
• 更多教程资源应用尽有，欢迎关注获取