一、vue框架開發(fā)項(xiàng)目用到了哪些技術(shù)
vue + vuex + vue-router + axios + es6 + webpack
二溯职、vuex 有什么作用
vuex用于程序開發(fā)的狀態(tài)管理雏搂，它采用集中式存儲细疚，管理應(yīng)用的所有組件的狀態(tài)固翰，每一個 Vuex 應(yīng)用的核心就是 store（倉庫）收厨。“store”基本上就是一個容器砸讳，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
使用：
1界牡、在main.js中引入vuex：import Vuex from 'vuex'簿寂，
然后掛載使用它：Vue.use(Vuex)
2、在main.js中加入：var store = new vuex.Store(){
state:{
count:0
}}
三宿亡、請求后臺數(shù)據(jù)是如何請求的
用axios常遂，請求后臺資源的模塊。npm install axios -S裝好挽荠，然后發(fā)送的是跨域克胳，需在配置文件中config/index.js進(jìn)行設(shè)置。后臺如果是Tp5則定義一個資源路由。js中使用import進(jìn)來，然后.get或.post挚冤。如果成功返回在.then函數(shù)中挠锥，失敗則是在.catch函數(shù)中。
四勋又、vue路由怎么創(chuàng)建和使用
- 在index.js中引入import vue-router
- 引入路由頁面：import 路由頁面
- 掛載使用：Vue.use(Router)
- 創(chuàng)建路由實(shí)例：export default new Router
- 在路由實(shí)例中進(jìn)行路由路徑配置：routes[{
path:Home ,name: ,component: },{},{}] - 子路由：children:[{path: ,component: },{},{}]
五、vue組件間怎么傳值
- 父組件向子組件傳遞數(shù)據(jù)：
只需要在子組件通過v-bind傳入一個值，在子組件中满败，通過props接收，即可完成數(shù)據(jù)的傳遞 - 子向父傳輸數(shù)據(jù)：
子組件定義一個事件來觸發(fā)叹括，
父組件需要用到emit函數(shù)來傳參數(shù)算墨。
六、vue組件怎么引用
- 編寫子組件
- 在需要使用的父組件中通過import引入
- 在vue的components中注冊
- 在模板中使用
七汁雷、mvvm開發(fā)模式介紹一下
module+view+viewModule净嘀，在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信摔竿，ViewModel通常要實(shí)現(xiàn)一個observer觀察者面粮，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化继低，然后通知到對應(yīng)的視圖做自動更新熬苍，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動柴底，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定婿脸。
八、vue中跨域如何處理
vue的webpack文件中配置跨域：在根目錄下config的index.js文件中配置柄驻，changeOrigin:true //是否跨域
target：目標(biāo)接口域名-
開發(fā)環(huán)境下狐树，如何做好跨域配置
首先跨域我們要配置的文件有：config下的index.js
dev: { proxyTable: { '/api': { target: 'http://10.1.5.11:8080/',//設(shè)置你調(diào)用的接口域名和端口號 changeOrigin: true, //跨域 pathRewrite: { '^/api': '/' //這里理解成用‘/api’代替target里面的地址， 后面組件中我們掉接口時直接用api代替 比如我要調(diào)用'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’即可 在開發(fā)環(huán)境顯示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22 } }
config/dev.env.js：
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',//開發(fā)環(huán)境
API_HOST:"/api/"
})
- 生產(chǎn)環(huán)境中最好的辦法是后端在服務(wù)器端口加個代理抑钟，效果類似開發(fā)時webpack的代理。
axios發(fā)送get post請求問題
發(fā)送post請求時一般都要設(shè)置Content-Type野哭，發(fā)送內(nèi)容的類型在塔，application/json指發(fā)送json對象但是要提前JSON.stringify()一下。application/xxxx-form指發(fā)送拨黔？
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'}
九零截、如何判斷用戶的登錄狀態(tài)
vuex + localstorage （用于長期登錄+判斷用戶是否已登錄+適合長期保存在本地的數(shù)據(jù)）
十麸塞、頁面已經(jīng)更新，但是數(shù)據(jù)沒有變化瞻润，瀏覽器緩存如何處理
- 其實(shí)解決這個問題很簡單喘垂，緩存是通過文件名標(biāo)記緩存的內(nèi)容的。在你更新了網(wǎng)站的css文件內(nèi)容后绍撞，在更換一下css的文件名就可以了正勒。如原先html中的css調(diào)用語句如下：
<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后改文件名確實(shí)麻煩，所以我們可以加載css/js語句中加入版本號（即css/js鏈接中傻铣？后面的內(nèi)容）就可以了章贞。如原先的HTML中的css調(diào)用語句如下：
<link rel="stylesheet" href="css/style.css?v=201708" />
將css文件的版本號改成新的：
<link rel="stylesheet" href="css/style.css?v=201709" />
十一、用戶如果一直提交數(shù)據(jù)非洲，怎么辦
可以將提交的按鈕狀態(tài)更改鸭限，提交之后按鈕變?yōu)椴豢捎谩?/p>
十二、get和post請求方式區(qū)別
- get 用的是瀏覽器的url地址傳輸两踏，傳輸數(shù)據(jù)有限败京，內(nèi)容公開，不安全
- post 用的是請求體傳輸梦染，比較安全赡麦，傳輸?shù)臄?shù)據(jù)也比較大
十三朴皆、git如何處理版本沖突和新建合并分支
- 處理沖突：
先把云上的pull下來，然后在本地合并修改之后泛粹，再commit遂铡，再push到云上。 - 創(chuàng)建合并分支：
- git branch xxx （創(chuàng)建分支）
- git checkout xxx （檢出）
- git merge （合并分支）
十四晶姊、數(shù)據(jù)雙向綁定實(shí)現(xiàn)和原理
用v-module實(shí)現(xiàn)的扒接，VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設(shè)置屬性值(set)的操作來實(shí)現(xiàn)的。
十五们衙、webpack有什么作用钾怔，配置
- 可以自動編譯TypeScript為JavaScript
- webpack-cli/vue-cli 自動生成配置文件
- webpack是一個模塊打包器，強(qiáng)調(diào)的是一個前端模塊化方案蒙挑，更側(cè)重模塊打包蒂教，我們可以把開發(fā)中的所有資源都看成是模塊，通過loader和plugin對資源進(jìn)行處理脆荷。
- webpack打包原理：把所有依賴打包成一個 bundle.js 文件，通過代碼分割成單元片段并按需加載懊悯。
十六蜓谋、es6的一些寫法
- let和const：使用let來聲明一個值會被改變的變量，而使用const來聲明一個值不會被改變的變量炭分，也可以稱之為常量桃焕。
- 可省略 :function，更簡便捧毛，
- 箭頭函數(shù)中观堂，它沒有自己的this，函數(shù)體內(nèi)的this對象呀忧，就是定義時所在的對象师痕，而不是使用時所在的對象。
- 模板字符串：是為了解決使用+號拼接字符串的不便利而出現(xiàn)的而账。 使用 `` 將整個字符串包裹起來胰坟，而在其中使用 ${} 來包裹一個變量或者一個表達(dá)式。
- 來看看ES6的函數(shù)默認(rèn)值寫法：
function add(x = 20, y = 30) {
return x + y;
}
console.log(add()); - 在ES6中用...來表示展開運(yùn)算符泞辐，它可以將數(shù)組方法或者對象進(jìn)行展開笔横。例如：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];
十七咐吼、H5 的一些新特性
新增了一些語義化標(biāo)簽：header吹缔、footer、nav锯茄、aside厢塘、article、audio、video等
媒體查詢 @media 可以做出響應(yīng)式頁面
新表單元素的引入（智能表單俗冻，對自動輸入的內(nèi)容做基本的校驗(yàn)）：input：type=number（數(shù)字）礁叔、email（郵箱）、url（地址）迄薄、range（滑塊）琅关、date（日期）等，placeholder（占位符）讥蔽、require（必填項(xiàng)）涣易。
本地存儲：webstorage：sessionStorage和localStorage
- sessionStorage（會話期間有效，關(guān)閉瀏覽器窗口就失效冶伞，容量5M新症，不同頁面或標(biāo)簽頁面間無法共享，適用于敏感賬號一次性登錄）
- localStorage（本地存儲永久有效响禽，多窗口共享徒爹，容量5M，用于長期登錄+判斷用戶是否已登錄+適合長期保存在本地的數(shù)據(jù)）
- 獲取地理位置的api：Window.navigator.geolocation.getCurrentPosition(success,error)
十八芋类、Html的語義化
1隆嗅、在沒有css的渲染下，依然能夠清晰的看出頁面的結(jié)構(gòu)侯繁，方便開發(fā)人員開發(fā)胖喳。
2、語義化更有可讀性贮竟，便于團(tuán)隊(duì)開發(fā)和維護(hù)丽焊。
3、便于seo咕别，便于搜索引擎的搜索技健。
十九、cookie惰拱、sessionSttorage凫乖、localStory區(qū)別
- 數(shù)據(jù)存儲大小
cookie：4kb
webStorge：5mb - 數(shù)據(jù)存儲有效期限
cookie：根據(jù)自己的設(shè)置時間
sessionStorage：關(guān)閉窗口后失效
localStorage：永久有效除非js刪除或者瀏覽器刪除 - 作用域
cookie和localStorage是在同源窗口，同一個瀏覽器共享的弓颈，sessionStorage只在同一個標(biāo)簽頁共享帽芽。
二十、從輸入網(wǎng)址到頁面加載發(fā)生了什么
大概分為以下過程
DNS解析
TCP連接
發(fā)送HTTP請求
服務(wù)器處理請求并返回HTTP報文
瀏覽器解析渲染頁面
連接結(jié)束
二十一翔冀、圖片很多如何進(jìn)行優(yōu)化
可以進(jìn)行懶加載或者是分頁加載导街。
二十二、移動端適配怎么配置
viewport纤子，三個屬性
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"
