526互联

使用vite创建vue程序，同时引入element-plus

发布时间 2023-09-06 17:15:27作者: jamstack

步骤如下：

一、安装vite

npm install -g create-vite

 

二、创建vue程序，不需要先创建好空的文件夹，直接执行下面的代码即可

create-vite test --template vue

 

三、使用npm引入element-plus

npm install element-plus

 

四、为element-plus引入名为theme-chalk的样式

npm i @element-plus/theme-chalk

 

五、编辑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" />

  <div>
    <el-button type="primary">Element Plus Button</el-button>
  </div>

</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>
import { ElButton } from 'element-plus';
import '@element-plus/theme-chalk/dist/index.css'

export default {
  components: {
    ElButton
  }
}
</script>

 

六、启动test项目

cd test && npm run dev