1 安装less
npm i less --save-dev
安装 less loader,注意要安装less的固定版本,因为默认安装时,会出现版本过高的错误提示,导致yarn serve无法启动
npm install -D less-loader@7.x
下面的错误是默认安装less,less loader时,因为版本过高所导致的错误
Syntax Error: TypeError: this.getOptions is not a function
2 安装 ant vue
npm i --save ant-design-vue@next
同时,要修改main.ts中的引用方法
import Antd from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css'
//使用less时,需要引用ant的less文件,否则会不成功
import 'ant-design-vue/dist/antd.less'
3 在根目录下新建vue.config.js
const path = require('path')
module.exports = {
// 选项...
publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 通常用于确定在开发环境还是生产环境
outputDir: 'dist', // 打包文件输出目录, 默认打包到dist文件下
assetsDir: 'static', // 放置静态资源
pages: {
index: {
// page 的入口
entry: 'src/main.ts',
// 模板来源
template: 'public/index.html',
// 修改模板引擎title
title: 'Vue3 学习',
// 在 dist/index.html 的输出
filename: 'index.html',
},
},
lintOnSave: false, // 设置是否在开发环境下每次保存代码时都启用 eslint验证
runtimeCompiler: false, // 是否使用带有浏览器内编译器的完整构建版本
configureWebpack: {
// 别名配置
resolve: {
alias: {
src: '@', // 默认已配置
assets: '@/assets',
common: '@/common',
components: '@/components',
api: '@/api',
views: '@/views',
plugins: '@/plugins',
utils: '@/utils',
},
},
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
// 存放less变量文件的路径
path.resolve(__dirname, './src/assets/less/common.less'),
],
},
},
//打包的css路径及命名
css: {
modules: false,
//vue 文件中修改css 不生效 注释掉 extract:true
extract: {
filename: 'style/[name].[hash:8].css',
chunkFilename: 'style/[name].[hash:8].css',
},
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
// 'primary-color': '#ec6800',
// 配置主题色,及其它公共less配置
'primary-color': '#fc5531',
'link-color': '#1DA57A',
'border-radius-base': '8px',
},
javascriptEnabled: true,
},
},
},
},
chainWebpack: (config) => {
// 允许对内部的 webpack 配置进行更细粒度的修改。
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap((options) => Object.assign(options, { limit: 10240 }))
},
devServer: {
host: 'localhost',
port: 8090, // 端口号
hotOnly: true, // 热更新
https: false, // https:{type:Boolean}配置前缀
open: false, //配置自动启动浏览器
proxy: {
'/api': {
target: 'url',
// 是否允许跨域
changeOrigin: true,
secure: false, // 如果是https接口,需要配置这个参数
ws: true, //如果要代理 websockets,配置这个参数
pathRewrite: {
'^/api': '',
},
},
},
},
}
4 运行项目
yarn serve
在页中引入你的ant组件,现在已经改了主题色了