H5初试问题小结

1. 开发工具WebStorm破解教程

https://blog.csdn.net/voke_/article/details/76418116

2. 如何运行GitHub上下载的demo

将代码目录导入WebStorm后,在控制台输入下面代码:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

在前两行运行后,浏览器就打开了一个本地版的的网页,在安装了Vue Devtools的Chrome扩展工具后就可以实时调试网页的内容了。(F12后,选择Vue即可,可以查看出实时错误)

3. 如何创建一个自己的H5

这里用到的工具是Vue + webpack + node的架构

3.1 搭建项目结构

安装好node和npm环境之后,安装webpack:npm install webpack -g;
安装vue-cli构建工具: npm install vue-cli -g;
创建vue项目: vue init webpack one; //这里 one 是项目名
进入文件目录:cd one
安装依赖项: npm install;
启动项目: npm run dev;

3.2 可能用到的扩展库

  • ESlint:差错工具,因为是初学者一开始这个地方很容易因为代码格式导致编译出错,我们可以先关闭该功能(其实这一步可以在构建的前三步骤时进行选择关闭该功能,但是如果已经手快按了确定键可以通过修改config/index.js 中代码useEslint: false进行关闭)
  • sass式样:webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要运行指令安装sass的依赖包
//在项目下,运行下列命令行
npm install --save-dev sass-loader 
//因为sass-loader依赖于node-sass,所以还要安装node-sass
npm install --save-dev node-sass</pre>
  • SuperAgent:强大并且可读性很好的轻量级ajaxAPI,是一个关于HTTP方面的一个库,而且它可以将链式写法玩的出神入化。安装通过npm install --save superagent superagent-jsonp

3.3 遇到的问题:

  • [Vue warn]: Error in created hook:它是在生命周期钩子函数错误吧,就是一个vue实例被生成后调用这个函数,或许你是在生命周期之前调用了为定义的函数、方法、对象、对象属性等。没有import就使用了该模块里内函数、内容等可能会导致该问题
  • Uncaught ReferenceError: superagentCallback*** is not defined:在低版本上没有遇到该问题,根本原因是callback已经被浏览器回收了,通过设置timeout时间该问题可以解决.use(jsonp({timeout: 10000}))

新建server文件夹,存放后端代码,再进入scr目录,新建pages文件夹;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容