大家好，又见面了，我是你们的朋友全栈君。
首先我们来看一下文件的目录结构：
其中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)
})
- 进入element-starter文件夹，打开命令行界面，执行下面命令安装一下路由。
npm install vue-router --save
- 执行
npm run dev
执行完以后，在浏览器输入 http://127.0.0.1:8010/login， 会看到如下的界面：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/144005.html原文链接：https://javaforall.net
