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

**JS**

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

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