大家好,又见面了,我是你们的朋友全栈君。
首先我们来看一下文件的目录结构:
其中node_modules是你安装的依赖,也就是你执行完npm install命令安装的东西;assets可以存放一些公共的样式、图标等;components里放的是你写的组件;router放的是页面的路由;views里可以放你自己写的一些页面;App.vue是页面的入口;main.js是js文件的入口,你需要在这里面把你写的js引进去;static可以放一些图片、图标等。
之前的文章已经为大家讲解了如何搭建Vue Element框架,接下来教大家试着自己编写一个自己的页面。
<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>
<template>
<div id='app'>
Hello Vue!
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>``
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
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)
})
npm install vue-router --save
npm run dev
执行完以后,在浏览器输入 http://127.0.0.1:8010/login, 会看到如下的界面:
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/144005.html原文链接:https://javaforall.cn