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 成功之后控制台报错)
vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑的更多相关文章
- vue1.0和vue2.0的区别(一)
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板,不在支持片段代码 VUE1.0是: <template> <h3>我是组件</h3> ...
- vue1.0和vue2.0的区别(二)
这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...
- 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.变 ...
- vue1.0+vue2.0实现选项卡
通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...
- Vue1.x 到Vue2.0的一个变化
小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说 进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码 组件中模板: 之前: <templa ...
- vue1.0 与 Vue2.0的一些区别 及用法
1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- 用webpack2.0构建vue2.0超详细精简版
初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
npm init -y 初始化项目 //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...
随机推荐
- ubuntu安装带调试功能的bochs
①进入bochs官网下载源码包 说明 用安装包直接安装没有调试功能 下载源码包步骤 a.输入网址:http://bochs.sourceforge.net/ b.单击图中红色标注图标 c.单击图中红色 ...
- Jmeter之数据库性能测试
公司的**产品急待上线,但查询订单操作响应很慢,为了准确定位问题,特对几个大数据查询语句进行性能测试. 环境介绍:数据库用的MYSQL,采用分布式布置,本次单压测一台数据库服务器,查询待支付订单.待消 ...
- EventEmitter:nodeJs事件触发机制
Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列 Node.js 里面的许多对象都会分发事件:一个 net.Server 对象会在每次有新连接时触发一个事件, 一个 fs.r ...
- react-native-table-component, react-native 表格
使用 react-native-table-component, 加上 FlatList 组件,实现可以下拉刷新,上拉加载的demo import React, { Component } from ...
- nltk-贝叶斯分类器
本人小白一枚,专业统计,之前做过质量工程,现转行将近一年,开始记录我的学习过程及踩过的坑. 第一篇:用贝叶斯分类器(本文使用NLTK中的NaiveBayesClassifier)将5000多个样本进行 ...
- [C++] C语言及C++语言中包含的头文件名称,及作用
头文件主目录include 头文件目录中总共有32个.h头文件.其中主目录下有13个,asm子目录中有4个,linux子目录中有10个,sys子目录中有5个.这些头文件各自的功能如下,具体的作用和所包 ...
- Mysql表结构导出excel(含数据类型、字段备注注释)
SELECT "列名", "数据类型", "字段类型", "长度", "是否为空&quo ...
- EasyUIDataGrid去掉垂直滚动条
打开jquery.easyui.min.js 搜索到var _64f=wrap.width();这行代码 修改为ar _64f=wrap.width()+20;即可 另外在前台datagrid的hei ...
- C#使用File.Create()创建文件后资源被占用
由于文件被占用不能读写,所以报错“另一个程序正在使用此文件进程无法访问” 解决方法是在创建文件后立即Dispose掉 File.Create(path).Dispose();
- Java框架spring Boot学习笔记(五):Spring Boot操作MySQL数据库增、删、改、查
在pom.xml添加一下代码,添加操作MySQL的依赖jar包. <dependency> <groupId>org.springframework.boot</grou ...