解读vue-cli脚手架并实际使用

整   理:晋 哲

时   间:2017-06-29

说   明:介绍脚手架搭建生成的各个文件功能,以及在实际项目中使用

一、vue-cli脚手架搭建之后的文件介绍及应用
1、build -- 开发配置文件夹,一般情况下安装时自动添加,通常不用改动
webpack.base.conf.js -- webpack配置文件
1
13

2、config文件夹
这里主要需要注意这几点的设置,正式运行环境下assetsPublicPath的路径设置需要改动为【./】
2

3、package.json -- 记录项目基本信息
4、index.html -- vue生成html的默认head代码部分,需要调整
5、README.md -- 一些执行命令的说明,方便查看使用

6、src -- vue代码存放的主要路径
(1)api -- 封装的api调用方式
使用如下:
3
注:sys_name和store_id已默认,不用传

(2)assets -- 静态文件存放,比如css、js、image、font等等
(3)common -- 存放一些封装的公共方法,比如alertMes、弹出框等等
(4)router -- 路由设置
4

(5)App.vue -- 主体组件
组件内容在里显示,公共样式可以在这里引入
5

(6)main.js -- 入口文件,主要作用是初始化vue实例并使用需要的插件
614

(7)components -- 组件的存放位置
一个主体的集合组件,拼接各个模块的子组件
7

子组件常用代码结构
8

二、引用ElementUI组件
1、安装

npm i element-ui -S

2、main.js里引入Element
9

3、组件里使用
比如“消息提示”组件的使用
this.$message('请输入商品名称')

具体各组件的使用方式查看官方文档
http://element.eleme.io/#/zh-CN/component/installation

三、引用vue插件
举例:vue-awesome-swiper插件
1、安装

npm install vue-awesome-swiper --save

2、main.js里引入插件
11

3、组件里使用
12

Vue开发快速起步


编   写:袁 亮
时   间:2017-06-28
说   明:Vue开发快速起步

一、工作模式
    1、类似jquery,作为类库
    2、单文件组件方式
        开发环境
            node hot reload
        生产环境
            静态html
            任意部署在webserver下即可
    
二、安装起步
    1、环境安装
        node npm vue vue-cli 等安装
    2、项目脚手架安装
        vue init webpack {project_name}
        cd {project_name}
        npm install
            ps:vim config/dev.env.js 修改开发环境端口,默认8080很有可能被占用
        npm run dev
            放在后台运行:nohup npm run dev & 
    3、访问
        http://192.168.0.249:8081
    4、IDE
        webstorm
        sublime
        vscode
    5、其他模块安装
        vuex的安装
            npm install vuex --save
        修改package.json
    6、编译
        npm run build
        
三、开发环境访问流程
    1、index.html
    2、src/main.js
        类似php框架的index.php
    3、src/App.vue
    4、router/index.js
        规则匹配,进行转发
        路由处理
    5、components/Hello.vue
        具体处理逻辑
        可以包含其他的组件
        
四、组件开发
    1、类库文件引入
        1.1 引入
            import
                必须在最开始的地方加,不能放在条件判断等
            require
                可以在条件判断里
        1.2 类库导致
            export default
            module.exports
    2、组件引入
        2.1 html结构
            
            
        2.2 组件源
            import modalMember from '@/components/modalMember.vue'
        2.3 注册?
            components: {
                modalMember
            }
    3、组件数据
        3.1 父组件数据传递 props
            props验证
            值传递 引用传递
            单向数据流
        3.2 组件本身数据 data
        3.3 组件计算属性 computed
            method的区别,缓存,依赖
            getter
            setter
        3.4 数据监听 watch
            vs computed
            异步、开销大的时候,用watch
    4、模板语法
        4.1 文本
            {{}}
            v-text
            v-html
            v-once
                不更新
        4.2 属性
            v-bind:{name}
            简写 :{name}
            :class 注意注意
        4.3 条件属性
            v-if
            v-else-if
            v-else
            v-show
        4.4 循环 v-for
        4.5 事件
            v-on:click
            @click
        4.6 输入数据双向绑定
            v-model
            修饰符
                .lazy
                .number
                .trim
        4.6 注意事项
            a. 以下对数组操作,不会触发视图变更
                当你利用索引直接设置一个项时
                当你修改数组的长度时
            b. 视图更新队列
                数据变更,视图更新会放入到更新队列,异步更新
                如果想更新完进行回调,可以采用Vue.nextTick(callback)
                ps:监听数据变更,改版dom的滚动条位置计算等,数据更新了,但是dom还没有
    5、组件方法
        5.1 method
            获取绑定的数据
                e.currentTarget.dataset.index (数据绑定在父元素的时候用这个)
                e.target.dataset.index (数据绑定在当前元素的时候用这个)
            event
            事件修饰符
                .stop
                .prevent
                .capture
                .self
                .once
            键值修饰符
                事件
                别名 自定义
                修饰键
        5.2 directive 自定义指令(不能直接操作dom,所以需要自定义指令)
            bind
            inserted
            update
            componentUpdated
            unbind
    
    6、生命周期
        beforeCreate
        √ created
        mount
        beforeMount
        mounted
        beforeUpdate
        updated 
        beforeDestory
        destroyed
    
