vuejs中添加页面的component（Webstorm） 2

直接在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
    }
  ]
});

就不用加#了

router相关可以看https://my.oschina.net/u/3912828/blog/2963179