1.项目打包的时候,遇到如下报错
问题原因
:
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 [email protected]
2.在v-for循环中,需要对每条数据中的值进行处理
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地址 | 在线预览
Cube-UI
手机端UI框架
滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库
中文文档 | github地址 | 在线预览
组件样式丰富,里面还有表单验证,这是我看到它的优点之一,因为大部分的ui框架在表达验证这块,要么就很简略,而且大部么都压根没有表单验证的
v-charts
基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表
中文文档 | github地址 | 在线预览
5.当组件第二次进入的时候,不会触发created,mounted
我创建
和编辑
的页面使用的是同一个 component,默认情况下这两个页面切换时并不会触发 vue 的 created 或者 mounted 钩子,官方说你可以通过 watch $route 的变化来进行处理,但说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view
上加上一个唯一的 key,来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。
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
}
7.路由常见配置(须知)
//当设置 true 的时候该路由不会再侧边栏出现 如401,login等页面,或者如一些编辑页面/edit/1
hidden: true // (默认 false)
//当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noRedirect'
//当你一个路由下面的 children 声明的路由大于1个时,自动会变成嵌套的模式--如组件页面
//只有一个时,会将那个子路由当做根路由显示在侧边栏--如引导页面
//若你想不管路由下面的 children 声明的个数都显示你的根路由
//你可以设置 alwaysShow: true,这样它就会忽略之前定义的规则,一直显示根路由
alwaysShow: true
name: 'router-name' //设定路由的名字,一定要填写不然使用时会出现各种问题
meta: {
roles: ['admin', 'editor'] //设置该路由进入的权限,支持多个权限叠加
title: 'title' //设置该路由在侧边栏和面包屑中展示的名字
icon: 'svg-name' //设置该路由的图标
noCache: true //如果设置为true,则不会被 缓存(默认 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 // 不会被 缓存
}
}]
}
8.去掉vue项目中的#
browserHistory
: 似我们通常的页面访问路径,并没有 #,但要通过服务端的配置,能够访问指定的 url 都定向到当前页面,从而能够进行前端的路由管理
hashHistory
: 以#
后面的路径进行处理,通过 HTML 5 History 进行前端路由管理
1.配置vue页面
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]
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所示
打包后的资源使用了
绝对根目录路径
,因此将项目部署到特定目录比如
test文件夹
下,其引入的资源路径将无法被正确解析
解决方法
按照如图所示,配置build文件夹下面的webpack.base.conf.js
打包测试环境,dist文件中引入静态资源路径也会发生改变
我们运行测试环境的项目,加载的资源路径也会变成相应的路径