element新手教程一：创建Element项目

一、提前准备

• 安装nodejs
• 安装vue-cli(3以上)

  npm install -g @vue/cli

二、创建一个项目

vue create "项目名称"
# 比如创建test
vue create test

现在已经创建好了，即可运行项目：

$ cd test
$ npm run serve

三、安装element-plus

npm install element-plus --save

四、快速开始

1、完整引入所有组件

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

2、修改App.vue

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

五、引用Vue Router

你可以以项目插件的形式添加Vue Router。CLI 可以生成上述代码及两个示例路由。它也会覆盖你的App.vue，因此请确保在项目中运行以下命令之前备份这个文件：

vue add router