1.项目打包的时候，遇到如下报错
image.png
问题原因：
optimize-css-assets-webpack-plugin 这个版本很高，在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循环中，需要对每条数据中的值进行处理
<li v-for="item in dataList">
<image src="imgUrl(item.url)"/>
</li>
imgUrl(data){
if(data){
return 'http://'+data
}else{
return data
}
}
3.vue中导出组件
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'
在使用的页面直接 import {AppMain,Settings } from ”@/components“
4.一些好用的插件
screenfull 全屏插件 npm install --save screenfull
showdown 可以编译markdown语法
tui-editor 富文本编辑器 npm install --save tui-editor
npm run preview -- --report
Vue Baidu Map Vue Baidu Map是基于Vue 2.x的百度地图组件。
image.png
Cube-UI手机端UI框架
滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库
中文文档 | github地址 | 在线预览
组件样式丰富，里面还有表单验证，这是我看到它的优点之一，因为大部分的ui框架在表达验证这块，要么就很简略，而且大部么都压根没有表单验证的
v-charts基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表
image.png
5.当组件第二次进入的时候，不会触发created,mounted
我创建和编辑的页面使用的是同一个 component，默认情况下这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子，官方说你可以通过 watch $route 的变化来进行处理，但说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view 上加上一个唯一的 key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。
<router-view :key="key"></router-view>
computed: {
key() {
// 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
return this.$route.fullPath
}
}
6.媒体查询media query
``用media query做了一点简单的响应式布局``
手机等小屏幕手持设备
@media only screen and (min-width: 320px) and (max-width: 768px) {
css...
当设备宽度 在 320px和768px之间时,执行当前的css
}
平板
@media not screen and (min-width: 769px) and (max-width: 992px) {
css...
当设备宽度 不在 769px和992px范围内,执行当前的css
}
pc客户端、桌面
@media only screen and (min-width: 993px) and (max-width: 1200px) {
css...
当设备宽度 在 769px和992px范围内,执行当前的css
}
大屏设备
@media only screen and (min-width: 1200px) {
css...
当设备宽度 大于 1200px时,执行当前的css
}
image.png
7.路由常见配置（须知）
//当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
hidden: true // (默认 false)
//当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect'
//当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
//只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
//若你想不管路由下面的 children 声明的个数都显示你的根路由
//你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
alwaysShow: true
name: 'router-name' //设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
meta: {
roles: ['admin', 'editor'] //设置该路由进入的权限，支持多个权限叠加
title: 'title' //设置该路由在侧边栏和面包屑中展示的名字
icon: 'svg-name' //设置该路由的图标
noCache: true //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示
}
如下图例子：
{
path: '/permission',
component: Layout,
redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址
hidden: true, // 不在侧边栏线上
alwaysShow: true, //一直显示根路由
meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所以的子路由都继承了这个权限
children: [{
path: 'index',
component: ()=>import('permission/index'),
name: 'permission',
meta: {
title: 'permission',
icon: 'lock', //图标
role: ['admin','editor'], //或者你可以给每一个子路由设置自己的权限
noCache: true // 不会被 <keep-alive> 缓存
}
}]
}
8.去掉vue项目中的#
browserHistory: 似我们通常的页面访问路径，并没有 #，但要通过服务端的配置，能够访问指定的 url 都定向到当前页面，从而能够进行前端的路由管理
hashHistory: 以#后面的路径进行处理，通过 HTML 5 History 进行前端路由管理
1.配置vue页面
default new Router({
mode: 'history',
})
2.在nginx中配置
location / {
try_files $uri $uri/ /index.html;
}
image.png
或者在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.跨域问题解决方法
1.cors
我最推荐的也是我工作中在使用的方式就是：
cors全称为 Cross Origin Resource Sharing（跨域资源共享）。
这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。
每一次请求，浏览器必须先以OPTIONS请求方式发送一个预请求（也不是所有请求都会发送 options，展开介绍 点我），通过预检请求从而获知服务器端对跨源请求支持的HTTP方法。在确认服务器允许该跨源请求的情况下，再以实际的HTTP请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用
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; //这个路径重写，千万别忘了
include uwsgi_params;
proxy_pass http://local;
}
9.解决vue项目打包后部署在二级目录，导致静态资源相对引用路径错误问题
比如 ：项目根目录为http://meeting.333job.com
根目录下有两个文件夹
一个test(测试环境)夹:http://meeting.333job.com/test，
一个prod(正式环境)文件:http://meeting.333job.com/prod
我的根据不同环境打包之后，分别丢进对应的文件夹
一般情况下，我们npm run build打包，生成的静态资源文件,引入路径，如下图1所示
图1
打包后的资源使用了
绝对根目录路径，因此将项目部署到特定目录比如test文件夹下，其引入的资源路径将无法被正确解析
图2
解决方法
按照如图所示,配置build文件夹下面的webpack.base.conf.js
图3
打包测试环境，dist文件中引入静态资源路径也会发生改变
图3
我们运行测试环境的项目，加载的资源路径也会变成相应的路径
图4
10.前端设置withCredentials导致出现跨域报错
image.png
image.png
11.单独修改某个页面的全局样式
mounted(){
document.querySelector('.ant-layout-content').setAttribute('style', 'padding-top:0')
}
网友评论