ElementPlus 组件库

步骤

• 安装生产依赖包npm i element-plus
• 安装自动按需引入所需要的开发依赖npm install -D unplugin-vue-components unplugin-auto-import
• 在 vue.config.js 中做按需自动引入配置

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

• 在自己的页面组件中直接使用 ElementPlus 提供的组件

normalize.css 重置项目样式

• 安装：npm i normalize.css
• main.js 中引入 import 'normalize.css' //重置样式

依赖包类型

开发依赖

• devDependencies 只有在开发环境中才需要使用的依赖

npm i 包名 --save-dev   记录为开发依赖
简写
npm i 包名 -D

生产依赖

• dependencies 项目开发完毕后依旧需要使用的依赖

npm i 包名 --save   记录为生产依赖
简写
npm i 包名 -S