• 当前标签:amazeUI

程序开发 vue中使用amazeUI的一种暂行解决方案

在使用vue开发时,vue的数据绑定和数据处理方面用的很爽,但是在UI框架方面的东西就少了很多了。其实Vue的ui框架也挺多的,比如element,iview等基于vue的UI框架,对于其他的传统UI框架来说,其中的js组件就少了很多了。对于初学者来说还是使用UI框架来开发速度比较快点,还有些滚动监听、页面动画效果等在Vue中比较麻烦的,要熟悉Vue的生命周期,只能在DOM渲染加载出来后才能操作。 最近写一个企业官网,使用Vue来写,这的后端比较喜欢我们用vue之类的开发,他们只要写API接口就行了。刚开始搭建webpack开发,但是写出一个首页后发现打包后的文件太大了,5M多,放在服务器上加载太慢,而且就一个企业网站,页面也不多。用vue有点浪费,臃肿,想了一个方法,就是不用webpack搭建环境,直接引入<script>,和使用jQuery一样引入。这样就可以使用amazeUI之类的框架写了,也可以使用各种插件。这种方法的缺点就是不能组件单文件引入,每个页面的组件都要写在当前页面中,不过这个项目的页面不多,可以这样使用。 1、首先下载好需要的amazeUI、jQuery、Vue.js等文件; 2、和平常一样,建一个index.html文件,将上面那些文件引入进去; <link rel="stylesheet" type="text/css" href="./css/amazeui.min.css"> <script type="text/javascript" src="./js/vue.min.js"></script> <script type="text/javascript" src="./js/jquery.min.js"></script> <script type="text/javascript" src="./js/amazeui.min.js"></script> 3、然后在body中建一个<div id="app"></div> 4、下面看代码: HTML <!DOCTYPE html> <html> <head>     <title>Vue + amazeUI</title>     <link rel="stylesheet" type="text/css" href="./css/amazeui.min.css"> </head> <body>     <div id="app">         <!-- 头部组件 -->         <va-header></va-header>         <!-- 正常无组件 -->         <div>这里可以正常使用amazeUI等框架</div>         <div>这里也可以使用Vue的数据绑定等</div>         <ul v-if="isShow">             <li v-for="item in items" :key="item.id">{{item.name}}</li>         </ul>         <!-- 底部组件 -->         <va-footer></va-footer>     </div>     <!-- 定义组件 -->     <!-- 头部组件 -->     <template id="va-header">         <header>             <div><img src="logo.png" alt=""></div>             <ul>                 <li>首页</li>                 <li>新闻动态</li>                 <li>企业文化</li>                 <li>全部产品</li>                 <li>关于我们</li>             </ul>         </header>     </template>     <!-- 底部组件 -->     <template id="va-footer">         <footer>             <p>@2017 黄良钵博客 版权所有<span>琼ICP备14000033号</span></p>         </footer>     </template>     <script type="text/javascript" src="./js/vue.min.js"></script>     <script type="text/javascript" src="./js/jquery.min.js"></script>     <script type="text/javascript" src="./js/amazeui.min.js"></script> </body> </html> JS // 注册组件 Vue.component('va-header', {   template: '#va-header' }) Vue.component('va-footer', {   template: '#va-footer' }) // 创建一个新的 Vue 实例 var app = new Vue({     el: '#app',     data: {         isShow:true,         items:[             {                 id:1,                 name:'第一项',             },             {                 id:2,                 name:'第二项',             },             {                 id:3,                 name:'第三项',             },             {                 id:4,                 name:'第四项',             },         ],     },     // 这里可以和webpack中的Vue一样写js     created(){     },     methods(){     }, }) 由于页面不多,也就不使用路由了,可以少加载一个vue-router.js文件。

2017-11-29 20:25:00 169 0 0
阅读详情
  • 1
前往