vue 2.0总结

码云建仓库
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: [
    // ...(config.dev.useEslint ? [createLintingRule()] : []),
 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: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),

  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/crm',

  /**
   * Source Maps
   */
图标库
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, /* { default global options } */)



  /*组件方式引用*/
    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
// console.log(base)
export const goLogin = (url, callback) => requestJsonp(`${base}/adminservice.ashx${url}`, callback)
// export const GetNewsList = params => requestPost(params, `${base}/GetNewsList`)
// post请求
// requestPage(params).then(data => {
//   console.log(data)
// });
// get请求
// getUserList(params).then((res) => {
//   console.log(res)
// });
 <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') // 获取月份，如果月份小于10加个‘0’
New Date().getMonth()+1.toString().padStart(2,’0’)
'2'.toString().padStart(3,'1')
"112"
Object.assign()


获取一个月的第一天跟最后一天
let date = new Date(value) // value的格式为YYYY-MM-DD
let month = (date.getMonth() + 1).toString().padStart(2, '0') // 获取月份，如果月份小于10加个‘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))
},