目标：Vue3 + Ant Design + TypeScript + Router + Vuex
安装环境
1、node
node -v
v16.13.0
2、全局安装yarn(vue3默认使用yarn)
PS C:\Users\10256\Desktop> npm install -g yarn
3、全局重新安装最新版本的 @vue/cli
npm install -g @vue/cli
// 或
yarn global add @vue/cli
4、查看是否安装成功
PS C:\Users\10256\Desktop>vue -V
vue: The term 'vue' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
如果出现该错误信息需要把npm 添加到windows path 环境变量中，重启
PS C:\Users\10256\Desktop> npm config get prefix
C:\Users\10256\AppData\Roaming\npm
# 再次验证
PS C:\Users\10256\Desktop> vue -V
@vue/cli 4.5.15
初始化项目
PS C:\Users\10256\Desktop> vue create vue3-project
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features # 自定义选择
# 使用空格选择，回车确认
Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Choose Vue version
(*) Babel # 支持使用Babel编译器
(*) TypeScript
( ) Progressive Web App (PWA) Support # PWA 渐进式Web应用程序
(*) Router
(*) Vuex
(*) CSS Pre-processors # CSS 预处理器（如：less、sass）
(*) Linter / Formatter # 支持代码风格检查和格式化
>(*) Unit Testing # 单元测试（unit tests）
( ) E2E Testing # e2e（end to end） 测试
# 选择3.x
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x
# 默认回车（N）不使用class风格的组件语法
? Use class-style component syntax? (y/N)
# 默认回车（Y）使用babel做转义
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
# 默认回车（Y）使用历史模式（不使用哈希模式）
? Use history mode for router? (Requires proper server setup for index fallback in production)
# 选择css预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass) # 自动编译实时的
Sass/SCSS (with node-sass) # 需要保存后才会生效
Less
Stylus
# 选择严格模式
? Pick a linter / formatter config:
ESLint with error prevention only # 只进行报错提醒
ESLint + Airbnb config # Airbnb配置，不严谨模式
ESLint + Standard config # 标准配置，正常模式
> ESLint + Prettier # 严格模式
TSLint (deprecated) # typescript格式验证工具
# 选择什么时候执行 eslint 校验
? Pick additional lint features: (Press to select, to toggle all, to invert selection)
>(*) Lint on save # 保存时检查
( ) Lint and fix on commit # 提交时检查
# 默认选择 Mocha框架和Chai断言库
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
# 默认存放的位置
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 在专用的配置文件中单独存放
In package.json # 存放在 package.json 中
# 默认回车（N）不设置自定义名字（如果输入y，可设置自定义组合名称，用于下次创建项目，快捷选择自己定义的组合）
? Save this as a preset for future projects? (y/N)
验证是否创建成功
success Saved lockfile.
Done in 25.77s.
Invoking generators...
Installing additional dependencies...
[-/5] ⡀ waiting...
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 11.93s.
⚓ Running completion hooks...
Generating README.md...
Successfully created project vue3-project.
Get started with the following commands:
$ cd vue3-project
$ yarn serve
PS C:\Users\10256\Desktop\vue3-project> npm run serve
> [email protected] serve
> vue-cli-service serve
App running at:
- Local: http://localhost:8083/
- Network: http://192.168.1.142:8083/
Note that the development build is not optimized.
To create a production build, run yarn build.
# 也可以使用yarn serve 启动项目
集成Ant-design UI库
安装库
PS C:\Users\10256\Desktop\vue3-project> npm install ant-design-vue@next -S
开始准备按需引入组件
在src目录下创建plugins子文件夹，并在其下面创建2个ts文件：index.ts，antd.ts
/src/plugins/index.ts
import { createApp } from "vue"
/**
* @description 加载所有Plugins
* @param {ReturnType} app 整个应用的实例
*/
export function loadAllPlugins(app: ReturnType) {
const files = require.context('.', true, /\.ts$/)
files.keys().forEach((key) => {
if (key !== './index.ts') files(key).default(app)
})
}
/src/plugins/antd.ts
import { Button, Card, Row, Col, Tag, Form, Input } from "ant-design-vue"
import { createApp } from "vue"
/**
* @description 手动注册 antd-vue 组件,达到按需加载目的
* @description Automatically register components under Button, such as Button.Group
* @param {ReturnType} app 整个应用的实例
* @returns void
*/
export default function loadComponent(app: ReturnType) {
app.use(Button)
app.use(Card)
app.use(Row)
app.use(Col)
app.use(Tag)
app.use(Form)
app.use(Input)
}
修改入口文件main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { loadAllPlugins } from "@/plugins"
const app: ReturnType = createApp(App)
loadAllPlugins(app)
app
.use(store)
.use(router)
.mount("#app")
找到HelloWorld.vue，在h1标签下面增加按钮组件测试
{{ msg }}
Primary
此时按钮已显示，但无样式，下面配置按需引入样式。编辑babel.config.js，plugins属性为增加部分
ps：如果style: "css"改为style: true，需要引入less、less-loader等一系列库，具体按错误提示增加安装
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
['import', {
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: "css"
}]
]
};
引入babel-plugin-import库
PS C:\Users\10256\Desktop\vue3-project> npm install babel-plugin-import -D
启动服务，测试显示正常