五、状态管理 Vuex
    1、解决什么问题
        一份数据,很多个组件需要使用
        这些组件不仅仅是父子关系
    2、安装
        npm install vuex --save
    3、项目使用(全局store)
        import store from './store/index'
        
        new Vue({
          el: '#app',
          router,
          store,
          template: '',
          components: { App }
        })
    4、store介绍
        4.1 state
            类似组件的data
        4.2 getters
            类似computed计算属性
            setters: 没用过
        4.3 mutations
            类似method
            ps:mutations之间不能直接调用,不确定是否可以这么做
        
六、网络请求 vue-resource
    1、安装
    2、使用
        import VueResource from 'vue-resource'
        Vue.use(VueResource)
        ps:作为插件引入
    3、需要重新封装,跟常规的ajax请求不大一样
        3.1 api地址区分环境
        3.2 统一做鉴权等
    
七、语法注意
    1、var 改用let 或者const
    2、缩进 2个字符
    3、不能有;号
    4、空格
        function () {
        }
        // 注释文字
    
    

mysql binlog日志查看

基本说明

  1. 定义
    binlog基本定义:二进制日志,也成为二进制日志,记录对数据发生或潜在发生更改的SQL语句,并以二进制的形式保存在磁盘中;

  2. 作用
    可以用来查看数据库的变更历史(具体的时间点所有的SQL操作)、数据库增量备份和恢复(增量备份和基于时间点的恢复)、Mysql的复制(主主数据库的复制、主从数据库的复制)

  3. 格式
    binlog的格式有三种,这也反应了mysql的复制技术:基于SQL语句的复制(statement-based replication, SBR),基于行的复制(row-based replication, RBR),混合模式复制(mixed-based replication, MBR)。相应地,binlog的格式也有三种:STATEMENT,ROW,MIXED。

  4. 日志位置
    修改my.cnf参数文件
    [mysqld]
    log-bin=mysql-bin

语法说明

  1. 命令
    binlog不能直接用文本的方式打开。
    使用show binlog events方式可以获取当前以及指定binlog的日志,不适宜提取大量日志。
    使用mysqlbinlog命令行提取(适宜批量提取日志)。

  2. 语法

    直接查看单个二进制日志文件:
    mysqlbinlog filename

    提取指定position位置的binlog日志
    --start-position="120" --stop-position="332"

    提取指定数据库binlog并转换字符集到UTF8
    --database=test --set-charset=utf8

    指定结束时间
    --start-datetime='2015-01-20 09:00:00' --stop-datetime='2015-01-20 12:59:59'

    指定row格式解码
    --base64-output=decode-rows

    -v用于输出基于row模式的binlog日志
    -vv为列数据类型添加注释

日志格式

# at 579744(开始位置)
#150905  7:02:54(时间截) server id 2543308(产生该事件的服务id)  end_log_pos(日志的结束位置) 579815  Query(事件类型)   thread_id=21    exec_time=0     error_code=0
SET TIMESTAMP=1441407774/*!*/;
BEGIN
执行的sql语句

其他说明

  1. 在数据出错的情况下,使用 MYSQLBINLOG 来恢复数据