项目配置

vscode

snippets

在 .vscode 的文件夹下的 vue.code-snippets 中，我写好了几个常用的代码片段。在工作区内可直接使用。

vue3-comp 适用于传统组件开发，默认 inheritAttrs 为 false，同时带有 props 和 emits
vue3-view 适用于普通的页面开发，上面的简化版本，script 只剩 component 和 setup，同时添加了 style 标签
vue3-tsx 适用于复杂逻辑页面/组件，没有 template，使用 tsx 开发
vue3-setup 适用于常见的组件开发，setup 语法糖，有两个 script 标签
w-form-basic 项目高度封装的 form 组件

volar

TIP

在开始之前，请先仔细阅读 Use Take Over Mode instead of TS Plugin。

省流：使用 volar 的 take over 模式（下面就叫它接管模式了）而不是 ts-plugin。

简单来说，如果只是单纯使用 volar 而不使用接管模式的话，vscode 内置的 js/ts server 和 volar 会创建两个 service 实例。而且 ts-plugin 也会创建相应的实例，就结论来说就是会占用 CPU 资源。而使用接管模式只会有两个实例。

开启接管模式的步骤

确保Vue Language Features (volar)在工作区中启用
在 vscode 中，ctrl + shift + p，输入Extensions: Show Built-in Extensions选中
拉到底，选中TypeScript and JavaScript Language Features，并禁用即可

环境变量

项目的环境变量配置位于env目录下的.env、.env.development、.env.production和.env.staging。其中.env.staging文件用途是模拟生产的阶段性打包，会借助一些 vite 插件和 rollup 插件处理一些相关打包逻辑。

更多相关环境变量的配置请查看vite 关于 env 文档。

.env

通用配置

# 网站标题
VITE_APP_TITLE = 'Walnut Admin'

.env.development

开发环境配置

# 开发服务器的端口号
VITE_PORT = 3100

# 开发服务器的host
VITE_HOST = '127.0.0.1'

# 可以是任何的以 / 开头的字符串，目的就是为了在开发服务的配置里重写代理
VITE_PROXY_PREFIX = '/api'

# 真实的后台接口地址
VITE_API_TARGET = 'http://127.0.0.1:3000'

# 真实的后台接口地址的前缀，没有的话写空就行
VITE_API_PREFIX = '/dev-api/v1'

# 资源公共路径，需要以 / 开头和结尾
VITE_PUBLIC_PATH = '/'

# 持久化信息加密的key
VITE_PERSIST_CRYPTO_KEY = 'crypto-key'

# 持久化信息加密的iv
VITE_PERSIST_CRYPTO_IV = 'crypto-iv'

# 请求参数加密的key
VITE_REQUEST_CRYPTO_KEY = 'crypto-key'

# 请求参数加密的iv
VITE_REQUEST_CRYPTO_IV = 'crypto-iv'

# 响应数据加密的key
VITE_RESPONSE_CRYPTO_KEY = 'crypto-key'

# 响应数据加密的iv
VITE_RESPONSE_CRYPTO_IV = 'crypto-iv'

# axios请求超时时间，单位是秒，默认10秒
VITE_AXIOS_TIMEOUT_SECOND = 10

# axios的缓存机制保留时间，单位是秒，默认5秒
VITE_AXIOS_CACHE_MAXAGE = 5

# local/session/cookie的默认缓存时间，单位是毫秒，默认7天
VITE_APP_PERSIST_SECOND = 604800

.env.production

WARNING

staging 的环境变量文件和 production 的一致

生产环境配置

# ...
# 重复的就不再写一遍了

# 生产环境也可以通过nginx配置请求转发
VITE_PROXY_PREFIX = '/api'

# 优先级不如上面的，配置了上面的这个就会失效
VITE_API_TARGET = 'https://api.xxx.com'

vite 插件

auto-import

基本介绍
- 按需自动引入 api，很好的 vite/ts 支持
- 具体查看auto-import.ts
详细介绍
- 基本的文件类型都做了支持，js/ts/jsx/tsx/vue/md
- 开启了 dts，会自动生成 ts 文件，项目中只要是以上类型的文件中都可以直接使用。例如想要使用@vueuse/core 的 api 时，只需要输入 use，vscode 会自动识别并提供很好的提示
- 默认预置了 vue/vue-router/vue-i18n/@vuseuse/core 的 api 自动引入
- 同时添加了一系列的自定义 api 的支持，下面描述的 api 都可直接使用，无需引入

TIP

下方以 useApp 或 App 为首出现的函数均是在原有的 api 上的二次封装，例如useAppRouter、useAppI18n等。主要目的就是为了统一一下函数入口，后续想做函数扩展方便进展。

json

// ...
// 以下目录内的所有内容都会自动引入，无需手动引入
{
  "dirs": [
    "src/const/**",
    "src/locales/**",
    "src/router",
    "src/store/modules/**",
    "src/hooks/**",
    "src/utils/**"
  ]
}

