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

Song119 次浏览0个评论2021年08月26日
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
请登录后评论
    当前暂无评价,快来发表您的观点吧...
    公告提示
    本站主要用于学习交流Laravel技术,分享Laravel优秀案例;同时非常欢迎大家投稿哦!如果有招聘信息也可以联系我我帮忙发布哦!