表单验证使用的是 vee-validate
ui组件使用的是 bootstrap element
时间选择组件 vue-datepicker
富文本编辑组件 vue-quill-editor
项目中使用到百度地图定位,翻阅资料发现这个很赞vue2 引入百度地图
导出Excel表格
Lodop打印插件如何在vue项目中使用lodop打印插件
图表 百度Echarts Echarts
① ElementUI 相关
刚开始使用Element UI的时候,总感觉官方提供的组件有限、样式就那么多,可以扩展的就是固定的暴露的一些属性和方法。要是用到实际项目中 有一定的局限性。可能满足不了自己的需求。这样认为还是 图样图森破,
还是太年轻了。
就拿普普通的 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>
官方提供的满足一个轮播组件的基本功能。扔进项目直接就能用
重写样式,直接解决。
但是有个问题,根据需求你可能不需要线形的指示器,你需要圆点形的指示器。傻眼了,NO
直接找到这块的源代码。页面查找,发现
<li class="el-carousel__indicator">
<button class="el-carousel__button">
<!---->
</button></li>
这一块在控制指示器的样式,ok,那就改呗
直接重写 el-carousel__button
/*设置指示器的样式*/
.el-carousel__button {
width: 10px;
height: 10px;
border-radius: 5px;
}
②发布相关
去掉路由后面 丑陋的 “#”
const router = new VueRouter({
mode: 'history',
routes: [...]
})
发布项目,在刷新阶段 404,可以参照这个
vue-router history 模式 iis 应该怎么配置呢
这个一般都可以解决问题。
或者自己写 rewrite规则
vue-router下的html5 history在iis服务器上的设置
③发布相关
打包时候去掉 console.log
找到 webpack.prod.conf.js 增加
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_debugger: true, //增加这两句
drop_console: true //增加这两句
},
sourceMap: true
}),
④发布相关
打包生成的静态文件里面有 一大堆的 .map文件。如何禁止生成
在 config目录下 index.js
⑤开发相关
时不我待,潜心code
资料推荐
vue2.0 子组件和父组件之间的传值(转载)
vue2 引入百度地图
Vue2.0---将页面中表格数据导出excel