json

// ...
// 下面是一些自定义的自动引入
{
  // form/table/CRUD组件的hook函数
  "/@/components/UI/Form": ["useForm"],
  "/@/components/UI/Table": ["useTable"],
  "/@/components/Advanced/CRUD": ["useCRUD"],

  // table preset columns
  "@/components/UI/Table/src/utils/presetColumns": [
    "WTablePresetOrderColumn",
    "WTablePresetStatusColumn",
    "WTablePresetCreatedAtColumn",
    "WTablePresetUpdatedAtColumn"
  ]
}

components

基本介绍
- 按需自动引入 vue 组件，很好的 vite/ts 支持
- 具体查看component.ts

详细介绍

基本的文件类型都做了支持，js/ts/jsx/tsx/vue/md
默认目录就是 src 下的 components 文件夹
开启了 dts，在 volar 的配合下有很好的 ts 支持
默认 naive-ui 组件都可以直接在 vue 种使用，无需引入
同时配置了很多自定义组件的引入

const comp = {
  Advanced: [
    'CRUD',
    'AIcon',
    'ApiSelect',
    'AreaCascader',
    'LocaleSelect',
    'RoleSelect',
  ],
  App: [
    'AppDarkMode',
    'AppFullScreen',
    'AppLocalePicker',
    'AppLock',
    'AppSearch',
    'AppSettings',
    'AppAuthorize',
  ],
  Extra: [
    'AbsImage',
    'Arrow',
    'DemoCard',
    'FlipClock',
    'Flipper',
    'IconPicker',
    'JSON',
    'Message',
    'QRCode',
    'Scrollbar',
    'Title',
    'Transition',
    'TransitionSelect',
    'Verify',
  ],
  UI: [
    'Button',
    'ButtonGroup',
    'Card',
    'Checkbox',
    'DatePicker',
    'Descriptions',
    'Drawer',
    'Dropdown',
    'DynamicTags',
    'Form',
    'Icon',
    'Input',
    'InputNumber',
    'Modal',
    'Radio',
    'Select',
    'Switch',
    'Table',
    'TimePicker',
    'Tree',
  ],
  Vendor: [
    'AvatarUpload',
    'CodeMirror',
    'Cropper',
    'Echarts',
    'LocationPicker',
    'OSSUpload',
    'SignPad',
    'Tinymce',
  ],
}

UnoCSS

基本介绍
- antfu 的又一力作插件，速度快，hmr 快，功能强大，没啥可说的了

详细介绍

添加了presetAttributify预设，即支持<div w:text-red-900></div>这种属性的 css 类名写法
添加了一个 hstack 和 vstack的快捷方式，这里可自行添加更多的 shortcuts

json

{
  "shortcuts": {
    "hstack": "flex flex-row flex-nowrap",
    "vstack": "flex flex-col flex-nowrap"
  }
}

为了配合 naive-ui 的使用，添加了颜色的扩展，使用方式为 text-primary 即 naive 的 primary 颜色

json

{
  "theme": {
    "colors": {
      // extend from naive-ui color
      "primary": "var(--primary-color)",
      "primaryHover": "var(--primary-color-hover)",

      "info": "var(--info-color)",
      "infoHover": "var(--info-color-hover)",

      "error": "var(--error-color)",
      "errorHover": "var(--error-color-hover)",

      "bodyColor": "var(--body-color)"
    }
  }
}

html

基本介绍
- ejs 支持
- 具体查看html.ts
详细介绍
- 暂时就是为了把 title 注入到 html 中

visualizer

基本介绍
- rollup 的打包可视化插件
- 具体查看visualizer.ts
详细介绍

{
  filename: bundleSizeStatsLogPath, // 生成的可视化html文件存放路径
  title: `${title} Bundle Stats`, // 标题
  open: true, // 直接浏览器中打开
  template: 'treemap', // 图标类型
  gzipSize: true, // gzip压缩后大小显示
  brotliSize: true, // brotli压缩后大小显示
}

legacy

基本介绍
- 官方插件，做兼容性的，为了支持那些不支持 esm 的浏览器
详细介绍
- 暂无

compression

基本介绍
- 压缩插件，打包时可以生成 gzip 或 brotli 的压缩文件
- 具体查看compression.ts
详细介绍

json

{
  // brotli压缩，并且删除源文件
  "ext": ".br",
  "algorithm": "brotliCompress",
  "deleteOriginFile": true
}

项目配置 ​

vscode ​

snippets ​

volar ​

开启接管模式的步骤 ​

环境变量 ​

.env ​

.env.development ​

.env.production ​

vite 插件 ​

auto-import ​

components ​

UnoCSS ​

html ​

visualizer ​

legacy ​

compression ​

项目配置

vscode

snippets

volar

开启接管模式的步骤

环境变量

.env

.env.development

.env.production

vite 插件

auto-import

components

UnoCSS

html

visualizer

legacy

compression