weex-02-初始化工程

本节任务

  • 初始化一个工程

第一步

创建一个文件目录,这个目录主要放我们的练习demo,我给它命名为weex**

weex-02-初始化工程_第1张图片
这个是创建的问题

第二步

打开终端工具 'CD 路径' 进入这个目录中

weex-02-初始化工程_第2张图片
5BBD1381-B30B-4703-A6DD-BCA8E39D9119.png

cd /Users/xujie/Documents/weex


weex-02-初始化工程_第3张图片
截图

友情提示

先输入cd 然后将文件夹拖动到终端界面上,然后放手松开鼠标左键之后,地址自动填充到终端里了

第三步

使用命令初始化工程

weex init FirstProject

接下来在命令行窗口会出现一句话
prompt: Init your Project: (FirstProject)

输入一个名字-这个名字就是整个项目的名称

weex-02-初始化工程_第4张图片
3E9492A3-2687-4BAB-9238-11DD4CEC9971.png

项目初始化完成后,生成的目录如下

weex-02-初始化工程_第5张图片
这个是初始化完成后项目中自动生成的文件和目录

第四步

安装依赖的第三方javascript包

npm install

weex-02-初始化工程_第6张图片
安装完成后的截图

工程中增加了一个文件夹 如下

weex-02-初始化工程_第7张图片
node_modules

第五步

接下来我们运行打包命令

npm run dev

打包完成后,终端窗口的截图


weex-02-初始化工程_第8张图片
打包完成后,命令行窗口的截图

工程中新增的文件截图

weex-02-初始化工程_第9张图片
工程中新增的文件截图

第六步
使用下面命令启动web服务

npm run serve

DB76B73A-E98B-4BB3-ACCF-ACFEBBFC4B27.png

第七步
在浏览器中输入下面地址进行查看

localhost:8080

weex-02-初始化工程_第10张图片
CAB04FB0-0391-4CE3-B53C-9C67E3EE3A87.png

使用app进行扫码查看

weex-02-初始化工程_第11张图片
IMG_2201.PNG

你可能感兴趣的:(weex-02-初始化工程)