创建vue element-ui 项目

1. 用vue ui 界面创建项目

• 详情

• 预设

• 功能

功能选择：Babel， Router， Linter/Formater, 使用配置文件

• 配置

• 保存为新的预设

2. 配置项目

• 添加element ui 插件

3. 启动项目

4. 清理模板文件，并自定义自己的项目文件

• 入口文件 main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";  //路由
import "./plugins/element.js"; // element ui 插件引入

Vue.config.productionTip = false;

new Vue({
  router, // 这里的路由一定要在这里引入
  render: function(h) {
    return h(App);
  }
}).$mount("#app");

• App.vue

<template>
  <div id="app">
    <router-view></router-view> // 路由里面定义页面都会再这里渲染
  </div>
</template>

<script>

export default {
  name: "app",
};
</script>

<style>
</style>

• 删除模板中组件，创建自己的组件Login.vue

<template>
    <div>
        登录组件
    </div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

• 修改路由文件 router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../components/Login" // 引入自己的登录组件

Vue.use(VueRouter);

const routes = [
  {
    path: '/', name: 'index', redirect: '/login'  // 把根路径跳转到 /login
  },
  {
    path: '/login', name: 'login', component: Login
  }
];

const router = new VueRouter({
  routes
});

export default router;