weex-06-程序的入口文件app.js
本节内容
介绍程序的执行过程
先给大家介绍一个东西
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架
干什么的呢？
MVVM 开发模式应该不模型,双向数据绑定这个名词很熟悉吧.这个框架就能让前端开发实现MVVM 设计模型
那么这个框架和weex 有什么关系呢？
目前 Weex 与 Vue 正在展开官方合作，并将 Vue 2.x 作为内置的前端框架，Vue 也因此具备了开发原生应用的能力,也就是说我们上层是使用vue.js 语法进行代码编写,然后通过打包工具将这些代码打包成app.weex.js文件,下发都手机端,由SDK进行解析,使用手机原生的组件进行渲染!
F3D0C72A-0354-4FF2-9302-935882CCEB0C.png
我把教程分为两部分内容
执行文件app.weex.js 开发阶段 app 开发阶段
app.js 这个是我们打包时的入口文件，为什么这样说呢？我们看一下打包配置文件webpack.config.json中的部分内容
entry: {
app: path.resolve('./app.js')
},
output: {
path: 'dist',
}entry 就是我们的打包入口文件 output 打包完成的输出文件
我们下来看一下app.js文件的内容
import foo from './src/foo.vue' // 1
foo.el = '#root' // 2
export default new Vue(foo); //2解释一下
1.foo.vue 就是一个组件, 这就代码 就是讲这个组件引入进来 2.el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 3 创建一个Vue 对象 作为js文件的输出
接下来,解释一下第二点,我们回到weex.html文件中
<body>
<div id="root"></div>
<script src="./dist/app.web.js"></script>
</body>我们将组件的el 设置为"#root",其实就是告诉系统,让Vue对象挂在到这个id为root的dom 元素上去,让Vue实例去管理这个节点元素以及它的子节点元素
友情提示
如果您打包的文件是用于iOS 和 安卓等客户端渲染的代码,这个el的值可以不用设置,weex客户端的SDK会默认将其挂在根节点上
接下来 我们应该学习的是weex中的组件,但是在这之前, 先讲解一下weex中的布局和限制