Vue Element入门教程

全栈程序员-站长 • 2022年5月11日下午9:20 • 未分类 • 阅读 42

大家好，又见面了，我是你们的朋友全栈君。

首先我们来看一下文件的目录结构：
在这里插入图片描述
其中node_modules是你安装的依赖，也就是你执行完npm install命令安装的东西；assets可以存放一些公共的样式、图标等；components里放的是你写的组件；router放的是页面的路由；views里可以放你自己写的一些页面；App.vue是页面的入口；main.js是js文件的入口，你需要在这里面把你写的js引进去；static可以放一些图片、图标等。

之前的文章已经为大家讲解了如何搭建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文件。
代码如下所示：

     import Vue from "vue"
     import Login from"../views/Login/Index.vue"
     inport  Router from "vue-router"
     
     Vue.use(Router)
     //路由配置
        let routes = [
                      {path:'/login',
                       component:Login,
                       name:"登录页",
                       hidden:true},
                    ]
        const router = new Router({
           routes,
           mode:'history'
          })
         export default router

在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 router from './router/routes.js'

    //定义路由组件
   
    Vue.use(ElementUI)
    //定义路由
    new Vue({
      router,
      el: '#app',
      render: h => h(App)
    
    })