vue3+typescript

最新推荐文章于 2024-07-20 09:47:20 发布

加油鸭老王

最新推荐文章于 2024-07-20 09:47:20 发布

阅读量986

点赞数

分类专栏： Vue 文章标签： Vue CLI Element Plus UI框架按需引入项目创建

本文链接：https://blog.csdn.net/weixin_42400404/article/details/127499201

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1：安装脚手架

npm install -g @vue/vli

2：创建项目

vue create 项目名称

通过@vue/vli 创建项目，node版本过低的话，在使用 vue create 创建项目的时候会有提示，最好提前把node升级到 12 以上版本。

3：UI框架

Element-plus 官网

3.1 完整引入可以查看官网案例

3.2 按需引入如下

在vue.config.js中配置代码

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

configureWebpack:{

    plugins: [

      AutoImport({

        resolvers: [ElementPlusResolver()],

      }),

      Components({

        resolvers: [ElementPlusResolver()],

      }),

    ],

  }

完整代码

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