4 基于传统方式的使用
所谓传统方式，就是我们基于之前比较传统的，整个js引入的方式来使用Vue.js；这个方式的优点是学习成本低，可以快速的实现前端的功能，缺点那就是会产生大量的冗余代码，不能进行项目Maven那样的工程化的构建和组件管理；这种方式比较适合页面（功能）不多，可以接受部分冗余代码的小系统；
做前端的都知道，如果用这种方式来做大型网站、系统的话，大量的html、js文件堆叠到一起，那简直是人间地狱。但是这种方式有一个最大的好处就是学习成本低，可以快速建站。相对的自然是修改和维护成本会非常高。
4.1 基础项目搭建
方式1：CDN方式
通过CND的方式使用，这种方式使用最简单，一个html页面即可；
我们在web-normal/main/resources/static目录下新建一个cdn.html文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<i-button @click="show">点我啊!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to Vue.js!</Modal>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
</body>
</html>
运行效果如下：
出现以上页面表示我们的前端已经可以正常运行了。
方式2：项目内置文件方式
很多应用都是在客户的内网运行，某些内网是不能访问外网的（或者访问外网很慢）。这就是需要将前端的文件都放在我们的项目中，以使浏览器能够加载到我们的文件。我们将之前的CDN的文件下载下来，除了上面的三个文件外，还需要三个iview的样式资源文件，具体文件如下：
下一步我们在项目的html文件中引入这些文件即可；
我们在web-normal/main/resources/static目录下新建一个index.html文件,内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="/assets/css/iview.css">
<script type="text/javascript" src="/assets/js/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/iview.min.js"></script>
</head>
<body>
<div id="app">
<i-button @click="show">点我啊!</i-button>
<Modal v-model="visible" title="Welcome">Welcome to Vue.js!</Modal>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false
},
methods: {
show: function () {
this.visible = true;
}
}
})
</script>
</body>
</html>
我们从浏览器访问这个文件，出现方式1中展示的界面并且能够正常点击按钮弹出弹框，这样我就构建好了一个最简单的Vue.js前端的开发环境。
详细的代码以及示例请查看gitee（https://gitee.com/derstsea/vue-demo ）上的源码。
后续的内容我们均以项目内置文件的方式进行介绍，实际项目中也推荐这种方式。使用这种方式有两个好处：
- 第一、在没有互联网的环境中可以正常使用（在银行和一些国企中这样的环境非常常见）；
- 第二、可以显式的控制版本，避免新版本中携带的问题影响我们的项目功能（CDN方式同样也可以指定具体的版本，但是没有互联网这种方式就彻底歇菜了）。
4.2 引入基础工具
一般的项目都离不开两个工具：异步交互（axios）和时间工具（moment.js）,下面以这两个工具为例说明一下如何引入，其他工具引入方式类似。
异步交互
我们直接去npm网站（https://www.npmjs.com/package/axios ）下载axios文件即可，在hmtl头部声明引入后，我们将其放到Vue的实例属性中以方便在Vue中直接使用。
<script type="text/javascript" src="/assets/js/axios.min.js"></script>
在Vue实例化之前的代码中写入：
Vue.prototype.$http = axios;
即完成了axios的实例属性的设置，属性前加$符号是为了避免和方法函数、计算属性产生冲突。
Vue实例属性详解：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
使用示例：
this.$http.post("/work/getInitData", {}).then((response) => {
//获得相应数据
let data = response.data;
console.log(data);
}).catch(function (error) {
//异常处理
this.$Message.info(error);
console.log(error);
});
详细可以参考axios相关使用文档：
https://www.npmjs.com/package/axios
https://www.jianshu.com/p/7a9fbcbb1114
更详细的数据加载示例，请见项目源码，web-normal 子项目下的 axios.html文件。
时间组件
moment.js使用文档：http://momentjs.com/docs/
我们之间去上面的网站中之间下载js文件后，引入到html中即可：
<script type="text/javascript" src="/assets/js/moment.min.js"></script>
我们可以结合Vue.js的过滤器，直接对页面的时间进行格式化显示，这个是最常用的方式。另外有一些时间计算用这个组件也是比较好用的。详细的使用方式，请参见官方的使用文档。
4.3 组件化开发
我们都知道组件化的开发是Vue.js的核心，也是Vue.js最强大的地方。那么在传统的使用方式下我们能不能也采用组件化的方式来开发那？答案是肯定的。与工程化的开发方式相比，我们这种方式组件、工具的组织和管理都是靠我们手工来完成的，效率较低。
既然是组件化开发，那么你就需要先了解一下Vue.js组件化开发的基本知识。大家看一下官方文档（ https://cn.vuejs.org/v2/guide/components.html ）熟悉一下基本语法和原理即可，项目中的示例都非常简单。我们直接上栗子。
我们这里以开发一个网站的TopBar组件为例，因为不用webpack编译，那么我们的组件就不能写到.vue文件中，那么写到那里那？没错，肯定是js文件中啊，.vue最终也是编译成js文件的。
上代码：
- 组件：topbar.js
//声明组件
const TopBar = Vue.extend({
props: ['userName', 'title'],
template: `
<row type="flex" justify="space-between">
<i-col span="20" style="padding-left: 15px;">
<icon type="md-paper" size="50" color="#FFFFFF"></icon>
<span class="sys-name">{{title}}</span>
</i-col>
<i-col span="2" style="text-align: right;padding-right: 15px;">
<tooltip placement="bottom-end" :content="welcomeLabel" :delay="200">
<avatar style="background-color: #FF9900;" size="large">
{{headLetter}}
</avatar>
</tooltip>
</i-col>
</row>
`,
methods: {},
computed: {
welcomeLabel() {
return 'Welcome ' + this.userName;
},
headLetter() {
let lArray = this.userName.split("");
return lArray[0].toUpperCase();
}
}
});
//将组件注册到Vue（全局）
Vue.component('ly-topbar', TopBar);
- 使用组件的页面：compontent.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="/assets/css/iview.css">
<link rel="stylesheet" type="text/css" href="/assets/css/demo.css">
<script type="text/javascript" src="/assets/js/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/iview.min.js"></script>
</head>
<body>
<div id="app">
<layout>
<i-header class="header">
<ly-topbar user-name="derstsea" :title="appTitle"></ly-topbar>
</i-header>
<i-content>
<label for="">改变标题：</label>
<i-input v-model="appTitle"></i-input>
</i-content>
</layout>
</div>
<script type="text/javascript" src="/assets/js/components/topbar.js"></script>
<script>
new Vue({
el: '#app',
data: {
visible: false,
appTitle:'组件开发小栗子'
},
methods: {
}
})
</script>
</body>
</html>
- 运行效果：
在改变标题输入框，输入你要改变的标题内容，可以直接改变tobar的标题。
详细代码请查看gitee（https://gitee.com/derstsea/vue-demo ）上的源码。
4.4 使用前端路由
既然可以组件化，那么在传统使用方式下，能不能使用前端路由来避免页面的服务端跳转，以此来提升用户体验那？查了一下Vue.js的官方文档，答案也是肯定的。
首先我们直接去github（https://github.com/vuejs/vue-router ）下载一个最新版本引入到vue.js后边即可完成引入操作，详细请参加gitee（https://gitee.com/derstsea/vue-demo ）上项目的router.html文件。
Vue-Router官方文档：https://router.vuejs.org/zh/
话不多说，上栗子！
我们模拟三个模块的切换，那么我们首先要编写三个组件模块,我们这里用颜色和文字来区分不同的模块：
- 红色模块：redmodule.js
//声明组件
const RedModule = Vue.extend({
template: `
<div style="background-color: #990000;width: 600px;height: 300px;">
<h1 style="color: #f5f5f5">我是红色模块</h1>
</div>
`,
methods: {}
});
//将组件注册到Vue（全局）
Vue.component('ly-redmodule', RedModule);
- 黄色模块：redmodule.js
//声明组件
const YellowModule = Vue.extend({
template: `
<div style="background-color: #9e8821;width: 600px;height: 300px;">
<h1 style="color: #f5f5f5">我是黄色模块</h1>
</div>
`,
methods: {}
});
//将组件注册到Vue（全局）
Vue.component('ly-yellowmodule', YellowModule);
- 蓝色模块：redmodule.js
//声明组件
const BuleModule = Vue.extend({
template: `
<div style="background-color: #163599;width: 600px;height: 300px;">
<h1 style="color: #f5f5f5">我是蓝色模块</h1>
</div>
`,
methods: {}
});
//将组件注册到Vue（全局）
Vue.component('ly-bluemodule', BuleModule);
模块与普通的组件没有什么差别，只是我们划分代码功能的一个单元，类似于java中的类。
- 使用前端路由的页面：router.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="/assets/css/iview.css">
<link rel="stylesheet" type="text/css" href="/assets/css/demo.css">
<script type="text/javascript" src="/assets/js/vue.min.js"></script>
<script type="text/javascript" src="/assets/js/vue-router.min.js"></script>
<script type="text/javascript" src="/assets/js/iview.min.js"></script>
</head>
<body>
<div id="app">
<layout>
<i-header class="header">
<ly-topbar user-name="derstsea" :title="appTitle"></ly-topbar>
</i-header>
<i-content>
<layout>
<sider>
<button-group vertical>
<i-button to="/red" >红色模块</i-button>
<i-button to="/yellow">黄色模块</i-button>
<i-button to="/blue">蓝色模块</i-button>
</button-group>
</sider>
<i-content>
<router-view></router-view>
</i-content>
</layout>
</i-content>
</layout>
</div>
<script type="text/javascript" src="/assets/js/components/topbar.js"></script>
<script type="text/javascript" src="/assets/js/components/redmodule.js"></script>
<script type="text/javascript" src="/assets/js/components/yellowmodule.js"></script>
<script type="text/javascript" src="/assets/js/components/bluemodule.js"></script>
<script>
const routes = [
{path: '/red', component: RedModule},
{path: '/yellow', component: YellowModule},
{path: '/blue', component: BuleModule},
{path: '/', redirect: '/red'}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router: router,
data: {
visible: false,
appTitle: 'Vue前端路由栗子'
},
methods: {}
})
</script>
</body>
</html>
- 运行效果：
点击左侧的按钮即可完成模块的切换，这样整个页面是不跳转的，只有路由的出口部分会根据切换进行变化。