直接在components目录下，点击File-New-Vue Component就可以创建。
之后需要修改router/index.js里面的内容，将刚才那个新建的component引入进去，并且加上对应的router
一个vue的例子（需要先安装elementUI）（名字叫做Index.vue）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <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里面加上，比如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 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 就可以了，要记得有个#！
如果改成：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/classes',
name: 'Classes',
component: Classes
}
]
});
|
就不用加#了
router相关可以看https://my.oschina.net/u/3912828/blog/2963179