一、创建Vue3 项目
使用Vite 创建项目
(1)执行 npm create vite@latest 命令
如果出现这个情况则直接输入y(这一步不一定存在),如下图
然后直接按回车键,得到下图:
输入项目的名称,再按回车键
通过上下键选择相应的framework,这里选择Vue,按回车键
后面都是跟上面一样,通过上下键选择相应的选项,然后按回车即可
出现下图,则说明项目创建成功了
按照提示,一步一步执行命令
命令执行完后,说明项目已经启动成功了,可直接再浏览器中访问图中的 http://localhost:5173/
二、整合Element Plus
(1)安装
npm install element-plus --save
或
pnpm install element-plus
(2)按需导入
① 安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
②修改vite.config.js,修改后代码如下
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
修改前的代码:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
(3)校验是否整合成功
① 修改App.vue 文件
修改前代码:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
修改后的代码:
<script setup>
</script>
<template>
<el-button type="primary">按钮</el-button>
</template>
<style scoped>
</style>
(4)运行结果
整合前运行结果
整合后运行结果: