为什么要用Vue.js框架来？当我们写一个比较大的项目的时候就会发现，如果单纯的将页面写成html或者jsp的时候，不仅页面之间的逻辑跳转很麻烦而且因为没有实现功能板块之间的分离，所以后期的功能维护极其麻烦。VUE的出现就解决了这些问题，因为它是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。
先讲板块的分离，例如我们想写一个登录的界面，这个界面里面有两个功能区，一个是输入账号，密码的登陆区，还有一个是公告栏区。分离的概念就是对应着.vue文件，每个.vue文件里面放一个功能区，这样后期维护就不用在整个登录界面的html里面修改源代码，直接修改功能板块所对应的.vue文件里面的源代码。那html对应的css，js怎么办？在每个.vue文件里分开引入吗？VUE.JS早就想好了。每个.vue文件里面分为三个板块：
1，< /template >里面放置html代码
2，里面放置css代码
3，里面放置js代码
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。简单来说就是可以通过js，Vue的语法将数据渲染到界面。每个 Vue 应用都需要通过实例化 Vue 来实现。例如：
<div id="app">
<div v-html="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>这是标题</h1>'
}
})
</script>
这就是一个简单的数据渲染。真正用Vue开发前端的时候我们一般都用手脚架Vue cli他的功能如其名就是为我们搭好框架将底层文件配置有助于我们迅速直接开发。在Vue cli中的文件划分主要如下：
assets//主要放css文件与图片文件再分两个包
components//放公共组件。也可以分为common//放项目之间的公共content//放业务相关的组件
views//放主要的组件
router//放路由
store//公共状态管理文件夹
network//网络相关的都放在这
common//公共js文件
接下来主要介绍一下我觉得重要的地方，路由——router
路由的作用就是管理页面组件之间的组成以及跳转，路由就是一个.js文件。
Const router =[]里面就是配置每个组件的名称，路径，组件。例如一个登录界面里面包括登录功能和公告栏功能
它的路由配置就是
const routes = [
{
path: '/homepage',
name: 'homepage',
component: homepage,
children: [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/notice',
name: 'notice',
component: notice
}
]
}
]
这样就是将登录与公告栏两个功能区放在了homepage里面
然后将整个homepage组件通过与放在App.vue里面显示，其中的作用主要是指明要展示的组件的路径，就是用来展示组件如果没有它既是加了页面也不会显示
想跳转路径时可以用
this.$router.push({
path: '*' })
语法进行跳转，这个跳转的实现就是改变刚刚组件所在里的路径，还是显示在组件对应的所处的位置。
希望浅薄的知识对你有帮助。
Web开发学习之路仍在继续…