表單驗證使用的是 vee-validate
ui組件使用的是 bootstrap element
時間選擇組件 vue-datepicker
富文本編輯組件 vue-quill-editor
項目中使用到百度地圖定位,翻閱資料發(fā)現(xiàn)這個很贊vue2 引入百度地圖
導(dǎo)出Excel表格
Lodop打印插件如何在vue項目中使用lodop打印插件
圖表 百度Echarts Echarts
① ElementUI 相關(guān)
剛開始使用Element UI的時候,總感覺官方提供的組件有限诗鸭、樣式就那么多商叹,可以擴(kuò)展的就是固定的暴露的一些屬性和方法。要是用到實際項目中 有一定的局限性只泼∑鼠希可能滿足不了自己的需求。這樣認(rèn)為還是 圖樣圖森破请唱,
還是太年輕了弥咪。
就拿普普通的 el-carousel 輪播圖,就是所謂的跑馬燈來講十绑。
<template>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
官方提供的滿足一個輪播組件的基本功能聚至。扔進(jìn)項目直接就能用
重寫樣式,直接解決本橙。
但是有個問題扳躬,根據(jù)需求你可能不需要線形的指示器,你需要圓點(diǎn)形的指示器甚亭。傻眼了贷币,NO
直接找到這塊的源代碼。頁面查找亏狰,發(fā)現(xiàn)
<li class="el-carousel__indicator">
<button class="el-carousel__button">
<!---->
</button></li>
這一塊在控制指示器的樣式役纹,ok,那就改唄
直接重寫 el-carousel__button
/*設(shè)置指示器的樣式*/
.el-carousel__button {
width: 10px;
height: 10px;
border-radius: 5px;
}
②發(fā)布相關(guān)
去掉路由后面 丑陋的 “#”
const router = new VueRouter({
mode: 'history',
routes: [...]
})
發(fā)布項目暇唾,在刷新階段 404促脉,可以參照這個
vue-router history 模式 iis 應(yīng)該怎么配置呢
這個一般都可以解決問題。
或者自己寫 rewrite規(guī)則
vue-router下的html5 history在iis服務(wù)器上的設(shè)置
③發(fā)布相關(guān)
打包時候去掉 console.log
找到 webpack.prod.conf.js 增加
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_debugger: true, //增加這兩句
drop_console: true //增加這兩句
},
sourceMap: true
}),
④發(fā)布相關(guān)
打包生成的靜態(tài)文件里面有 一大堆的 .map文件策州。如何禁止生成
在 config目錄下 index.js
⑤開發(fā)相關(guān)
時不我待,潛心code
資料推薦
vue2.0 子組件和父組件之間的傳值(轉(zhuǎn)載)
vue2 引入百度地圖
Vue2.0---將頁面中表格數(shù)據(jù)導(dǎo)出excel