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, 清单如下

VS Code 1.58.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
? Select a variant: › - Use arrow-keys. Return to submit.
❯   vue
    vue-ts
复制代码

TIPS：

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

安装依赖(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配置和自动格式化是否生效：

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

整合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>

复制代码