zoukankan      html  css  js  c++  java
  • vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来。理解有误再来修改。

    路由问题

    之前的路由是写在app.vue里边,而2.0的路由直接有个router文件夹的,路由的信息都在这里面的index.js文件里面

    import Vue from 'vue';
    import Router from 'vue-router';
    import Hello from '@/components/Hello';
    
    Vue.use(Router);
    
    export default new Router({
      routes: [
        {
          path: '/',
          components: {
            default: Hello
          }
        }
      ]
    });

    如果我们想在页面中再引入一个组件,就可以直接在这个path目录下写,比如我们再加个header组件

    import Vue from 'vue';
    import Router from 'vue-router';
    import Hello from '@/components/Hello';
    // 导入组件
    import Header from '@/components/header/header';
    
    Vue.use(Router);
    
    export default new Router({
      routes: [
        {
          path: '/',
          components: {
            default: Hello,
            // 注册组件,命名为Header
            Header: Header
          }
        }
      ]
    });

    然后在App.vue文件内写入就好了

    <router-view name="Header"></router-view>

    npm run dev 报的错

    1.找不到模块
    Module build failed: Error: Cannot find module '模块名'
    安装对应模块
    npm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
    npm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)
  • 相关阅读:
    Java学习-sgg-day09-20200425
    Java学习-sgg-day08-20200423
    C#集合
    C#类型转换
    HTML+CSS注意知识点
    easyUI学习(1)
    sort方法根据数组中对象的某一个属性值进行排序
    Vue Router 知识点梳理(二)
    Vue Router 知识点梳理
    浏览器加载、解析、渲染的过程
  • 原文地址:https://www.cnblogs.com/ningningwang/p/7572205.html
Copyright © 2011-2022 走看看