jasonliao001 / xview Goto Github PK

less中文网

dropdown旋转箭头

<i class="arrow-down" ></i>

 .arrow-down {
    &:after {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      margin-top: 4px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
      box-sizing: border-box;
      transform-origin: 0px 6px;
      transition: transform .3s  ease-in-out;
    }
  }
 .rotate{
     transform: rotate(180deg);
 }
  

tree旋转箭头

<i class="arrow-right" ></i>

.arrow-right{
     position: relative;
      display: inline-block;
      vertical-align: middle;
      transition: all 0.2s ease-in-out;
      &:after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: -4px;
        position: absolute;
        transform: translate(-50%, -50%) rotate(45deg);
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        box-sizing: border-box;
      }
    }
    &.tree-arrow-open {
      i {
        transform: rotate(90deg);
        transform-origin: -2px 0px;
      }
    }

1. nginx 搭建

• linux中yum的方式安装nginx

   yum list | grep nginx
  

• 如何自行配置yum源？更新nginx版本？
  官网

2. nginx 配置文件详解

• 查看nginx的安装目录

rmp -ql nginx

• nginx.conf文件解读这里
• 如果使用阿里云的，一定要把实列的端口打开。
  在“安全组配置”中端口配置就行了

3. nginx服务的启动，停止，重启

• 启动

    1.使用systemctl命令启动
      systemctl start nginx.service
     2.查询服务的运行状态
     ps aux | grep nginx
  

• 停止

     1. 立即停止
     nginx -s stop
     2.从容停止服务
     nginx -s quit
     3. killall 杀死进程
     killall nginx
     4.systemctl停止
     systemctl stop nginx.service
  

• 重启nginx服务

  systemctl restart nginx.service
  

• 重新载入配置文件

  nginx -s reload
  

• 查看端口号

  netstart -tlnp
  

4. nginx访问权限设置

使用location中的 deny 和 allow 字段来控制访问
5. ### nginx设置虚拟主机

• 基于端口号配置虚拟主机

  server{
      listen 8001;
      server_name localhost;
      root /usr/share/nginx/html/yourwebsitefile;
      index index.html
  }
  

• 基于IP配置虚拟主机

 server{
     listen 80;
     server_name youIP;
     root /usr/share/nginx/html/yourwebsitefile;
     index index.html
 } 

• 基于域名配置虚拟主机

   1. 首先你得先申请个域名
   2. 在域名解析中新建解析，创建二级域名
   3.  
   server{
     listen 80;
     server_name you域名;
     root /usr/share/nginx/html/yourwebsitefile;
     index index.html
  } 

6. nginx反向代理设置

   server{
         listen 80;
         server_name baidu.com;
         location /{
                proxy_pass http://tencent.com;
         }
    }

7. nginx配置移动端和pc端

   使用$http_user-agent配置

8. nginx的Gzip压缩配置

使用nginx 中的Gzip打开就好
request中有Accept-Encoding: gzip, deflate, response中返回Content-Encoding: gzip

1. vue调试

1. Git分支：master分支和开发版本分支

2. GitHub的SSH key配置

3. vsCode 使用git

在Web页面上，使用鼠标点击一个按钮后，通常情况下它会获得页面的焦点，所谓页面焦点是指那个当前可以接收键盘事件的DOM元素，document.activeElement只读属性用来保存当前获得焦点的那个DOM元素。通常情况下我们需要为button绑定一个click事件来添加后续的交互动作，比如执行一个Action或者弹出一个窗口等等，比如：

点击button后继续连续按键盘的Enter键会一直触发click绑定的事件处理，因为点击后当前button获取了焦点
解决办法

1. 点击后取消焦点

2. 使用别的标签代替button标签

感谢monjer提供思路

sass中文网

javascript基础知识点

总结

关于生成文档

怎么用？先上官网demo

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子元素数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

为什么要这样写？看源码

export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
....}

官网提到个无状态组件（高可复用性），上一个常用render.js

export default {
  name: 'RenderCell',
  functional: true,
  props: {
    render: Function
  },
  render: (h, ctx) => {
    return ctx.props.render(h);
  }
};

觉得写法不行，那咋就上jsx

参考链接

• vue技术揭秘
• 渲染函数
• jsx

按照配置所影响的功能划分，分别为：

• Entry：配置模块的入口
• Output： 配置如何输出最终想要的代码
• Module：配置处置模块的规则
• Resolve: 配置寻找模块的规则
• Plugins： 配置扩展插件
• DevServer： 配置DevServer

Entry

1. Entry 类型
   Entry类型可以接受String，Array，Object，注意：如果是Array类型，搭配output.library配置使用，只有数组最后一个入口文件会被导出。
2. Chunk的名称
   如果entry是一个string或array，只生成一个chunk，名称为main
   如果entry是一个object，就会生成多个chunk，chunk的名称是object键值中的键

Output

1. fileName
   在只有一个chunk输出的时候，fileName可以写成静态不变的
   fileName：bundle.js
   在生成多个chunk的时候，webpack会为每个chunk取名，使用变量来区分输出的文件名
   fileName: [name].js

   • 内置变量列表

   变量	含义
   id	chunk 的唯一标识，从0开始
   name	chunk 的名称
   hash	chunk的唯一标识hash值
   chunkhash	chunk内容的hash值

   ps: 其中hash和chunkhash的长度是可以指定的，[hash:8]代表取8位hash值，默认20位

