程序开发

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文件,将上面那些文件引入进去;

  1. <link rel="stylesheet" type="text/css" href="./css/amazeui.min.css">
  1. <script type="text/javascript" src="./js/vue.min.js"></script>
  2. <script type="text/javascript" src="./js/jquery.min.js"></script>
  3. <script type="text/javascript" src="./js/amazeui.min.js"></script>

3、然后在body中建一个<div id="app"></div>

4、下面看代码:

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Vue + amazeUI</title>
  5.     <link rel="stylesheet" type="text/css" href="./css/amazeui.min.css">
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <!-- 头部组件 -->
  10.         <va-header></va-header>
  11.         <!-- 正常无组件 -->
  12.         <div>这里可以正常使用amazeUI等框架</div>
  13.         <div>这里也可以使用Vue的数据绑定等</div>
  14.         <ul v-if="isShow">
  15.             <li v-for="item in items" :key="item.id">{{item.name}}</li>
  16.         </ul>
  17.         <!-- 底部组件 -->
  18.         <va-footer></va-footer>
  19.     </div>
  20.     <!-- 定义组件 -->
  21.     <!-- 头部组件 -->
  22.     <template id="va-header">
  23.         <header>
  24.             <div><img src="logo.png" alt=""></div>
  25.             <ul>
  26.                 <li>首页</li>
  27.                 <li>新闻动态</li>
  28.                 <li>企业文化</li>
  29.                 <li>全部产品</li>
  30.                 <li>关于我们</li>
  31.             </ul>
  32.         </header>
  33.     </template>
  34.     <!-- 底部组件 -->
  35.     <template id="va-footer">
  36.         <footer>
  37.             <p>@2017 黄良钵博客 版权所有<span>琼ICP备14000033号</span></p>
  38.         </footer>
  39.     </template>
  40.     <script type="text/javascript" src="./js/vue.min.js"></script>
  41.     <script type="text/javascript" src="./js/jquery.min.js"></script>
  42.     <script type="text/javascript" src="./js/amazeui.min.js"></script>
  43. </body>
  44. </html>

JS

  1. // 注册组件
  2. Vue.component('va-header', {
  3.   template: '#va-header'
  4. })
  5. Vue.component('va-footer', {
  6.   template: '#va-footer'
  7. })
  8. // 创建一个新的 Vue 实例
  9. var app = new Vue({
  10.     el: '#app',
  11.     data: {
  12.         isShow:true,
  13.         items:[
  14.             {
  15.                 id:1,
  16.                 name:'第一项',
  17.             },
  18.             {
  19.                 id:2,
  20.                 name:'第二项',
  21.             },
  22.             {
  23.                 id:3,
  24.                 name:'第三项',
  25.             },
  26.             {
  27.                 id:4,
  28.                 name:'第四项',
  29.             },
  30.         ],
  31.     },
  32.     // 这里可以和webpack中的Vue一样写js
  33.     created(){
  34.     },
  35.     methods(){
  36.     },
  37. })

由于页面不多,也就不使用路由了,可以少加载一个vue-router.js文件。

黄良钵
博客站长,前端开发工程师
查看“黄良钵”的所有文章 →

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关推荐