VUE定制app开发有两种使用方式，一种实在html定制app开发中直接使用vue做开发，定制app开发一种是企业级的单页面应用。定制app开发后者是主流的使用方式，定制app开发真正项目中很少使用前一种方式。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，如：开发一个工业环境中视觉检测系统组件，将这个组件嵌入到MES系统中去；另外一个作用就是今天要讲的调样式。
要让自己的页面变得精致，就要在样式上下功夫。VUE组件中的样式封装在组件的内部，如果页面上每个组件都很美观，组装起来就不会差到那儿去，但是如果要把样式的调整分离出去，就需要将所有的单页面应用代码提供出去，这样增加了调样式人员的学习成本，如果放到html中去，只需要通过浏览器预览就很容易了，使用起来非常简单，示例如下：
- 在html页面头部引入vue、组件使用的UI库、http-vue-loader，示例代码如下
<head> <meta charset="utf-8"> <!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <!-- 引入http-vue-loader --> <script src="https://unpkg.com/http-vue-loader"></script> <!-- 这里使用了element ui框架 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <title></title> </head>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 在body部分写相关html和script代码，代码如下
<body> <div id="app"> <h1>hhhhhhhhhhhhhh</h1> <information-box :bar-object='titleObj' :data-list='dataList121'></information-box> </div> <script> Vue.use(httpVueLoader) new Vue({ el: '#app', data: { msg: '大家好，欢迎大家学习Vue.js', titleObj: { sno: 1, title: '法律条文' }, dataList121: [{ sno: '1', title: 'fdshkjfhkjsdahfk' }, { sno: '2', title: 'werwerwerwerwerwerw' }] }, components: { 'information-box': httpVueLoader('../com/information-box.vue'), }, }) </script> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
在body中第四行information-box就是我们要使用的组件，使用方式和通常在html使用VUE是一致的。在components:中引入要使用的组件，注意这里：需要使用httpVueLoader(‘…/com/information-box.vue’)引入组件。
3. information-box组件代码，组件代码和通常单页面组件代码基本一致，代码如下：
<template> <div class='main_div'> <span>{{barObject.stitle}}</span> <span class="span_more">更多</span> <el-divider></el-divider> <ul style="padding:0.0.0.0;"> <li v-for="(item,index) in dataList" :key='item.sno'>{{item.title}}</li> </ul> </div></template><script> module.exports = { name: "informationBox", props: { barObject: { sno: String, stitle: String }, dataList: { type: Array } } }</script><style scoped> ul li { list-style: none; } .main_div { width: 256px; position: absolute; } .span_more { position: relative; right: 0; color: red; }</style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
与单页面唯一不同的是代码的12行，在单页面中使用的是“export default”默认输出，而在这里要改为“module.exports = ”
4. 运行结果
查看组件运行状态，不合适的地方调整样式，直到满意为止。
注意： 在html页面中组件的名称不少于两个单词，且单词之间一定是用中划线分割，否则出现莫名其妙的错误。
小结：在html中使用vue组件只需三步。第一步：引入http-vue-loader；第二步：将引入组件中的export default修改为module.exports =；第三步：在html中components选项中使用httpVueLoader加载组件