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

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
 

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

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