vue项目小结

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的百度地图组件。

中文文档 | github地址 | 在线预览

image.png

Cube-UI手机端UI框架

滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库
中文文档 | github地址 | 在线预览
组件样式丰富，里面还有表单验证，这是我看到它的优点之一，因为大部分的ui框架在表达验证这块，要么就很简略，而且大部么都压根没有表单验证的

v-charts基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表

中文文档 | github地址 | 在线预览

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')
}