vue项目的创建和vue中引入element-ui或element-plus

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

实现

本文主要介绍了vue2.x中如何引入element-ui

和vue3.x中如何引入element-plus

第一步 vue2项目或vue3项目自行选择。

vue create table-test

第二步 将项目放进 Visual Studio Code

没有Visual Studio Code可以自行下载code.visualstudio.com/

第三步vue2.x安装element-ui或vue.3x安装element-plus

vue2.x:

npm i element-ui -S

vue3.x

npm install element-plus --save

第四步 引入element

vue2.x在main.js引入element-ui或vue3.x在main.js引入element-plus

vue2.x

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

vue3.x

// main.ts/main.js

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")

测试

<!-- HelloWorld.vue -->

<template>

    <div class="hello">

        <el-row class="mb-4">

            <el-button>Default</el-button>

            <el-button type="primary">Primary</el-button>

            <el-button type="success">Success</el-button>

            <el-button type="info">Info</el-button>

            <el-button type="warning">Warning</el-button>

            <el-button type="danger">Danger</el-button>

            <el-button>中文</el-button>

        </el-row>

        <el-row class="mb-4">

            <el-button plain>Plain</el-button>

            <el-button type="primary" plain>Primary</el-button>

            <el-button type="success" plain>Success</el-button>

            <el-button type="info" plain>Info</el-button>

            <el-button type="warning" plain>Warning</el-button>

            <el-button type="danger" plain>Danger</el-button>

        </el-row>
        <el-row class="mb-4">

            <el-button round>Round</el-button>

            <el-button type="primary" round>Primary</el-button>

            <el-button type="success" round>Success</el-button>

            <el-button type="info" round>Info</el-button>

            <el-button type="warning" round>Warning</el-button>

            <el-button type="danger" round>Danger</el-button>

        </el-row>

    </div>

</template>

<script>

export default {

    name: "HelloWorld",

    props: {

        msg: String

    }

}

</script>

<style scoped></style>

运行

vue2.x

npm run dev

vue3.x

npm run serve

注意 Element-plus中的Icon需要单独引入