使用vue搭建应用二加入element

安装使用 element

1.安装

yarn add element-ui

2.使用

（1）在 main.js 中引入 element

main.js 为修改

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

render: h => h(App)

})

（2）简单应用

修改 src/components/HelloWorld.vue

重新启动，预览 http://localhost:8080，变为

（3）修改路由

将src下的components改为views，在views下添加页面Login.vue、Home.vue、404.vue

Login.vue

View Code

Home.vue

View Code

404.vue

View Code

修改src/router/index.js，添加对应的路由

import Vue from 'vue'

import Router from 'vue-router'

import Login from '@/views/Login'

import Home from '@/views/Home'

import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'Home',

component: Home

}, {

path: '/login',

name: 'Login',

component: Login

}

, {

path: '/404',

name: 'NotFound',

component: NotFound

}

]

})

重新启动服务

http://localhost:8080/#/

 http://localhost:8080/#/login显示Login页面

精彩链接