零基础学习weex(二)Vue2.0
2017-04-05 本文已影响113人
sweetpf
<pre>
本篇内容:
从Vue1到Vue2
基础知识
</pre>
1、从Vue1到Vue2
首先,先解决上一章出现的坑。官网是提供解决方案的有效途径,既然不能用前端的开发模式在sublime编辑,那就选择回归weex官方教程的怀抱吧。在上一章已经搭建了weex的环境,直接开始创建weex工程。
初始化 Weex 项目
<pre>weex init weexProject</pre>
弹出提示输入项目名称,输入weexProject,目录中就创建了一个使用 Weex 和 Vue 的模板项目。先cd到weexProject根目录下,看一下有那些文件生成吧:
weex项目目录.jpg
打开每个文件,看一下里面的内容,猜测作用,这是我学习的过程。😁有两个重要的文件package.json和webpack.config.js,先介绍下package.json。
packageJson.jpg
- 上面的一部分是项目相关信息
- scripts节点是已经配置好了几个常用的 npm script(npm将在下一章节详细讨论)
- dependencies节点是项目发布的依赖
- devDependencies 节点是项目开发工具
开发
- 通过 npm install 安装项目依赖
- 运行 npm run dev 和 npm run serve 开启watch 模式和静态服务器
- 打开浏览器,进入 http://localhost:8080/index.html 即可看到 weex h5 页面。
- 在第一章已经介绍WeexPlayground,扫描二维码,调试。
至此,从Vue1顺利转移到Vue2。
基础知识
后面的学习,我一边了解基于iOS的WeexSDK,一边熟悉Vue基础,当然这些知识需要自己去充实,了解,在此贴上链接。
- weex教程环境搭建,SDK集成,工具介绍等
- weex手册此部分需要学习weex支持的通用样式、通用事件、flex布局、内建组件、内建模块等;另一方面了解SDK中APIs以及降级方案。这个链接要天天看,时时看,毕竟这是官方文档
- JavaScript当然JavaScript基础也是很重要,如何引入开源库,如何接收数据,如何高效处理CSS,都离不了JavaScript基础
- CSS手册这块只是稍微了解下,毕竟Weex支持的少的可怜,目前开发中就遇到此问题
- CSS手册
- flex布局相当重要,布局核心
- weex社区坑太多,没事多逛逛
- Vue英文
- Vue中文
下一章,开始了解Weex工程、webPack、npm、ESLint、Devtools等。