2. chunkFilename
   output.chunkFilename配置无入口的chunk在输出时的文件名称。chunkFileName只是用于在运行过程中生成生成的chunk在输出时候的名称，使用运行生成chunk的常见场景，使用commonChunkPlugin,import('path/to/module') 动态加载等，

3. path
   output.path配置输出文件存放在本地的目录，必须是string类型的绝对路径，通常使用Node的path模块获取绝对路径
   path: pathresolve(__dirname,'../examples/dist')

4. publicPath
   output.publicPath配置发布到线上资源的URL前缀，为string类型，默认为空字符串“ ”，即使用相对路径

5. crossOriginLoading
   wepback输出的代码可能需要异步加载，通过JSONP异步加载，动态向HTMl中插入一个<script src="url"></script>标签去加载异步资源，output.crossOriginLoading用于配置这个异步插入标签的
   crossOrigin值
   script的crossOrigin属性可以取值：
   anonymous(默认）,在加载脚本的时候不带上Cookies
   use-credentials，加载脚本的时候带上Cookies

6. libraryTarget 和 library
   当webpack去构建一个被其他模块导入使用的库时,需要这个

   • output.libraryTarget 配置以何种方式导出库
   • output.library 配置导出库的名称

7. librayExport
   outputlibrary.libaryExport配置到导出模块中的哪些子模块需要被导出，不过只有在output.libraryTarget被设置为commonjs或则commonjs2时使用才有意义

Module

1. rules配置模块的读取和解析规则，类型是个数组
   • 条件配置：通过test,include,exclude,三个配置来选中loader要应用的规则
   • 应用规则： 对选中的文件通过use配置项来应用loader，可应用从后往前一组loader，同时可以分别向loader传参数
   • 重置顺序： enforce选项配置，post从后到前，pre从前到后
2. noParse
   • 可选择配置，主要是提交webpack构建性能，像引入的Chartjs庞大又没有模块化标准，让webpack解析是没有意义
3. parser
   • parser 配置语法层面的解析

Resolve

1. resolve.alias 给路径取别名
2. mainFields 默认为 mainFields: ['browser','main']
   • 第三模块对不同的环境可能提供几份代码，在这定义我们优先使用哪份代码
3. extensions
   在导入语句中可以不用带上文件后缀，这里定义的就是后缀列表，最好在import时候带上后缀，这也是基于构建性能上的考虑
4. modules
   Resolve.modules配置webpack去哪些目录下获取第三方模块，默认是node_modules
5. descriptionFiles
   配置描述第三方模块的文件名称,也就是package,json
6. enforceExtension
   强制在import时候带上后缀
7. enforceModulesExtension
   第三方模块很多是没有带上后缀，所以设置了enforceExtension:true了，还需要设置enforceModulesExtension：false来兼容

参考链接：

1. 深入浅出webpack
2. webpack中文网

iview的样式结构很清晰，在构建工程可以使用这样的思维来进行css架构。

• styles
  • animation(动画)
    • ease
    • fade
    • move
    • slide
  • common (全局样式)
    • iconfont(字体文件)
    • base(reset样式)
    • layout(布局相关)
    • normalize(兼容处理)
  • components(组件样式)
    • ...
  • mixins(混入，需要全局调用)
    • clearfix
    • mask
  • custom(主题化变量设置)

待实现

• sass实现

待练习

• Bootstrap深入

参考链接：

1.我是如何对网站CSS进行架构的

一文读懂前端缓存

1. 如何使用 keep-alive? Vue keep-alive 实践总结

2. keep-alive原理分析？Vue.js技术揭秘

3. 记一次vue 的keep-alive踩坑之路

以下指示在移动端的使用情况：

注意：flex使用必须结合postcss中的autoPrefixer插件来实现，会给我们自动加上兼容性的写法

flex容器能够使用的属性：

• flex
• flex-direction
• justify-content(space-around 不能使用)
• align-item

flex 项目能够使用的属性:

• flex: 1

参考：
在移动端优雅的使用flex
postcss

textarea {
-ms-scrollbar-base-color: #fff;
-ms-scrollbar-arrow-color: #fff;
-ms-scrollbar-shadow-color: #fff;
}

在写的组件时候居然写了这个死循环，然后就‘Maximum call stack size exceeded’ 😄

computed:{
     localeCancelText() {
        if (this.localeCancelText) {
          return this.localeCancelText;
        } else {
          return '取消';
        }
      }
}

Gulp 是一个基于流的自动化构建工具，除了可以管理和执行任务，还支持监听文件，读写文件,下面5中方法几乎支持所有的构建场景：

• 通过gulp.task注册一个任务

• 通过gulp.run 执行任务

• 通过gulp.watch监听文件的变化

• 通过gulp.src 读取文件

• 通过gulp.dest 写文件

Gulp最大的特点就是引入了流的概念，同时提供了一系列的插件去处理流

首先了解下

• postcss中文官网
• 大漠 postcss

sass-resource-loader 插件可以处理这个问题