Vue2+VueRouter2+webpack+Axios 使用element-ui

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/daily886/article/details/81449689

Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构

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

官网 http://element-cn.eleme.io/#/zh-CN/component/installation

切换到项目根目录，运行npm安装
 

npm i element-ui -D

vue中使用

修改路由 src/router/index.js 的代码

import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import HelloWorld from '@/components/HelloWorld'
import Element from '@/components/Element'

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/element',
      component: Element
    }
  ]
})

添加视图组件 src/components/Element.vue
 

<template>
  <div>
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world" >
      <p>Try Element</p>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return { visible: false }
  }
}
</script>

运行 npm run dev 命令开启服务器

浏览器上输入： http://localhost:8081/#/element  ，效果如下