weex-04-工程文件介绍

本节任务

介绍工程文件的作用

3251C565-E584-4E8A-85F7-D867E1F5AA98.png

接下来逐一介绍一下文件的作用

1.node_modules

还记得我们的安装javascript包的命令吗？

npm install

这个文件夹就是存放 我们下来的依赖包的,如果你运行了命令没有发现这个文件,请关闭HBuilder 工具后重新打开

2.assets

我们有时想引用一些第三方包,但是不支持npm安装的形式,我们可以将其手动下载下来,放在这个文件夹中

3.init.js

编译时需要的的初始化代码

4.app.web.js

我们知道weex开发会生成两套代码,一份用于H5页面,一份用于手机端,那么这个app.web.js 就是用于H5页面的打包文件

5.app.weex.js

用于手机端的代码

6.app.js

这个文件就是我们工程打包时的入口文件

7.index.html

这个就是在浏览器查看时的页面

其实我们的地址是这样的

http://localhost:8080/index.html

8.package.json

还记得我们的安装包命令吗?

npm install

那么它怎么知道要安装那些依赖包呢？

我们这个文件的部分内容粘贴在下面你一看就明白了

  "dependencies": {
    "vue": "^2.1.8",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1",
    "weex-vue-render": "^0.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "ip": "^1.1.4",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5"
  }

具体的那些依赖包有什么用呢?暂时不用考虑,用到的时候会讲解

9.webpackage.config.js

还记得我们的打包命令吧

npm run dev

这个命令干了什么事情

我把package.json 中的部分文件拷贝下来给大家看一下

  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "serve": "node build/init.js && serve -p 8080",
    "debug": "weex-devtool"
  }

它执行的其实就是这个脚本

"dev": "webpack --watch"

这里你也不难理解下面这个命令的含义了吧

npm run serve

10.weex.html

贴一段代码给大家看

这个文件其实就是最终要展示的H5页面

几个文件的作用这里算是讲完了,下一节继续我们的征程!