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>
</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>

// 注册组件
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文件。

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论