vite2 ts antd系列01 - 快速上手全部代码都会使用 vue3 composition api 以及 set

本人搭框架喜欢追新，如无特殊说明，所有依赖均为当前最新版本。

全部代码都会使用 vue3 composition api 以及 setup syntax sugar

本人有代码洁癖，项目一开始会引入prettier, eslint和commitlint

本人不是初学者，但会从hello world开始，逐渐演进为包含权限的全功能前端框架。

使用 json-server 模拟后端api接口，在json-server中自定义了 api/token接口用来模拟登陆, 后续将接入 spring 全家桶（包含spring security)作为后端api。

警告 vite要求使用 node.js 12.0.0 及以上版本

如果后续想保持项目是最新版本

可以使用如下命令

# 更新vue 3相关依赖到最新版本
yarn upgrade vue
yarn upgrade ant-design-vue@beta
yarn upgrade vue-router
yarn upgrade pinia
yarn upgrade vue-i18n@next

# 交互式更新其他依赖到最新版
yarn upgrade-interactive --latest

IDE 篇

前端开发神器，除了webstorm就是vs code，本文选用vs code, 清单如下

VS Code 1.66.0
~~Vetur~~ Volar (vue3必装插件，请一定禁用或卸载vetur）
i18n Ally （国际化必装插件）
Ant Design Vue helper（代码提示插件，为了后续的reactjs篇, 此处使用ant design）
Prettier - Code formatter
ESlint

以上清单已经做了插件的link，点进去即可安装。

快速上手

创建vite项目

使用 yarn create @vitejs/app 项目名称 创建vite项目， framework选择vue, variant选择vue，项目名大小写请使用 kebab-case，

yarn create @vitejs/app vite2-antd

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit-element
    svelte
    
✔ Select a framework: › vue-ts
? Select a variant: › - Use arrow-keys. Return to submit.
   vue
❯  vue-ts

TIPS：

我喜欢mono-rep, 在实际的前后端分离项目中，前端会用固定的名称 frontend, 后端用固定的名称 backend，减少记忆负担，也便于做 CI/CD。

安装依赖(router, pinia, antd, i18n, json-server, less)

一口气安装全部依赖，注意分为开发依赖（参数-D)，和运行时依赖.

# dependencies
yarn add vue-router@next pinia axios dayjs ant-design-vue@beta @ant-design/icons-vue vue-i18n@next
# dev dependencies
yarn add -D json-server less @intlify/vite-plugin-vue-i18n

整合prettier

在项目根目录下创建.prettierrc文件，内容如下

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "trailingComma": "es5",
  "semi": false,
  "useTabs": false,
  "htmlWhitespaceSensitivity": "ignore"
}

重要！请在vscode的settings中设置保存代码时自动格式化。

TIPS 验证prettier配置和自动格式化是否生效：

打开src/main.js，任意行尾加上分号;, 保存，如果vscode自动移除了这个分号，恭喜你, we are on the same page!

整合antd

修改main.ts文件：

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

import App from './App.vue'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

此时 yarn dev 启动项目报错如下

[vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options?
  Plugin: vite:css
  File: /Users/cyper/xxx/vite2-antd/node_modules/ant-design-vue/lib/style/color/bezierEasing.less
  107|  // It is hacky way to make this function will be compiled preferentially by less
  108|  // resolve error: `ReferenceError: colorPalette is not defined`
  109|  // https://github.com/ant-design/ant-motion/issues/44
     |                                                        ^
  110|  .bezierEasingMixin();
  111|  
      at less (/Users/cyper/xxx/vite2-antd/node_modules/vite/dist/node/chunks/dep-cc49d7be.js:28253:33)
12:03:49 PM [vite] Internal server error: Inline JavaScript is not enabled. Is it set in your options?
  Plugin: vite:css

需要在vite.config.js中做如下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {},
        javascriptEnabled: true,
      },
    },
  },
})

Hello world!

删除自动生成的HelloWorld.vue, 然后将App.vue的内容替换如下：

<template>
  <a-button type="primary" @click="doSayHello">Hello</a-button>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'

const doSayHello = () => {
  message.info(`hello world`)
}

</script>

yarn dev 启动项目，打开首页: http://localhost:3000, 然后点击Hello按钮，如果看到提示信息， hello world完成！

TIPS：

有时yarn dev命令不好用（缓存问题），可以使用 npx vite --force命令让vite清空缓存再启动。