热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

(转)Vue2.0入门实例注意事项

https:www.cnblogs.comliyujun1988p7078235.htmlVue2.0入门实例注意事项由于vue2.0导致其他相关编译打

https://www.cnblogs.com/liyujun1988/p/7078235.html

Vue2.0入门实例注意事项
 

由于 vue2.0 导致其他相关编译打包工具没更新导致

解决办法: 请运行以下命令

1
npm update -g

报错

1
2
3
4
5
6
7
8
Error: Cannot find module  'opn'
Error: Cannot find module  'webpack-dev-middleware'
Error: Cannot find module  'express'
Error: Cannot find module  'compression'
Error: Cannot find module  'sockjs'
Error: Cannot find module  'spdy'
Error: Cannot find module  'http-proxy-middleware'
Error: Cannot find module  'serve-index'

如果你用的是老版本的 vue-cli 还可能报其他错误,需要更新一下 vue-cli

1
npm update vue-cli

安装一下这个依赖到工程开发环境

1
2
3
4
5
6
7
8
9
cnpm install opn --save-dev
cnpm install webpack-dev-middleware --save-dev
cnpm install express --save-dev
cnpm install compression --save-dev
cnpm install sockjs --save-dev
cnpm install spdy --save-dev
cnpm install http-proxy-middleware --save-dev
cnpm install serve-index --save-dev
cnpm install connect-history-api-fallback --save-dev

再启动项目,报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ERROR  in  ./src/main.js
Module build failed: Error: Cannot find module  'babel-runtime/helpers/typeof'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require ( internal /module.js:20:19)
at Object. (/Volumes/MacStorage/Coding/Web/vue-test/node_modules/.6.17.0@babel-core/lib/transformation/file/index.js:6:16)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
@ multi main
ERROR  in  ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js
Module not found: Error: Can 't resolve ' sockjs-client ' in ' /Volumes/MacStorage/Coding/Web/vue-test/node_modules/.2.1.0-beta.8@webpack-dev-server/client'
@ ./~/.2.1.0-beta.8@webpack-dev-server/client/socket.js 1:13-37
@ ./~/.2.1.0-beta.8@webpack-dev-server/client?http: //localhost:8080
@ multi main

安装一下 babel-runtime

1
cnpm install babel-helpers --save-dev

启动项目,再次报错

1
2
3
4
5
6
Module build failed: Error: Cannot find module  'babel-helpers'
Module build failed: Error: Cannot find module  'babel-traverse'
Module build failed: Error: Cannot find module  'json5'
Module build failed: Error: Cannot find module  'babel-generator'
Module build failed: Error: Cannot find module  'detect-indent'
Module build failed: Error: Cannot find module  'jsesc'

找不到依赖那就再安装一下

1
2
3
cnpm install babel-helpers --save-dev
cnpm install babel-traverse --save-dev
cnpm install json5 --save-dev

遇到

1
Module build failed: Error: Cannot find module  '模块名'

那就安装

1
2
3
cnpm install 模块名 --save-dev(关于环境的,表现为npm run dev 启动不了)
cnpm install 模块名 --save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)
比如escape- string -regexp、strip-ansi、has-ansi、 is -finite、emojis-list

 写示例时注意:

一、一个组件下只能有一个并列的 div,可以这么写,所以复制官网示例的时候只要复制 div 里面的内容就好。

二、数据要写在 return 里面而不是像文档那样子写

 

 

Android

推荐阅读
  • 大家好,我是李白。本文将分享一个从零开始的全栈项目,涵盖了设计、前端、后端和服务端的全面学习过程。通过这个项目,我希望能够帮助初学者更好地理解和掌握全栈开发的技术栈。 ... [详细]
  • NPM 脚本 'start' 退出,未显示 create-react-app 服务器正在监听请求
    遇到 NPM 脚本 'start' 退出且未显示 create-react-app 服务器正在监听请求的问题,请求帮助。 ... [详细]
  • ABP框架是ASP.NET Boilerplate的简称,它不仅是一个开源且文档丰富的应用程序框架,还提供了一套基于领域驱动设计(DDD)的最佳实践架构模型。本文将详细介绍ABP框架的特点、项目结构及其在Web API优先架构中的应用。 ... [详细]
  • MySQL 5.7 服务端在 Windows 上的安装与配置
    本文详细介绍了在 Windows 系统上安装和配置 MySQL 5.7 服务端的方法,包括 my.ini 配置文件的设置、初始化数据库、启动服务以及设置用户权限等步骤。 ... [详细]
  • 在尝试将 mysqldump 文件加载到新的 MySQL 服务器时,遇到因使用保留关键字 'table' 导致的语法错误。 ... [详细]
  • 本文介绍了如何在 Spring Boot 项目中使用 spring-boot-starter-quartz 组件实现定时任务,并将 cron 表达式存储在数据库中,以便动态调整任务执行频率。 ... [详细]
  • 使用ArcGIS for Java和Flex浏览自定义ArcGIS Server 9.3地图
    本文介绍了如何在Flex应用程序中实现浏览自定义ArcGIS Server 9.3发布的地图。这是一个基本的入门示例,适用于初学者。 ... [详细]
  • Linux CentOS 7 安装PostgreSQL 9.5.17 (源码编译)
    近日需要将PostgreSQL数据库从Windows中迁移到Linux中,LinuxCentOS7安装PostgreSQL9.5.17安装过程特此记录。安装环境&#x ... [详细]
  • MicrosoftDeploymentToolkit2010部署培训实验手册V1.0目录实验环境说明3实验环境虚拟机使用信息3注意:4实验手册正文说 ... [详细]
  • 深入解析 Lifecycle 的实现原理
    本文将详细介绍 Android Jetpack 中 Lifecycle 组件的实现原理,帮助开发者更好地理解和使用 Lifecycle,避免常见的内存泄漏问题。 ... [详细]
  • 本文将详细介绍如何注册码云账号、配置SSH公钥、安装必要的开发工具,并逐步讲解如何下载、编译 HarmonyOS 2.0 源码。通过本文,您将能够顺利完成 HarmonyOS 2.0 的环境搭建和源码编译。 ... [详细]
  • Eclipse中解决JDK源码断点调试失效的问题 ... [详细]
  • 本文探讨了 Kafka 集群的高效部署与优化策略。首先介绍了 Kafka 的下载与安装步骤,包括从官方网站获取最新版本的压缩包并进行解压。随后详细讨论了集群配置的最佳实践,涵盖节点选择、网络优化和性能调优等方面,旨在提升系统的稳定性和处理能力。此外,还提供了常见的故障排查方法和监控方案,帮助运维人员更好地管理和维护 Kafka 集群。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • Netty框架中运用Protobuf实现高效通信协议
    在Netty框架中,通过引入Protobuf来实现高效的通信协议。为了使用Protobuf,需要先准备好环境,包括下载并安装Protobuf的代码生成器`protoc`以及相应的源码包。具体资源可从官方下载页面获取,确保版本兼容性以充分发挥其性能优势。此外,配置好开发环境后,可以通过定义`.proto`文件来自动生成Java类,从而简化数据序列化和反序列化的操作,提高通信效率。 ... [详细]
author-avatar
快活林2007
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有