elementui组件库的使用

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
    }
    ]