vite2 js antd系列01 - 快速上手

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

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

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

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

本人喜欢typescript， 为了便于学习，会先从javascript版本开始，下一篇为typescript版。

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

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

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

可以使用如下命令

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

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

IDE 篇

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

1. VS Code 1.58.0
2. Vetur Volar (vue3必装插件，请一定禁用或卸载vetur）
3. i18n Ally （国际化必装插件）
4. Ant Design Vue helper（代码提示插件，为了后续的reactjs篇, 此处使用ant design）
5. Prettier - Code formatter
6. 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
? Select a variant: › - Use arrow-keys. Return to submit.
❯   vue
    vue-ts

TIPS：

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

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

# dependencies
yarn add vue-router@next vuex@next axios ant-design-vue@next @ant-design/icons-vue vue-i18n@next
# dev dependencies
yarn add -D json-server less

整合prettier

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

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

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

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

整合antd

此时 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>
import { message } from 'ant-design-vue'

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

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

TIPS：