码云建仓库
1.私有
安装git
git
--version 看有版本，就安装好了
git bash 执行命令行 生成公钥
https
://gitee
.com
/help
/articles
/4181#article
-header0
1 ssh
-keygen
-t rsa
-C "xxxxx@xxxxx.com"
按照提示完成三次回车，即可生成 ssh key。通过查看
~/.ssh
/id_rsa
.pub 文件内容，获取到你的
public key
复制生成后的 ssh key，通过仓库主页 「管理」
->「部署公钥管理」
->「添加部署公钥」 ，添加生成的
public key 添加到仓库中。
添加后，在终端（Terminal）中输入
ssh
-T git@gitee
.com
首次使用需要确认并添加主机到本机
SSH可信列表。若返回 Hi
XXX! You've successfully authenticated
, but Gitee
.com does not provide shell access
. 内容，则证明添加成功。
下载代码，先创建一个一样文件
Git clone ssh链接
转盘
D:\
创建vue 项目
https
://github
.com
/vuejs
/vue
-cli
/tree
/v2#vue
-cli
--
npm install
--global coffeescript
Npm install
--global vue
-cli
初始化一个项目
进入你要安装的目录
vue init webpack my
-project
my
-project就是项目名称
下面就一步步就好了
再进入你的项目
Git add
. git commit
-m ‘init’ git push 推送上网络
注释取消，到buildl里面base
.config
module
: {
rules
: [
npm install axios
--save
Tempate 里面要套一层div
html
,body
,#iframe
{width
: 100vw
;height
: 100vh
;}
用
this.$emit要对应好组件名字
兄弟组件兄弟通过$emit父级之后再传给兄弟组件传递数据，需要用prop 跟watch监听数据的变化，再改变兄弟的数据
Npm run build
Dist 里面的两个文件放到服务器就好了
可以用文件包起来，改config里面的index文件，assetsPublicPath这个目录
build
: {
index
: path
.resolve(__dirname
, '../dist/index.html'),
assetsRoot
: path
.resolve(__dirname
, '../dist'),
assetsSubDirectory
: 'static',
assetsPublicPath
: '/crm',
图标库
DOCUMENT：
https
://www
.chartjs
.org
/docs
/latest
/charts
/line
.html
DEMO：
http
://demo.vue-chartjs.org/
API：
https
://vue
-chartjs
.org
/zh
-cn
/
窗口变化
https
://www
.cnblogs
.com
/wyongz
/p
/11206226.html
Swiper
https
://segmentfault
.com
/a
/1190000014609379
把箭头拿到swipercontainer外面，再让设置padding：
0 60px
; 再把wrapper的宽度设置calc(100%-120px
),.swiper
-slide
,设置图片居中，放四张图
import VueAwesomeSwiper
from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue
.use(VueAwesomeSwiper
, )
import 'swiper/dist/css/swiper.css'
import { swiper
, swiperSlide
} from 'vue-awesome-swiper'
export default {
components
: {
swiper
,
swiperSlide
}
<swiper
:options
="swiperOption">
<swiper
-slide
><img src
="static/images/jay.jpg"></swiper
-slide
>
</swiper
>
<!--以下看需要添加
-->
<div
class="swiper-scrollbar"></div
>
<div
class="swiper-button-next"></div
>
<div
class="swiper-button-prev"></div
>
<div
class="swiper-pagination"></div
>
字体图标
vue2
.0 引入font
-awesome
网上的大部分教程复杂而且难看懂，其实两步就能搞定。
先cnpm install font
-awesome
--save引入依赖然后在main
.js引入 font
-awesome
/css
/font
-awesome
.min
.css 即可。
屏幕的宽度
document
.documentElement
.clientWidth
|| document
.body
.clientWidth
;
`${base}/GetHistoryList` 字符串拼接
forEacch 不能循环对象，用
for in
封装api
在config\dev
.env
.js
里面增加api地址
第一个requesFn
.js
import axios
from 'axios'
import jsonp
from 'jsonp'
export const requestPost = (params
, url
) => { return axios
.post(`${url}`, JSON.stringify(params
), {headers
: {'Content-Type': 'application/json'}}).then(res
=> res
.data
) }
export const requestGet = (params
, url
) => { return axios
.get(`${url}`, { params
: params
}).then(res
=> res
.data
) }
export const requestJsonp = (url
, callback
) => { return jsonp(`${url}`, null, callback
) }
第
2个index
.js
第
3个api
.js
import { requestPost
, requestGet
, requestJsonp
} from './requestFn.js'
let base
= process
.env
.API
export const goLogin = (url
, callback
) => requestJsonp(`${base}/adminservice.ashx${url}`, callback
)
<div
class="box" v
-bind
:style
="{'width':boxWdith+'px'}">
2020-3-3
点击tab改变样式，把兄弟节点的active都去掉，自己加上active
思路：
1.先默认一个currentIndex，第一个为
0，currentIndex
=0
2.点击切换index时，变换currentIndex
=index
3.这样的话就会动态切换
class ,active
下面展示
Html
:
:class="index == currentClassIndex ? 'active':''" @click
="addclass(index)"
Js
:
addclass(index
){
this.currentClassIndex
=index
;},
<el
-date
-picker
v
-model
="value2"
type
="month"
placeholder
="选择月" ref
="month" @change
="getMouthTimeRange">
获取昨天的时间
New
Date(new Date().getTime()-24*60*60*1000)
new Date(new Date().getTime() - 24 * 60 * 60 * 1000)
(date
.getMonth() + 1).toString().padStart(2, '0')
New
Date().getMonth()+1.toString().padStart(2,’
0’
)
'2'.toString().padStart(3,'1')
"112"
Object
.assign()
获取一个月的第一天跟最后一天
let date
= new Date(value
)
let month
= (date
.getMonth() + 1).toString().padStart(2, '0')
let year
= date
.getFullYear()
this.startTime
= year
+ '-' + month
+ '-' + '01'
let day
= new Date(year
, month
, 0)
this.endTime
= year
+ '-' + month
+ '-' + day
.getDate();
用Echart
window
.addEventListener("resize", () => {
this.chart
.resize();
});
$router
.options
.routes
循环路由
:index
="index | numToStr"
filters
: {
numToStr (num
) {
num
= num
.toString()
return num
}
},
aside
<el
-menu
class="el-menu-vertical-demo" @open
="handleOpen" @close
="handleClose" :collapse
="isCollapse"
background
-color
="#273543" :default-openeds
="onMenu($router.options.routes)">
<template v
-for="(item,index) in $router.options.routes" v
-if="!item.hidden" >
<template v
-if="!item.leaf">
<el
-submenu
:index
="index | numToStr">
<template slot
="title">
<i
class="iconfont" :class="item.icon"></i
>
<span v
-show
='flag'>{{item
.name
}}</span
>
</template
>
<router
-link tag
="el-menu-item" :index
="i+1" :to
="child.path" v
-for="(child, i) in item.children" :key
="i" v
-if="!child.hidden" :class="child.parent === $route.path ? 'router-link-exact-active router-link-active 2' : ''">
<span
class="small-title">{{child
.name
}}</span
>
</router
-link
>
</el
-submenu
>
</template
>
<template v
-else>
<router
-link
:index
="index | numToStr" tag
="el-menu-item" :to
="item.children[0].path">
<i
class="iconfont" :class="item.children[0].icon"></i
>
<span v
-show
='flag'>{{item
.children
[0].name
}}</span
>
</router
-link
>
</template
>
</template
>
<div
>
</div
>
</el
-menu
>
onMenu(data
){
let nemu
= [];
console
.log(this.$route
.fullPath
)
console
.log(this.$route
.path
)
data
.forEach((item
, index
) => {
if(!item
.leaf
&& item
.children
){
item
.children
.forEach(child
=> {
if(this.$route
.fullPath
.indexOf(child
.path
) != -1){
nemu
.push(JSON.stringify(index
));
}
})
}
});
console
.log(nemu
)
return nemu
;
}
https
://dwqs
.github
.io
/vue
-area
-linkage
/三级联动
兄弟通过父亲传值，
-子$emit
,传参给父，再传给子元素
对象属性去重
unique (arr
, key
) {
const res
= new Map()
return arr
.filter((arr
) => !res
.has(Number(arr
[key
])) && res
.set(Number(arr
[key
]), 1))
},
