weex入门学习总结——新建一个weex项目和安装sublime text3及其插件
2016-12-16 17:16
543 查看
weex是什么就不用多说了,相信大家都百度,一大堆。
1.Weex
安装Node.js:
node.js需要4.0+
百度云下载地址http://pan.baidu.com/s/1o84g6c6
官网下载地址https://nodejs.org/en/
安装教程请看这里http://www.shouce.ren/api/view/a/3461
2.安装
weex-toolkit
1.打开CMD工具现在安装weex-toolkit,这是weex的集成环境。
[html] view
plain copy
print?
输入:npm install -g weex-toolkit
[html] view
plain copy
print?
2.查看weex的版本输入:weex --version
[html] view
plain copy
print?
3.查看一下weex的指令输入:weex 这里你就安装好weex的环境了!
2.然后使用cmd进入Demo这个文件夹,或者在这个文件夹下直接打开cmd(按住shift键同时点击鼠标右键选择【在此处打开命令窗口】)
3.输入:weex init
它会出现prompt:Project
Name:<weex-test> 按回车也可自定义 (这个是让你设置创建项目的名称 如果直接按回车就是默认文件夹的名字)
4.会出现下面这几个文件
file:.gitignore
created.
file: README.md
created.
file: index.html
created.
file: package.json
created.
file: src/main.we
created.
file: webpack.config.js
created.
5.接着安装依赖输入
npm install
6.输入:npm run build 同步在dist目录下创建main.js文件
7.输入:npm run serve 开启一个端口8080的服务
接着打开浏览器在地址栏输入:localhost:8080就可以出现效果了
还有一种方式打开这个.we文件看到效果就是在
src文件夹下面开启cmd输入:weex Demo.we(就是你项目名)就会自动浏览器渲染效果
还可以在手机上显示这个效果:
进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!这个应用在这里下载:http://alibaba.github.io/weex/download.html
8.再在这个目录下打开cmd 输入:npm run dev 这个是开启监听.we文件的改动
也就是说我们在src目录下:用记事本(其他编译软件也可以)打开.we文件把那个HelloWeex 改成Helloword接着刷新网页就会改变文本;手机上刷新也会跟着改变!
解压直接下一步,下一步安装完成。
我安装的插件有:1.Package Control 下载地址:https://packagecontrol.io/installation
为了方便开发人员快速安装需要的插件
下载完了复制 打开SublimeText3点击Preferences-->BrowsePackages-->注意这里只有User退回到Sublimi Text 3目录下进入-->
Installed Packages 粘贴就可了.
查看是否安装成功:点击Preferences-->Package Settings这时就会看到Package Control这个选项 恭喜安装成功。
2.SublimeCodeIntel 代码提示的插件
打开SublimeText3 按住Ctrl+Shift+P 就会出现一个框框 输入:Pain 选择Package Control:Inatall Package 也会出现一个输入框
输入:SublimeCodeIntel
回车坐等安装成功 看做下提示
3.HTML-CSS-JS Prettify代码的格式化插件 安装方法跟上面一样
用法:点击右键就会出现HTML-CSS-JS Prettify 进入选第一个Prettif Code
这时候会报一个找不到nodejs程序 点击进入把那个nodejs路劲换成你自己的路径就好了!
4.ColorPicker 这个插件可以在编译器中取色
安装同上
用法:按住Ctrl+Shift+C 就可以了
5.All Autocomplete
插件会搜索所有打开的文件来寻找匹配的提示词。安装同上
如果你觉得不够用可以自行安装
weex 源代码的文件格式为
格式,默认在文本编辑器中不支持语法高亮,代码看起来很不舒服。不过可以使用
的语法高亮来支持
第一步:下载
Weex 语法高亮脚本地址:https://pan.baidu.com/s/1mibEtFa (不是我自己的)
第二步:打开
Sublime Text,依次点击 Tools -> Developer -> New Syntax,新建一个语法文件,把下载下来的文件打开复制内容覆盖原有的内容,并保存,文件名和扩展名为
第三步:开启weex语法高亮
点击View --> Syntax-->we Component (这个选项在最下面点击先下箭头往下翻)
这时候就大工告成了。
5.最后就是学习weex的学习资源了
weex的中文文档http://www.shouce.ren/api/view/a/11586
weex社区http://weex.help/
weex官网http://alibaba.github.io/weex/download.html
有关weex学习的网址: 1.https://github.com/alibaba/weex
2.weex你需要知道的事 命令行工具:weex-toolkit https://github.com/weexteam/weex-toolkit
调试工具: weex-devtool https://github.com/weexteam/weex-devtool
3.WEEX SDK集成到工程(Integrate to Android) :https://github.com/weexteam/article/issues/25
有图的:https://vczero.github.io/weex-learning/android/003_HelloWorldBuildInWeex.html
4.weex创建项目--工程构建--官方示例文件解析:https://github.com/vczero/weex-learning
基本没有了!我也是刚刚才接触weex的有什么错误的地方请留言交流!希望大家可以一起交流互相学习!
转自:http://blog.csdn.net/u014592907/article/details/53465773
直接上:1.weex的环境的搭建
1.Weex
是使用Node.js
开发构建的,所以需要我们的电脑上安装有 Node.js。
安装Node.js:node.js需要4.0+
百度云下载地址http://pan.baidu.com/s/1o84g6c6
官网下载地址https://nodejs.org/en/
安装教程请看这里http://www.shouce.ren/api/view/a/3461
2.安装
weex-toolkit
1.打开CMD工具现在安装weex-toolkit,这是weex的集成环境。
[html] view
plain copy
print?
输入:npm install -g weex-toolkit
[html] view
plain copy
print?
2.查看weex的版本输入:weex --version
[html] view
plain copy
print?
3.查看一下weex的指令输入:weex 这里你就安装好weex的环境了!
2.我们来创建第一个weex的项目
1.首先建一个文件夹如:Demo2.然后使用cmd进入Demo这个文件夹,或者在这个文件夹下直接打开cmd(按住shift键同时点击鼠标右键选择【在此处打开命令窗口】)
3.输入:weex init
它会出现prompt:Project
Name:<weex-test> 按回车也可自定义 (这个是让你设置创建项目的名称 如果直接按回车就是默认文件夹的名字)
4.会出现下面这几个文件
file:.gitignore
created.
file: README.md
created.
file: index.html
created.
file: package.json
created.
file: src/main.we
created.
file: webpack.config.js
created.
5.接着安装依赖输入
npm install
6.输入:npm run build 同步在dist目录下创建main.js文件
7.输入:npm run serve 开启一个端口8080的服务
接着打开浏览器在地址栏输入:localhost:8080就可以出现效果了
还有一种方式打开这个.we文件看到效果就是在
src文件夹下面开启cmd输入:weex Demo.we(就是你项目名)就会自动浏览器渲染效果
还可以在手机上显示这个效果:
进入src目录下会看到一个.we文件(如文件是:text.we),这个就是你的Weex程序
然后按住Shift+鼠标右键出现:在此处打开命令窗口:输入weex xxxxxxx(文件的全称包括扩展名) --qr 如:(weex text.we --qr)
就会生成一个很大的二维码:然后用WEEX应用扫描就可以看到效果了!这个应用在这里下载:http://alibaba.github.io/weex/download.html
8.再在这个目录下打开cmd 输入:npm run dev 这个是开启监听.we文件的改动
也就是说我们在src目录下:用记事本(其他编译软件也可以)打开.we文件把那个HelloWeex 改成Helloword接着刷新网页就会改变文本;手机上刷新也会跟着改变!
3.接着介绍SublimeText3这款编译软件的安装以及插件的安装
去官网下载:http://www.sublimetext.com/3解压直接下一步,下一步安装完成。
我安装的插件有:1.Package Control 下载地址:https://packagecontrol.io/installation
为了方便开发人员快速安装需要的插件
下载完了复制 打开SublimeText3点击Preferences-->BrowsePackages-->注意这里只有User退回到Sublimi Text 3目录下进入-->
Installed Packages 粘贴就可了.
查看是否安装成功:点击Preferences-->Package Settings这时就会看到Package Control这个选项 恭喜安装成功。
2.SublimeCodeIntel 代码提示的插件
打开SublimeText3 按住Ctrl+Shift+P 就会出现一个框框 输入:Pain 选择Package Control:Inatall Package 也会出现一个输入框
输入:SublimeCodeIntel
回车坐等安装成功 看做下提示
3.HTML-CSS-JS Prettify代码的格式化插件 安装方法跟上面一样
用法:点击右键就会出现HTML-CSS-JS Prettify 进入选第一个Prettif Code
这时候会报一个找不到nodejs程序 点击进入把那个nodejs路劲换成你自己的路径就好了!
4.ColorPicker 这个插件可以在编译器中取色
安装同上
用法:按住Ctrl+Shift+C 就可以了
5.All Autocomplete
插件会搜索所有打开的文件来寻找匹配的提示词。安装同上
如果你觉得不够用可以自行安装
4.显示weex语法高亮设置:
由于weex 源代码的文件格式为
.we
格式,默认在文本编辑器中不支持语法高亮,代码看起来很不舒服。不过可以使用
vue.js
的语法高亮来支持
第一步:下载
Weex 语法高亮脚本地址:https://pan.baidu.com/s/1mibEtFa (不是我自己的)
第二步:打开
Sublime Text,依次点击 Tools -> Developer -> New Syntax,新建一个语法文件,把下载下来的文件打开复制内容覆盖原有的内容,并保存,文件名和扩展名为
Plain we.sublime-syntax。请注意文件名称必须命名为
Plain we.sublime-syntax,否则没有高亮.
第三步:开启weex语法高亮
点击View --> Syntax-->we Component (这个选项在最下面点击先下箭头往下翻)
这时候就大工告成了。
5.最后就是学习weex的学习资源了
weex的中文文档http://www.shouce.ren/api/view/a/11586
weex社区http://weex.help/
weex官网http://alibaba.github.io/weex/download.html
有关weex学习的网址: 1.https://github.com/alibaba/weex
2.weex你需要知道的事 命令行工具:weex-toolkit https://github.com/weexteam/weex-toolkit
调试工具: weex-devtool https://github.com/weexteam/weex-devtool
3.WEEX SDK集成到工程(Integrate to Android) :https://github.com/weexteam/article/issues/25
有图的:https://vczero.github.io/weex-learning/android/003_HelloWorldBuildInWeex.html
4.weex创建项目--工程构建--官方示例文件解析:https://github.com/vczero/weex-learning
基本没有了!我也是刚刚才接触weex的有什么错误的地方请留言交流!希望大家可以一起交流互相学习!
转自:http://blog.csdn.net/u014592907/article/details/53465773
相关文章推荐
- MyEclipse安装Flex 3 插件及新建Flex项目
- myEclipse7.5中安装 javascript,extjs的代码自动提示spket插件和extjs desiner可视化代码生成工具,extjs的一个很好的学习视频资源地址
- 项目开发-highcharts插件学习总结
- VS2010/MFC编程入门之十一中(对话框:模拟对话及其弹出过程)学习时的一个注意点
- 今天做一个winform,想直接把窗体改成输出类库,其他地方直接调结果总提示不能注册组件,回来调度,可以,总结,windows还是直接用新建的类型项目,改容易出错
- MyEclipse安装配置Flex 3 插件及新建Flex项目演示
- J2EE SSH学习(二)安装Eclipse插件和第一个Eclipse项目
- eclipse插件安装、卸载及其一个常见的安装问题
- eclipse的tomcat插件安装及其项目部署、调试
- #[Composer学习笔记]Part1:安装composer并通过composer创建一个项目
- Eclipse插件安装总结通过个人的学习体会
- grunt学习(二)——安装grunt及其插件
- VC6 下学习使用Teechart8记录 一 安装和熟悉teechart8【一个非常好的画图插件】
- Unity3D学习之第三日(前面学习的总结,做了一个小项目)
- MyEclipse安装Flex 3 插件及新建Flex项目演示
- Android应用开发学习总结(二)——新建项目与目录结构了解
- 新安装的VS2003出现了一个问题-不能新建项目!
- grunt学习(二)——安装grunt及其插件
- pomelo学习一:环境配置、新建项目、WebStorm的安装和配置
- Laravel 5框架学习之Laravel入门和新建项目