文件的目录结构
main.js中创建一个vue实例，引用了APP组件
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
APP组件中，使用router-view去配置路由
主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。
参考
export default和export的区别
首先export default和export都可以导出常量、函数、文件、模块等，跟import配合使用。
在一个文件和模块中，export、import可以有多个，但是export default只能有一个，最后通过export方式导出，导入的时候需要添加{}，export default不需要。
项目中的使用
import vHeader from "./Header"
import vSidebar from "./Sidebar"
export default{
components:{
vHeader,vSidebar
}
}
还有一点需要注意使用export default命令，为模块指定默认输出，这样就不需要知道所要加载的模块名称，看下面例子
//a.js
let sex = "boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
//其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。
// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy
style中的scoped属性
当style标签中含有scoped属性的时候，说明这个CSS只能作用于当前的组件
使用如下：
<style scoped>
.header {
position: relative;
box-sizing: border-box;
width: 100%;
height: 70px;
font-size: 22px;
line-height: 70px;
color: #fff;
}
</style>
扩展知识：
1.在同一个组件中，可以包含有作用域和无作用域
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
2.子组件引用了父组件后，父组件的有作用域会影响子组件
参考文章
项目中的数据处理
项目中的数据主要是通过放在export default{}里面，然后使用data(){}
使用如下：
export default {
data() {
return {
tableRole: [{
name: '广告1'
}, {
name: '广告2'
}, {
name: '广告3'
}]
}
}
}
然后之前的项目的话是使用原生的ajax，在这里说一下原生ajax的请求过程，还有它的优缺点
参考文章
登录状态的记住（重点难点）
使用了localStorage
核心代码：
html代码
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item prop="username">
<!-- 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定 -->
<el-input v-model="ruleForm.username" placeholder="username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
<p style="font-size:12px;line-height:30px;color:#999;">Tips : 用户名和密码随便填。</p>
</el-form>
注意这里的这一行代码
@keyup.enter.native="submitForm('ruleForm')"
首先@代表的是v-on，还有这里监听键盘事件的时候，我们常常需要监听常见的键值，虽然我们可以通过keyCode的方式去监听，但是为了方便起见，Vue为最常用的键提供了别名，enter就是其中的一个。
另外，使用.native修饰v-on，给组件绑定一个原生的组件
<my-component v-on:click.native="doTheThing"></my-component>
JavaScript代码
methods: {
submitForm(formName) {
const self = this;
self.$refs[formName].validate((valid) => {
if (valid) {
//localStorage.setItem(key,value)：将value存储到key字段
localStorage.setItem('ms_username',self.ruleForm.username);
self.$router.push('/readme');
} else {
console.log('error submit!!');
return false;
}
});
}
}
这里需要注意：
- 子组件索引：
ref指定id，然后通过$refs访问子组件，例子如下：
<div id="parent">
<user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
注意：$refs只在组件渲染完成后才填充，并且它是非响应式的.
它仅仅是访问子组件的一个应急方案——应当避免在模板或计算属性中使用 $refs。
- localStorage的使用
localStorage.setItem('ms_username',self.ruleForm.username);
Vue的生命周期
首先注意一点的是：
所有的生命周期钩子都自动绑定了this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。
但是 不可以使用箭头函数来定义一个生命周期方法。因为箭头函数绑定了父上下文，this和你期待的vue实例不同
- beforeCreate。在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- create。在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- beforeMount。在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted。el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
- beforeUpdate。数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 - updated。由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- actived。keep-alive 组件激活时调用。
- deactived。keep-alive 组件停用时调用。
- beforeDestroy
- destoryed
关于路由的配置（重点）
项目中的代码（核心）
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',//HTML5 History 模式
routes: [
{
path:'/',
redirect:'/login'
},
{
path:'/login',
component:resolve => require(['../components/page/Login.vue'],resolve)
},
{
path:'/readme',
component:resolve =>require(['../components/common/Home.vue'],resolve),
children:[
{
path:'/readme',
component:resolve => require(['../components/page/Readme.vue'], resolve)
},
{
path:'/user',
component:resolve => require(['../components/page/User.vue'],resolve),
},
{
path:'/userreview',
component:resolve => require(['../components/page/UserReview.vue'],resolve)
}
]
}
]
})
主要是通过path设置路径，然后component设置使用的组件，当然也使用了路由嵌套。children中放置了一个数组，数组中的每一项都是一个对象，属性包含path和component。
导入静态文件
import '../static/css/main.css'
单页面应用的优点和缺点
优点：
1、分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
2、减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
3、同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
缺点：
1、SEO问题，现在可以通过Prerender等技术解决一部分；
2、前进、后退、地址栏等，需要程序进行管理；
3、书签，需要程序来提供支持；
