1.項(xiàng)目打包的時(shí)候棒假，遇到如下報(bào)錯(cuò)
問(wèn)題原因：
optimize-css-assets-webpack-plugin 這個(gè)版本很高条辟，在4.0以上
但是webpack的版本在4.0以下弹渔，
而optimize-css-assets-webpack-plugin的v4.0.0需要webpack v4胳施。
解決方法
降低 optimize-css-assets-webpack-plugin 的版本
npm instal --save-dev optimize-css-assets-webpack-plugin@3.2.0
2.在v-for循環(huán)中，需要對(duì)每條數(shù)據(jù)中的值進(jìn)行處理
<li v-for="item in dataList">
<image src="imgUrl(item.url)"/>
</li>
imgUrl(data){
if(data){
return 'http://'+data
}else{
return data
}
}
3.vue中導(dǎo)出組件
export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Settings } from './Settings'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'
在使用的頁(yè)面直接 import {AppMain,Settings } from ”@/components“
4.一些好用的插件
screenfull 全屏插件 npm install --save screenfull
showdown 可以編譯markdown語(yǔ)法
tui-editor 富文本編輯器 npm install --save tui-editor
npm run preview -- --report
Vue Baidu Map Vue Baidu Map是基于Vue 2.x的百度地圖組件肢专。
Cube-UI手機(jī)端UI框架
滴滴 WebApp 團(tuán)隊(duì) 實(shí)現(xiàn)的 基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)
中文文檔 | github地址 | 在線預(yù)覽
組件樣式豐富舞肆，里面還有表單驗(yàn)證，這是我看到它的優(yōu)點(diǎn)之一博杖，因?yàn)榇蟛糠值膗i框架在表達(dá)驗(yàn)證這塊椿胯，要么就很簡(jiǎn)略，而且大部么都?jí)焊鶝](méi)有表單驗(yàn)證的
v-charts基于 Vue2.0 和 echarts 封裝的 v-charts 圖表組件剃根，只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡(jiǎn)單的配置項(xiàng)哩盲，便可輕松生成常見的圖表
5.當(dāng)組件第二次進(jìn)入的時(shí)候，不會(huì)觸發(fā)created,mounted
我創(chuàng)建和編輯的頁(yè)面使用的是同一個(gè) component狈醉，默認(rèn)情況下這兩個(gè)頁(yè)面切換時(shí)并不會(huì)觸發(fā) vue 的 created 或者 mounted 鉤子廉油，官方說(shuō)你可以通過(guò) watch $route 的變化來(lái)進(jìn)行處理，但說(shuō)真的還是蠻麻煩的苗傅。后來(lái)發(fā)現(xiàn)其實(shí)可以簡(jiǎn)單的在 router-view 上加上一個(gè)唯一的 key抒线，來(lái)保證路由切換時(shí)都會(huì)重新渲染觸發(fā)鉤子了。這樣簡(jiǎn)單的多了渣慕。
<router-view :key="key"></router-view>
computed: {
key() {
// 只要保證 key 唯一性就可以了嘶炭，保證不同頁(yè)面的 key 不相同
return this.$route.fullPath
}
}
6.媒體查詢media query
``用media query做了一點(diǎn)簡(jiǎn)單的響應(yīng)式布局``
手機(jī)等小屏幕手持設(shè)備
@media only screen and (min-width: 320px) and (max-width: 768px) {
css...
當(dāng)設(shè)備寬度 在 320px和768px之間時(shí),執(zhí)行當(dāng)前的css
}
平板
@media not screen and (min-width: 769px) and (max-width: 992px) {
css...
當(dāng)設(shè)備寬度 不在 769px和992px范圍內(nèi),執(zhí)行當(dāng)前的css
}
pc客戶端、桌面
@media only screen and (min-width: 993px) and (max-width: 1200px) {
css...
當(dāng)設(shè)備寬度 在 769px和992px范圍內(nèi),執(zhí)行當(dāng)前的css
}
大屏設(shè)備
@media only screen and (min-width: 1200px) {
css...
當(dāng)設(shè)備寬度 大于 1200px時(shí),執(zhí)行當(dāng)前的css
}
7.路由常見配置（須知）
//當(dāng)設(shè)置 true 的時(shí)候該路由不會(huì)再側(cè)邊欄出現(xiàn) 如401逊桦，login等頁(yè)面眨猎，或者如一些編輯頁(yè)面/edit/1
hidden: true // (默認(rèn) false)
//當(dāng)設(shè)置 noRedirect 的時(shí)候該路由在面包屑導(dǎo)航中不可被點(diǎn)擊
redirect: 'noRedirect'
//當(dāng)你一個(gè)路由下面的 children 聲明的路由大于1個(gè)時(shí)，自動(dòng)會(huì)變成嵌套的模式--如組件頁(yè)面
//只有一個(gè)時(shí)强经，會(huì)將那個(gè)子路由當(dāng)做根路由顯示在側(cè)邊欄--如引導(dǎo)頁(yè)面
//若你想不管路由下面的 children 聲明的個(gè)數(shù)都顯示你的根路由
//你可以設(shè)置 alwaysShow: true宵呛，這樣它就會(huì)忽略之前定義的規(guī)則，一直顯示根路由
alwaysShow: true
name: 'router-name' //設(shè)定路由的名字夕凝，一定要填寫不然使用<keep-alive>時(shí)會(huì)出現(xiàn)各種問(wèn)題
meta: {
roles: ['admin', 'editor'] //設(shè)置該路由進(jìn)入的權(quán)限宝穗，支持多個(gè)權(quán)限疊加
title: 'title' //設(shè)置該路由在側(cè)邊欄和面包屑中展示的名字
icon: 'svg-name' //設(shè)置該路由的圖標(biāo)
noCache: true //如果設(shè)置為true，則不會(huì)被 <keep-alive> 緩存(默認(rèn) false)
breadcrumb: false // 如果設(shè)置為false码秉，則不會(huì)在breadcrumb面包屑中顯示
}
如下圖例子：
{
path: '/permission',
component: Layout,
redirect: '/permission/index', //重定向地址逮矛，在面包屑中點(diǎn)擊會(huì)重定向去的地址
hidden: true, // 不在側(cè)邊欄線上
alwaysShow: true, //一直顯示根路由
meta: { roles: ['admin','editor'] }, //你可以在根路由設(shè)置權(quán)限，這樣它下面所以的子路由都繼承了這個(gè)權(quán)限
children: [{
path: 'index',
component: ()=>import('permission/index'),
name: 'permission',
meta: {
title: 'permission',
icon: 'lock', //圖標(biāo)
role: ['admin','editor'], //或者你可以給每一個(gè)子路由設(shè)置自己的權(quán)限
noCache: true // 不會(huì)被 <keep-alive> 緩存
}
}]
}
8.去掉vue項(xiàng)目中的#
browserHistory: 似我們通常的頁(yè)面訪問(wèn)路徑转砖，并沒(méi)有 #须鼎，但要通過(guò)服務(wù)端的配置鲸伴，能夠訪問(wèn)指定的 url 都定向到當(dāng)前頁(yè)面，從而能夠進(jìn)行前端的路由管理
hashHistory: 以#后面的路徑進(jìn)行處理晋控，通過(guò) HTML 5 History 進(jìn)行前端路由管理
1.配置vue頁(yè)面
default new Router({
mode: 'history',
})
2.在nginx中配置
location / {
try_files $uri $uri/ /index.html;
}
或者在Apatch配置
IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
8.跨域問(wèn)題解決方法
1.cors
我最推薦的也是我工作中在使用的方式就是：
cors全稱為 Cross Origin Resource Sharing（跨域資源共享）汞窗。
這種方案對(duì)于前端來(lái)說(shuō)沒(méi)有什么工作量，和正常發(fā)送請(qǐng)求寫法上沒(méi)有任何區(qū)別赡译，工作量基本都在后端這里仲吏。
每一次請(qǐng)求，瀏覽器必須先以OPTIONS請(qǐng)求方式發(fā)送一個(gè)預(yù)請(qǐng)求（也不是所有請(qǐng)求都會(huì)發(fā)送 options蝌焚，展開介紹 點(diǎn)我）裹唆，通過(guò)預(yù)檢請(qǐng)求從而獲知服務(wù)器端對(duì)跨源請(qǐng)求支持的HTTP方法。在確認(rèn)服務(wù)器允許該跨源請(qǐng)求的情況下只洒，再以實(shí)際的HTTP請(qǐng)求方法發(fā)送那個(gè)真正的請(qǐng)求许帐。推薦的原因是：只要第一次配好了，之后不管有多少接口和項(xiàng)目復(fù)用就可以了毕谴，一勞永逸的解決了跨域問(wèn)題成畦，而且不管是開發(fā)環(huán)境還是正式環(huán)境都能方便的使用
2.nginx
upstream local{
server www.lh.com:2000;
}
location /apis {
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
rewrite ^.+apis/?(.*)$ /$1 break; //這個(gè)路徑重寫，千萬(wàn)別忘了
include uwsgi_params;
proxy_pass http://local;
}
9.解決vue項(xiàng)目打包后部署在二級(jí)目錄涝开，導(dǎo)致靜態(tài)資源相對(duì)引用路徑錯(cuò)誤問(wèn)題
比如 ：項(xiàng)目根目錄為http://meeting.333job.com
根目錄下有兩個(gè)文件夾
一個(gè)test(測(cè)試環(huán)境)夾:http://meeting.333job.com/test羡鸥，
一個(gè)prod(正式環(huán)境)文件:http://meeting.333job.com/prod
我的根據(jù)不同環(huán)境打包之后，分別丟進(jìn)對(duì)應(yīng)的文件夾
一般情況下忠寻，我們npm run build打包惧浴，生成的靜態(tài)資源文件,引入路徑，如下圖1所示
打包后的資源使用了
絕對(duì)根目錄路徑奕剃，因此將項(xiàng)目部署到特定目錄比如test文件夾下衷旅，其引入的資源路徑將無(wú)法被正確解析
解決方法
按照如圖所示,配置build文件夾下面的webpack.base.conf.js
打包測(cè)試環(huán)境，dist文件中引入靜態(tài)資源路徑也會(huì)發(fā)生改變
我們運(yùn)行測(cè)試環(huán)境的項(xiàng)目纵朋，加載的資源路徑也會(huì)變成相應(yīng)的路徑
10.前端設(shè)置withCredentials導(dǎo)致出現(xiàn)跨域報(bào)錯(cuò)
11.單獨(dú)修改某個(gè)頁(yè)面的全局樣式
mounted(){
document.querySelector('.ant-layout-content').setAttribute('style', 'padding-top:0')
}
