Vue Element入门教程

之前的文章已经为大家讲解了如何搭建Vue Element框架，接下来教大家试着自己编写一个自己的页面。

• 这个页面所对应的代码，为src目录下的App.vue文件，我们先把显示图片和按钮这几行行注释掉。
  注意：不能注释掉 <router-view></router-view>这一行。

<template>
<!-- <img src="./assets/logo.png">
<div>
  <el-button @click="startHacking">Start</el-button>
</div> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: center;
}
</style>

• src目录下新建一个views文件夹，views文件夹里建立一个Login文件夹，再在Login文件夹里建一个Index.vue文件。
  代码如下所示：

   <template>
      <div id='app'>
         Hello Vue!
      </div>    
    </template>
    
    <script>
    export default {
    }
    </script>
    
    <style>
    </style>``

• src目录下建一个router文件夹，再在router文件夹里建一个routes.js文件。
  代码如下所示：

     //导入你建的Login
     import Login from"../views/Login/Index.vue"
     //路由配置
        let routes = [{path:'/login',
                       component:Login,
                       name:"登录页",
                       hidden:true},
                    ]
        export default routes;

• 在src根目录下修改一下main.js文件：

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue'
    import vueRouter from 'vue-router'
    import routes from './router/routes.js'
    Vue.use(vueRouter)
    //定义路由组件
    const router = new vueRouter({
       routes,
       mode:'history'
    })
    
    Vue.use(ElementUI)
    //定义路由
    new Vue({
      router,
      el: '#app',
      render: h => h(App)
    
    })

• 进入element-starter文件夹，打开命令行界面，执行下面命令安装一下路由。

    npm install vue-router --save

• 执行

    npm run dev

执行完以后，在浏览器输入 http://127.0.0.1:8010/login， 会看到如下的界面：