本节任务
介绍工程文件的作用
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
这个就是在浏览器查看时的页面
其实我们的地址是这样的
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
贴一段代码给大家看
<body>
<div id="root"></div>
<script src="./dist/app.web.js"></script>
</body>
这个文件其实就是最终要展示的H5页面
几个文件的作用这里算是讲完了,下一节继续我们的征程!
