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

步骤如下：

一、安装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>

 这样引入element-plus，不是全局引入的，也就是说，每新增一个vue文件，当要使用element-plus的组件时，都要import相应的组件和样式，不但麻烦，还重复引入，一劳永逸的方法是：全局引入element-plus，编辑main.js，增加对element-plus的全局引入：

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

这样就可以去掉vue的script标签里import的写法了！

改为全局引入的写法以后，App.vue就可以像下面这样，直接去掉script里的那一段：

<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

 

 参考资料

https://www.npmjs.com/package/@element-plus/theme-chalk

posted @ 2023-09-06 17:08  jamstack  阅读(109)  评论(0)  编辑  收藏  举报