目標(biāo)：Vue3 + Ant Design + TypeScript + Router + Vuex
安裝環(huán)境
1、node
node -v
v16.13.0
2司忱、全局安裝yarn(vue3默認(rèn)使用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.
如果出現(xiàn)該錯(cuò)誤信息需要把npm 添加到windows path 環(huán)境變量中，重啟
PS C:\Users\10256\Desktop> npm config get prefix
C:\Users\10256\AppData\Roaming\npm
# 再次驗(yàn)證
PS C:\Users\10256\Desktop> vue -V
@vue/cli 4.5.15
初始化項(xiàng)目
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 # 自定義選擇
# 使用空格選擇酌儒，回車確認(rèn)
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 漸進(jìn)式Web應(yīng)用程序
(*) Router
(*) Vuex
(*) CSS Pre-processors # CSS 預(yù)處理器（如：less、sass）
(*) Linter / Formatter # 支持代碼風(fēng)格檢查和格式化
>(*) 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
# 默認(rèn)回車（N）不使用class風(fēng)格的組件語法
? Use class-style component syntax? (y/N)
# 默認(rèn)回車（Y）使用babel做轉(zhuǎn)義
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
# 默認(rèn)回車（Y）使用歷史模式（不使用哈希模式）
? Use history mode for router? (Requires proper server setup for index fallback in production)
# 選擇css預(yù)處理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass) # 自動(dòng)編譯實(shí)時(shí)的
Sass/SCSS (with node-sass) # 需要保存后才會生效
Less
Stylus
# 選擇嚴(yán)格模式
? Pick a linter / formatter config:
ESLint with error prevention only # 只進(jìn)行報(bào)錯(cuò)提醒
ESLint + Airbnb config # Airbnb配置枯途，不嚴(yán)謹(jǐn)模式
ESLint + Standard config # 標(biāo)準(zhǔn)配置忌怎，正常模式
> ESLint + Prettier # 嚴(yán)格模式
TSLint (deprecated) # typescript格式驗(yàn)證工具
# 選擇什么時(shí)候執(zhí)行 eslint 校驗(yàn)
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save # 保存時(shí)檢查
( ) Lint and fix on commit # 提交時(shí)檢查
# 默認(rèn)選擇 Mocha框架和Chai斷言庫
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
# 默認(rèn)存放的位置
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 在專用的配置文件中單獨(dú)存放
In package.json # 存放在 package.json 中
# 默認(rèn)回車（N）不設(shè)置自定義名字（如果輸入y，可設(shè)置自定義組合名稱酪夷，用于下次創(chuàng)建項(xiàng)目榴啸，快捷選擇自己定義的組合）
? Save this as a preset for future projects? (y/N)
驗(yàn)證是否創(chuàng)建成功
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
> vue3-project@0.1.0 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 啟動(dòng)項(xiàng)目
集成Ant-design UI庫
安裝庫
PS C:\Users\10256\Desktop\vue3-project> npm install ant-design-vue@next -S
開始準(zhǔn)備按需引入組件
在src目錄下創(chuàng)建plugins子文件夾窒百，并在其下面創(chuàng)建2個(gè)ts文件：index.ts该溯，antd.ts
/src/plugins/index.ts
import { createApp } from "vue"
/**
* @description 加載所有Plugins
* @param {ReturnType<typeofcreateApp>} app 整個(gè)應(yīng)用的實(shí)例
*/
export function loadAllPlugins(app: ReturnType<typeof createApp>) {
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 手動(dòng)注冊 antd-vue 組件,達(dá)到按需加載目的
* @description Automatically register components under Button, such as Button.Group
* @param {ReturnType<typeof createApp>} app 整個(gè)應(yīng)用的實(shí)例
* @returns void
*/
export default function loadComponent(app: ReturnType<typeof createApp>) {
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<typeof createApp> = createApp(App)
loadAllPlugins(app)
app
.use(store)
.use(router)
.mount("#app")
找到HelloWorld.vue川尖，在h1標(biāo)簽下面增加按鈕組件測試
<div class="hello">
<h1>{{ msg }}</h1>
<a-button type="primary">
Primary
</a-button>
此時(shí)按鈕已顯示角钩，但無樣式陶舞，下面配置按需引入樣式当犯。編輯babel.config.js藏斩，plugins屬性為增加部分
ps：如果style: "css"改為style: true祟绊，需要引入less燎竖、less-loader等一系列庫璃弄，具體按錯(cuò)誤提示增加安裝
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
啟動(dòng)服務(wù)，測試顯示正常
