直接在components目录下,点击File-New-Vue Component就可以创建。
之后需要修改router/index.js里面的内容,将刚才那个新建的component引入进去,并且加上对应的router
一个vue的例子(需要先安装elementUI)(名字叫做Index.vue)
<template>
<div>
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'Index',
data: function () {
return { visible: false };
}
};
</script>
<style scoped>
</style>
然后router里面加上,比如:
import Vue from 'vue';
import Router from 'vue-router';
import Index from '@/components/Index';
import Classes from '@/components/Classes';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/classes',
name: 'Classes',
component: Classes
}
]
});
然后默认访问http://127.0.0.1:8080/#/classes 就可以了,要记得有个#!
如果改成:
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/classes',
name: 'Classes',
component: Classes
}
]
});
就不用加#了
网友评论