下载 ui库
yarn add ant-design-vue
默认是全局引入，打包后体积很大，
非常影响首屏加载速度，
按需加载
下载按需加载的插件;推荐使用cnpm
cnpm install babel-plugin-import --save-dev 下载在开发环境中
在项目的根目录下创建 babel.config.js
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ["import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true, // `style: true` 会加载 less 文件 } ] ] }
在项目跟目录下创建vue.config.js配置项目信息
const Timestamp = new Date().getTime() module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].title = '我的vue3.0' //这个是网站标题 return args }) }, css: { loaderOptions: { // 你的基础样式 因为没有我就注释了 // sass: { // data: ` // @import "@/assets/style/base.scss"; // `, // }, //这只主题样式，修改此文件后需要重新启动， less: { lessOptions: { modifyVars: { //这是配置css主题色 'primary-color': '#007AFF', }, javascriptEnabled: true, }, }, }, // 每次打包后生成的css携带时间戳 extract: { filename: `css/[name].${Timestamp}.css`, chunkFilename: `css/[name].${Timestamp}.css`, }, }, productionSourceMap: false, //打包后相对目录 publicPath: process.env.NODE_ENV === 'production' ? '././' : './', configureWebpack: { //每次打包后生成的js携带时间戳 output: { filename: `[name].${Timestamp}.js`, chunkFilename: `[name].${Timestamp}.js`, }, }, }
安装less与less-loader
我们需要确认自己是否安装了 less与less-loader
【自己看一下】
cnpm install less less-loader --save-dev 【进行安装】
可能你安装后会出现ess less-loader的版本过高。
这个时候你需要将你的版本下降一下
我们为什么需要安装less与less-loader
因为我们ant-design-vue是用less编写的
配置babel.config.js后，
下面是我的版本库
dependencies用户发布环境 "dependencies": { "@ant-design/icons-vue": "^6.0.1", "ant-design-vue": "^2.2.1", "core-js": "^3.6.5", "vue": "^3.0.0", "vue-class-component": "^8.0.0-0", "vue-router": "^4.0.0-0" }, devDependencies用于本地环境开发时候 "devDependencies": { "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-typescript": "^7.0.0", "babel-plugin-import": "^1.13.3", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "less": "^3.13.1", "less-loader": "^7.1.0", "node-sass": "^4.12.0", "sass-loader": "^8.0.2", "typescript": "~4.1.5" },
devDependencies和dependencies区别?
devDependencies是只会在开发环境下依赖的模块，
生产环境不会被打入包内。
通过NODE_ENV=developement或
NODE_ENV=production指定开发还是生产环境。
而dependencies依赖的包不仅开发环境能使用，
生产环境也能使用。
其实这句话是重点，
按照这个观念很容易决定安装模块时是使用--save还是--save-dev
所以像css预处理语言我们肯定是--save-dev
像ui库请求axios我们肯定是--save
main.ts 组件进行按需引入
import { createApp } from 'vue' // 引入App.vue这个入口文件 import App from './App.vue' // 引入路由 import router from './router' const app = createApp(App) import { Button, ConfigProvider, Layout, Menu, message, Input, Space, Dropdown, Divider, Form, AutoComplete, Modal, Tree, Drawer, Row, Col, Select, DatePicker, Tooltip, Breadcrumb, Popconfirm, InputNumber, Table, Pagination, } from 'ant-design-vue' app.use(Button) .use(Layout) .use(ConfigProvider) .use(Menu) .use(Input) .use(Space) .use(Dropdown) .use(Divider) .use(Form) .use(AutoComplete) .use(Modal) .use(Tree) .use(Drawer) .use(Row) .use(Col) .use(Select) .use(DatePicker) .use(Tooltip) .use(Breadcrumb) .use(Popconfirm) .use(InputNumber) .use(Table) .use(Pagination) .use(router). mount('#app')
按需加载说明和优势
后只需从 ant-design-vue 引入模块即可，无需单独引入样式.
babel-plugin-import 会帮助你加载 JS 和 CSS
import { Button } from "ant-design-vue";
也就是说你不需要引入
import 'ant-design-vue/dist/antd.css'
这个样式文件了
Vue3.0出现Cannot read property ‘use‘ of undefined
其实很简单 哈哈哈 就是因为版本的问题
执行 cnpm i --save ant-design-vue@next
Vue3.0出现Cannot find module 'vue-loader-v16/package.json
当你第一次删除后node-module可能会报错:
Cannot find module 'vue-loader-v16/package.json'.
你在yarn.lock 可以看见这个文件的描述
先卸载vue-loader-v16依赖
npm uninstall vue-loader-v16
之后使用cnpm安装vue-loader-v16依赖
cnpm i vue-loader-v16
vue3.0 ant-design-vue Failed to resolve component: a-layout-header
如果是这样的警告提示
这就说明了 你使用的a-layout-header没有进行加载
需要你在main.ts中添加该组件哈
