elementui组件库的使用

最新推荐文章于 2025-08-11 14:24:12 发布

原创最新推荐文章于 2025-08-11 14:24:12 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Vue CLI搭建前端服务，并通过具体步骤指导如何安装及配置Element UI，实现按钮和对话框组件的使用。此外，还提供了设置代理的方法，确保在不同网络环境下项目的顺利构建。

1.先搭建前端服务

(1)创建一个static web project

(2) 安装 npm install -g vue-cli

(3) vue init webpack 项目名

(4)cd 项目名

npm run dev 运行服务

如果上面创建前端服务出错，可以设置代理进行搭建
如何去设置代理:

npm config set proxy=null

npm config set registry https://registry.npm.taobao.org

2.elementui使用

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
(1)安装

npm i element-ui -S

(2)引入elementui 在 main.js
在main.js总引入相应的文件

import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式

(3)在vue页面使用elementui的组件
具体相应的组件直接百度elementui
例：

<div id="app">
      <el-button @click="visible = true">Button</el-button>
      <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
      </el-dialog>
    </div>
<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        visible:false
      }
    }
  }
</script>

index.js中

import Element from '@/components/01_elementui'

export default new Router({
  //创建路由器
  routes: [
   
    {
      //跳转到该路径,这个路径是自己设置的
      path: '/element',
      //name的名字可以随意写
      name: 'element',
      //获得相应的组件
      component: Element
    }
    ]