美文网首页
vuejs中添加页面的component(Webstorm) 2

vuejs中添加页面的component(Webstorm) 2

作者: 五道口的程序狐 | 来源:发表于2020-04-28 12:25 被阅读0次

    直接在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

    相关文章

      网友评论

          本文标题:vuejs中添加页面的component(Webstorm) 2

          本文链接:https://www.haomeiwen.com/subject/fddvwhtx.html