vue3+TypeScript+element Plus

1. 首先需要我们的vue版本>3.0，版本低的同学可以先升级一下vue的版本号.

2. 然后我们通过命令行，初始化项目vue create vue3.0-demo.

3. 既然要用element-plus，那我们就需要安装，命令行为：yarn add element-plus -S.

4. 接下来我们分为全局安装和按需加载

① 全局安装
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// 首先在 main.ts 引入element-plus
import ElementUI from 'element-plus'
import 'element-plus/theme-chalk/index.css'

// 然后挂载在App上即可.
createApp(App).use(ElementUI).use(store).use(router).mount('#app')

// App.vue 页面上直接引入组件即可.



// 如果需要使用icon图标，再引入element-plus相应的图标即可.
import { Edit, Delete } from "@element-plus/icons-vue";
data() {
  return {
    data_num: 1,
  };
},
setup() {
  return {
    setup_num: 1,
    Edit,
    Delete,
  };
},

效果如下：

image.png

② 按需加载
2.1 按需加载我们需要使用额外的插件来导入要使用的组件。
2.2 按需加载分为自动导入和手动导入。

自动导入：
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

// 首先安装相关依赖
npm install unplugin-vue-components unplugin-auto-import -D

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 = {
  // outputDir: "./build",
  // 和webpack属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: "@/components"
      }
    },
    // 配置webpack按需自动引入element-plus
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })
    ]
  },
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    //这里的ip和端口是前端项目的;下面为需要跨域访问后端项目
    proxy: {
      '/api': {
        target: 'http://localhost:3000', //这里填入你要请求的接口的前缀
        changeOrigin: true,               //虚拟的站点需要更管origin
        secure: true,                     //是否https接口
        pathRewrite: {
          '^/api': ''                     //重写路径
        },
      }
    }
  }
}

// 然后再页面引入需要使用的组件即可.

    

效果如下：

image.png

手动导入：
第一种导入样式的方法：

// 我们在main.ts中直接引入全局的element-plus样式即可
import 'element-plus/theme-chalk/index.css'

第二章导入样式的方法：
需要安装 unplugin-element-plus 来导入样式.

// yarn 安装依赖
yarn add unplugin-element-plus -D

// 接下来在项目中，新建vite.config.js
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    [ElementPlus()]
  ],
})

// 然后在页面使用即可 App.vue
// html
I am ElButton
// js
import { ElButton } from "element-plus";
// 自行导入样式，用button就导入button.
import "element-plus/es/components/button/style/css";
export default defineComponent({
  components: {
    ElButton,
  }
})

页面效果：

image.png