vue3+typescript+element项目初始化

1.element自动导入

yarn add element-plus --save

// 按需自动导入

yarn add  unplugin-vue-components unplugin-auto-import -D

在vue.config.js 配置

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
publicPath:'./',
configureWebpack: {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
}

使用element-plus的命令式的组件的时候，仍然需要我们使用import进行导入，否则会报错

2.使用element-icon

yarn add @element-plus/icons --save

全局注册（新建plugins/icons.ts）

import * as components from "@element-plus/icons";
export default {
install: (app) => {
console.log(app.component)
for (const key in components) {
const componentConfig = components[key];
app.component(componentConfig.name, componentConfig);
}
},
};

main.ts中引入

import elementIcon from './plugins/icon';

app.use（elementIcon）

 

报错：Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘typeof import(）

解决方案：在tsconfig.json中增加配置

 3.使用less

yarn add less@2.7.3 less-loader@6.0.0 --save

全局使用定义的less变量文件

yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D

然后在vue.config.js添加以下配置

// vue.config.js

const path = require('path');
module.exports = {
// ...
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
// 引入需要全局加载的 less 文件
patterns: [path.resolve(__dirname, './src/styles/var.less')],
},
},
};