创建一个ElementUI项目

1. 以默认配置创建新的vue-cli项目
2. 在项目下四个安装包:vue-router,vue-cookies,element-ui,axios

npm i vue-router vue-cookies element-ui axios

他们分别是：

• vue-router：路由插件
• vue-cookies：cookie读写插件
• element-ui：饿了么出品的一款UI框架
• axios：vue的ajax插件。先装上，以后会用到

3. 将ElementUI引入项目

//引入element-ui
import ElementUI from 'element-ui';
//引入样式
import 'element-ui/lib/theme-chalk/index.css';
//注册Element-UI
Vue.use(ElementUI)

好了，现在可以在项目中愉快的使用ElementUI了。 4. 测试一下eui是否可以使用了。 在模板中试着使用el-button组件。

<template>
  <div id="app">
    <el-button>默认1按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

elementui中文官网

使用elementUI制作一个登陆页面

我们把路由从main.js中剥离出来，单独做一个router.js文件。

import Vue from 'vue'
import Router from 'vue-router'
import Cookies from 'vue-cookies'
Vue.use(Cookies)
Vue.use(Router);

var router=new Router({
    mode:'history',
    routes:[
        {
            name:'login',
            path:'/login',
            component:()=> import('./components/login.vue') //login.vue要建立
        }
    ]
});

router.beforeEach((to, from, next) => {
    var path=to.path;
    if(path=='/login'){
        next();
    }else{
        var user = Vue.$cookies.get('user')
        if (user) {
          next();
        } else {
          //优化一下，要访问的路径添加到query当中
          next({path:'/login',query:{returnUrl:to.fullPath}})
        }
    }
})

export default router;

这样我们main.js就没有那么多乱七八糟的代码了。

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router.js'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>