一、vue框架开发项目用到了哪些技术
vue + vuex + vue-router + axios + es6 + webpack
二、vuex 有什么作用
vuex用于程序开发的状态管理，它采用集中式存储，管理应用的所有组件的状态，每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
使用：
1、在main.js中引入vuex：import Vuex from 'vuex'，
然后挂载使用它：Vue.use(Vuex)
2、在main.js中加入：var store = new vuex.Store(){
state:{
count:0
}}
三、请求后台数据是如何请求的
用axios，请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。如果成功返回在.then函数中，失败则是在.catch函数中。
四、vue路由怎么创建和使用
- 在index.js中引入import vue-router
- 引入路由页面：import 路由页面
- 挂载使用：Vue.use(Router)
- 创建路由实例：export default new Router
- 在路由实例中进行路由路径配置：routes[{
path:Home ,name: ,component: },{},{}] - 子路由：children:[{path: ,component: },{},{}]
五、vue组件间怎么传值
- 父组件向子组件传递数据：
只需要在子组件通过v-bind传入一个值，在子组件中，通过props接收，即可完成数据的传递 - 子向父传输数据：
子组件定义一个事件来触发，
父组件需要用到emit函数来传参数。
六、vue组件怎么引用
- 编写子组件
- 在需要使用的父组件中通过import引入
- 在vue的components中注册
- 在模板中使用
七、mvvm开发模式介绍一下
module+view+viewModule，在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
八、vue中跨域如何处理
vue的webpack文件中配置跨域：在根目录下config的index.js文件中配置，changeOrigin:true //是否跨域
target：目标接口域名-
开发环境下，如何做好跨域配置
首先跨域我们要配置的文件有：config下的index.js
dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号 changeOrigin: true, //跨域 pathRewrite: { '^/api': '/' //这里理解成用‘/api’代替target里面的地址， 后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'， 直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可 在开发环境显示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22 } }
config/dev.env.js：
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',//开发环境
API_HOST:"/api/"
})
- 生产环境中最好的办法是后端在服务器端口加个代理，效果类似开发时webpack的代理。
axios发送get post请求问题
发送post请求时一般都要设置Content-Type，发送内容的类型，application/json指发送json对象但是要提前JSON.stringify()一下。application/xxxx-form指发送？
a=b&c=d格式，可以用qs.stringify()的方法格式化一下，qs在安装axios后会自动安装，只需要组件里import一下即可。
const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}
const postData=Qs.stringify(this.formCustomer);//过滤成？&=格式
'Content-Type':'application/xxxx-form'}
九、如何判断用户的登录状态
vuex + localstorage （用于长期登录+判断用户是否已登录+适合长期保存在本地的数据）
十、页面已经更新，但是数据没有变化，浏览器缓存如何处理
- 其实解决这个问题很简单，缓存是通过文件名标记缓存的内容的。在你更新了网站的css文件内容后，在更换一下css的文件名就可以了。如原先html中的css调用语句如下：
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
改一下css文件名：
<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>
- 给css/js文件加个版本号
第一种方法修改css/js后改文件名确实麻烦，所以我们可以加载css/js语句中加入版本号（即css/js链接中？后面的内容）就可以了。如原先的HTML中的css调用语句如下：
<link rel="stylesheet" href="css/style.css?v=201708" />
将css文件的版本号改成新的：
<link rel="stylesheet" href="css/style.css?v=201709" />
十一、用户如果一直提交数据，怎么办
可以将提交的按钮状态更改，提交之后按钮变为不可用。
十二、get和post请求方式区别
- get 用的是浏览器的url地址传输，传输数据有限，内容公开，不安全
- post 用的是请求体传输，比较安全，传输的数据也比较大
十三、git如何处理版本冲突和新建合并分支
- 处理冲突：
先把云上的pull下来，然后在本地合并修改之后，再commit，再push到云上。 - 创建合并分支：
- git branch xxx （创建分支）
- git checkout xxx （检出）
- git merge （合并分支）
十四、数据双向绑定实现和原理
用v-module实现的，VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
十五、webpack有什么作用，配置
- 可以自动编译TypeScript为JavaScript
- webpack-cli/vue-cli 自动生成配置文件
- webpack是一个模块打包器，强调的是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源都看成是模块，通过loader和plugin对资源进行处理。
- webpack打包原理：把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。
十六、es6的一些写法
- let和const：使用let来声明一个值会被改变的变量，而使用const来声明一个值不会被改变的变量，也可以称之为常量。
- 可省略 :function，更简便，
- 箭头函数中，它没有自己的this，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
- 模板字符串：是为了解决使用+号拼接字符串的不便利而出现的。 使用 `` 将整个字符串包裹起来，而在其中使用 ${} 来包裹一个变量或者一个表达式。
- 来看看ES6的函数默认值写法：
function add(x = 20, y = 30) {
return x + y;
}
console.log(add()); - 在ES6中用...来表示展开运算符，它可以将数组方法或者对象进行展开。例如：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
这样，arr2 就变成了[1, 2, 3, 10, 20, 30];
十七、H5 的一些新特性
新增了一些语义化标签：header、footer、nav、aside、article、audio、video等
媒体查询 @media 可以做出响应式页面
新表单元素的引入（智能表单，对自动输入的内容做基本的校验）：input：type=number（数字）、email（邮箱）、url（地址）、range（滑块）、date（日期）等，placeholder（占位符）、require（必填项）。
本地存储：webstorage：sessionStorage和localStorage
- sessionStorage（会话期间有效，关闭浏览器窗口就失效，容量5M，不同页面或标签页面间无法共享，适用于敏感账号一次性登录）
- localStorage（本地存储永久有效，多窗口共享，容量5M，用于长期登录+判断用户是否已登录+适合长期保存在本地的数据）
- 获取地理位置的api：Window.navigator.geolocation.getCurrentPosition(success,error)
十八、Html的语义化
1、在没有css的渲染下，依然能够清晰的看出页面的结构，方便开发人员开发。
2、语义化更有可读性，便于团队开发和维护。
3、便于seo，便于搜索引擎的搜索。
十九、cookie、sessionSttorage、localStory区别
- 数据存储大小
cookie：4kb
webStorge：5mb - 数据存储有效期限
cookie：根据自己的设置时间
sessionStorage：关闭窗口后失效
localStorage：永久有效除非js删除或者浏览器删除 - 作用域
cookie和localStorage是在同源窗口，同一个浏览器共享的，sessionStorage只在同一个标签页共享。
二十、从输入网址到页面加载发生了什么
大概分为以下过程
DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束
二十一、图片很多如何进行优化
可以进行懒加载或者是分页加载。
二十二、移动端适配怎么配置
viewport，三个属性
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"
