WebStorm使用Element组件库

1. webstorm使用vue文件

在Test.vue文件中书写模板,并暴露对外接口
在这里插入图片描述

<script>
export default {
  name: "Test"
}
</script>

<template>
  <div>
    <h1>Hello Vue</h1>
  </div>
</template>

<style scoped>

</style>

在App.vue中使用

此时main.js不变

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

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

页面效果：

2. 首先需要安装Element Plus

参考链接

安装命令如下：
```
npm install element-plus --save
```
在webstorm命令窗口安装：
安装成功可以在package.json中查看是否安装成功;

2. 项目完成引入-以日历为例

需要修改main.js文件：导入并使用ElementPlus插件

在这里插入图片描述

import './assets/main.css'

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

import { createApp } from 'vue'
import App from './App.vue'

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

在calendar.vue直接使用官方给出的模板在这里插入图片描述

<script>
/*export default {
  name: "calendar"
}*/
export default {
  data() {
    return {
      value: new Date()
    }
  }
}
</script>

<template>
  <el-calendar v-model="value"></el-calendar>
</template>

<style scoped>

</style>

在App.vue中使用后calendar.vue 在这里插入图片描述

	<template>
	  <div>
	<!--    <test></test>-->
	    <calendar></calendar>
	  </div>
	</template>
	
	<script>
	import Test from "@/components/Test.vue";
	import Calendar from "@/components/calendar.vue";
	
	
	export default {
	  name: 'App',
	  components: {
	    Calendar,
	    // Test
	  }
	}
	</script>
	
	<style lang="scss" scoped>
	
	</style>