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：

安装依赖(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：

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。