最近再写一个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 成功之后控制台报错)

vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑的更多相关文章

  1. vue1.0和vue2.0的区别(一)

    今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...

  2. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  3. vue1.0与vue2.0对于v-for的使用的区别

    vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...

  4. vue1.0+vue2.0实现选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...

  5. Vue1.x 到Vue2.0的一个变化

    小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说  进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码  组件中模板: 之前:     <templa ...

  6. vue1.0 与 Vue2.0的一些区别 及用法

    1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...

  7. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  8. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  9. 用webpack2.0构建vue2.0单文件组件超级详细精简实例

    npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...

随机推荐

  1. 啊哈算法第四章第二节解救小哈Java实现

    package corejava; public class FourTwo { static int m;//(m,n)为几行几列 static int n; static int p;//(p,q ...

  2. azkaban使用--邮件发送配置

    前置条件:你的服务器是可以连外网. 当任务是异步定时的,我们对于结果的感知往往没有手动跑脚本那么及时,但是如果任何一个任务运行失败可能都会引起一些列问题,在这个情况下消息通知就很重要了,azkaban ...

  3. FIN_WAIT_2状态解释

    关于网络设备的FIN_WAIT_2状态解释出处:http://hi.baidu.com/netdemon1981/blog/item/584bfbb2aeb1d4acd9335ad9.html 在HT ...

  4. websocket的子协议stomp协议

    stomp协议Spring实现 服务器注册EndPoint 用来与客户端建立websocket连接 websocket连接的建立应该与客户端与服务器之间的通道无关 jdk中 javax下的websoc ...

  5. lnmp环境一键安装

    lnmp一键安装命令: wget -c http://soft.vpser.net/lnmp/lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz & ...

  6. PHP提交订单,信息的传递

    今天被之前的同事问到订单这一块(他用的是Laraver)..."多个商品在同一个订单里,怎么将相同的商品放进一个分组"... 当时我和他的反应都是,array_push, arra ...

  7. 如何解决 快速点击多次触发的bug 期望快速点击只一次生效

    var lastClick; lockClick(){ var nowClick = new Date(); if (lastClick === undefined) { lastClick = no ...

  8. 每日笔记-redis的理解及相关应用

    原文链接:常见面试题 本文大纲与之类似,在其基础上加入了自己在实际项目中对部分知识点的理解 Q1:谈谈对redis的理解 Q2:谈谈实际应用中怎么用redis的 2.1 缓存 2.2 分布式锁 2.3 ...

  9. Mutex对象

    案例一 举一个例子,设计模式中的单例模式,记得当时做机房收费系统的时候就用的单例模式防止一个界面被实例多次,而Mutex对象能达到同样的效果,防止界面被实例化多次,起到控制线程的作用. 案例二 如果大 ...

  10. OpenTSDB/HBase的调优过程整理

    背景 过年前,寂寞哥给我三台机器,说搞个新的openTSDB集群.机器硬件是8核16G内存.3个146G磁盘做数据盘. 我说这太抠了,寂寞哥说之前的TSDB集群运行了两年,4台同样配置的机器,目前hd ...