vuecli3配置less全局变量
安装预处理 less、less-loader
npm install -D less-loader less
安装插件style-resources-loader
vue add style-resources-loader
建议使用使用上面这个命令来安装，会省掉很多麻烦。
如果在 vue ui 里安装的话，要先插件安装vue-cli-plugin-style-resources-loader，再去依赖安装style-resources-loader
我这是使用默认配置安装的新项目，只添加了 less、less-loader、style-resources-loader
安装完成之后：
package.json1
2
3
4
5
6
7
8
9
10
11
12
13"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-resources-loader": "^1.2.1",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-template-compiler": "^2.5.17"
},
vue.config.js1
2
3
4
5
6
7
8
9
10
11const path = require('path') // 自己添加的
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './src/index.less') // 自己添加的, less全局变量所在文件
]
}
}
}
macos10.13.6终端使用代理
配置这个代理断断续续弄了好几次，跨度有5、6个月之久，所以好多都记不清了！
列出所有用到的网站
- 通过ProxyChains让Iterm终端上网
- socks5代理
https://lvii.gitbooks.io/outman/content/ss.mac.html - 安装proxychains-ng，使用socks5
https://blog.csdn.net/yjk13703623757/article/details/79055460 - 添加启动别名
https://blog.csdn.net/houzhiwen_yy/article/details/81774657 - 参考
首先是使用 shadowsocks
安装 shadowsocks 软件以及如何使用网上教程一大堆，我这里就不赘述了，只放上几张关键性图片
如何查看shadowsocks代理使用的默认端口：
点击‘编辑自动模式的PAC’，然后会打开文件夹，该文件夹里有一个gfwlist.js文件，文件的开头就是设置的默认端口
查看 shadowsocks 客户端启用的端口：
1 | $ lsof -iTCP -sTCP:LISTEN -n -P |
到这里你的浏览器应该已经能够访问 https://www.google.com 了，但是终端里还不能使用代理
检查方法是：在终端执行这个命令 $ curl cip.cc，得到这样子的结果：1
2
3
4
5
6
7
8
9IP : 122.233.242.233
地址 : 中国 浙江 杭州
运营商 : 电信
数据二 : 浙江省杭州市 | 电信
数据三 : 中国浙江省杭州市 | 电信
URL : http://www.cip.cc/122.233.242.233
安装 proxychains-ng 来实现终端使用代理
$ brew install proxychains-ng
安装好后我的配置文件在 /usr/local/etc/proxychains.conf
需要再配置文件里配置如下项目：1
2
3
4
5
6
7
8
9strict_chain
proxy_dns
remote_dns_subnet 224
tcp_read_time_out 15000
tcp_connect_time_out 8000
localnet 127.0.0.0/255.0.0.0
[ProxyList]
socks5 127.0.0.1 1080 # 这是上面查看到的 socks5 端口
启动与关闭终端代理
启动代理：export all_proxy=socks5://127.0.0.1:1080
关闭代理：unset all_proxy
启动代理后再执行命令$ curl cip.cc，得到这样子的结果：1
2
3
4
5
6
7
8
9IP : 45.124.137.39
地址 : 日本 长野县 长野市
运营商 : tsukaeru.net
数据二 : 日本
数据三 : 日本长野县
URL : http://www.cip.cc/45.124.137.39
这说明终端使用代理成功了
为启动/关闭代理命令添加别名
启动/关闭代理的命令太长，每次都要敲这么长的命令太麻烦了，可以配置别名来方便使用
在.bash_profile文件里添加两行代码: 编辑文件vi ~/.bash_profile1
2
3# proxy list
alias proxy=’export all_proxy=socks5://127.0.0.1:1080’ #1080为HTTP监听端口号
alias unproxy=’unset all_proxy’
使用配置文件生效1
source ~/.bash_profile
js实现浏览器全屏与退出
兼容 Firefox、Chrome、IE
1 | function fullScreen () { |
uni-app小白入门
先撸一遍uni-app 官网。这个网站也不错 uni-app从入门到精通
下面是个人笔记，大部分是从官网上摘抄的重点
目录结构
1 | ┌─components uni-app组件目录 |
Tips：
- static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
- css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。
什么是‘nvue’，以及如何使用
在官网中的在uni-app中使用Weex可看到相关内容
Weex的文件的后缀名为 .nvue (native vue), uni-app中 .nvue 只会编译到 5+App 端。
如何使用 vuex
相关文档可看官网如何使用vuex
uni-app 内置了 vuex 我们不用安装vuex，直接使用即可
- 首先在项目根目录下新建一个目录
store 在
store文件夹下新建文件index.js1
2
3
4
5
6
7
8
9
10
11//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {...},
mutations: {...},
actions: {...}
})
export default store在项目根目录下的
main.js里引用1
2
3
4
5
6
7//main.js
...
import store from './store'
Vue.prototype.$store = store //这行是必须的
const app = new Vue({
store,...
})使用
1
2
3
4
5
6
7
8
9
10
11
12
13...
//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'
...
computed: {
...mapState(['userName'])
},
methods:{
...mapMutations(['changeLogo']),
}
定制主题
配置一个主题文件，我这里使用 less 来写样式，这样可以用变量来设置颜色，然后在每个页面都引入这个文件来使用其中定义的颜色（不会导致这个主题文件在应用中出现多次），但是这样没法让用户切换主题
使用插槽slot
#####在uni-app中使用插槽与在vue中几乎一样，但是在使用具名插槽时有一点区别：请看例子
定义一个组件m-button, 与vue没有区别：1
2
3
4
5
6
7
8
9
10
11<template>
<view class="btn-wrap" :class="{'default': defaultAcitve}">
<slot> <!-- 默认插槽 -->
<view>
{{text}}
</view>
</slot>
<slot name="icon"></slot> <!-- 具名插槽 icon -->
<slot name="text"></slot> <!-- 具名插槽 text -->
</view>
</template>
使用具名插槽有区别1
2
3
4
5
6
7
8
9<m-button>
<view class="mine-btn">
<image class="image" src="../../static/images/contact.png" mode=""></image> 来自默认插槽
</view>
<template slot="icon">
<image class="image" src="../../static/images/contact.png" mode=""></image>
</template>
<text slot="text">来自text插槽</text>
</m-button>
注意事项：
- 在uni-app中使用默认插槽与在vue中使用默认插槽没有区别。在使用具名插槽时，添加slot属性的那个元素是不会被插入插槽的。也就是说上面的 ‘来自text插槽’ 。
- 在循环中使用组件时，插槽里的变量无法生效，但不含变量的内容可以正常使用
- 使用默认插槽时，被插入内容不要用
<template></template>标签包裹
坑
- 对 text 标签的行高只能比默认的高，没法设置的比默认值跟小。解决办法是在text的父标签（如view）中设置行高
- 组件的样式会被编译到引用它的那个页面中去，所以组件的样式可能会污染页面。解决办法是在组件最外层元素上添加一个唯一的class名（也可是id），然后其他类名就都是在这个类名之下了，也就构成了为选择器，就不会选中组件以外的元素了。
- 暂不支持在组件上使用 Class 与 Style 来设置样式
- data()定义变量需要注意，变量不能重名，包括对象的健值。如下，
articles.title得到的结果是 ‘首页’。1
2
3
4
5
6
7
8
9
10
11title: '首页',
articles: [
{
title: '法律文章标题',
content: '法律文章内容，河南省高院审理案件时，故意忽略关键证据，导致被告被误判。经我方评查后，上诉成功。'
},
{
title: '法律文章标题',
content: '法律文章内容，河南省高院审理案件时，故意忽略关键证据，导致被告被误判。经我方评查后，上诉成功。'
}
}
flex布局学习
介绍
布局的传统解决方案：基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
使用flex布局
任何一个容器都可以使用display属性指定为 Flex 布局。设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。1
2
3.box{
display: flex; // 块级元素
}
行内元素使用Flex布局为：1
2
3.box{
display: inline-flex; // 行内元素
}
注：阮一峰大神在Flex布局教程上说“Webkit 内核的浏览器，必须加上-webkit前缀。”，写这篇博客时测试不加前缀也是可以的
基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
容器的属性
以下6个属性设置在容器上。1
2
3
4
5
6flex-direction // 决定主轴的方向（即项目的排列方向）。
flex-wrap // 如果一条轴线排不下，如何换行。
flex-flow // 上面两个的简写
justify-content // 项目在主轴上的对齐方式。
align-items // 项目在交叉轴上如何对齐。
align-content // 多根轴线的对齐方式。
flex-direction属性决定项目(子元素)的排列方向。
1 | row（默认值）：排列方向为水平方向，起点在左端。 |
使用例子1
2
3
4.box {
display: flex;
flex-direction: row-reverse;
}
flex-wrap属性决定项目(子元素)如果在一条轴线排不下，如何换行。
1 | nowrap（默认）：不换行（可能会溢出） |
1 | .box { |
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
1 | .box { |
justify-content属性定义了项目在主轴上的对齐方式。
1 | flex-start（默认值）：左对齐,项目之间没有间隔 |
注意：如果flex-direction为column，容器得设置高度justify-content才能看到效果
align-items属性定义项目在交叉轴上如何对齐。
项目（子元素）高度不一样时如何对齐1
2
3
4
5flex-start：交叉轴的起点对齐，（row时，顶部对齐）。
flex-end：交叉轴的终点对齐，（row时，底部对齐）。
center：交叉轴的中点对齐，（row时，居中对齐，也在容器的中间）。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
1 | .box { |
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
有多行项目（子元素）时，行的排列方式。1
2
3
4
5
6flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目（子元素）的属性
以下6个属性设置在项目上。1
2
3
4
5
6order
flex-grow
flex-shrink
flex-basis
flex
align-self
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
1 | .border.blue { |
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
没有空间时就不再放大。该空间是在没有放大时就决定的1
2
3.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
1 | .item { |
注意：缩小只能针对width属性，如果设置padding过大则可能没法缩小了
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
1 | .item { |
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
1 | .item { |
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
div凹陷效果
使用box-shadow
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19.box-shadow {
float:left;
position:relative;
box-shadow:0 10px 5px rgba(0,0,0,.3);
}
.box-shadow:after {
position:absolute;
bottom:-29px;
left:0;
overflow:hidden;
background:#fff;
width:100%;
height:15px;
content:'';
border-radius:50%;
box-shadow:0 -10px 5px #fff;
}
<div class="box-shadow">CSS3将开启“少图”web新时代</div>
使用border
1
2
3
4
5
6
7
8
9
10.border-inset {
width: 300px;
margin: 0 auto;
border-width: 3px;
border: inset;
box-shadow: inset 0 -1px 0 rgba( 255, 255, 250, 0.6), inset 0 -2px 0 rgba( 0, 0, 0, 0.1);
}
<div class="border-inset">CSS3将开启“少图”web新时代</div>
vue添加时间格式化过滤器
来自：https://blog.csdn.net/genius_yym/article/details/77530602
函数封装
我这里将下面的函数保存到src/libs/filters/formatDate.js文件里1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// 这个函数 网上 随处可见，我也是应用了别人的。
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
};
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
在组件里通过过滤器使用
引用：
1
import { formatDate } from '@/libs/filters/formatDate.js'
添加过滤器
1
2
3
4
5
6
7
8
9
10
11
12
13export default {
name: 'userinfo',
components: {
avatar
},
// 过滤器
filters: {
formatDate(time) {
var date = new Date(time);
return formatDate(date, 'yyyy-MM-dd');
}
}
}使用
1
2
3...
<p class="userinfo time">{{$store.state.user.userCreatedAt | formatDate}}</p>
...在js代码里当成普通函数使用
1
let nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')