首页 > 其他分享 >Vue-ElementUI

Vue-ElementUI

时间:2023-01-15 15:33:35浏览次数:65  
标签:Vue ElementUI app yarn element vue plus import

前言

注意!!!
vue2.x使用element-ui,
vue3.x使用element-plus,
ElementUI网站:https://element.eleme.cn/#/zh-CN/component/installation

yarn指令

npm和yarn命令对比

新建项目

yarn add vue-router -D
yarn add element-plus -S
yarn
yarn add sass-loader node-sass -D
npm run dev

第一个element

挂载element

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

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

放入组件

打开网址:https://element.eleme.cn/#/zh-CN/component/installation
随意选择一个组件

//App.vue
<template>
  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</template>
<script>
export default {
  data() {
    return {
      num: 1
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

效果:

标签:Vue,ElementUI,app,yarn,element,vue,plus,import
From: https://www.cnblogs.com/cnleika/p/17053115.html

相关文章