vue3+typescript+element 项目初始化

1.element-plus自动导入

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.使用scss

yarn add node-sass@^4.12.0 sass-loader@^8.0.2 -D 

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

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')],
    },
  },
};