Vue使用axios

使用axios访问API

一、按需引入
1、安装
yarn add axios

2、导入
import axios from ‘axios’

3、使用
  mounted: function () {
    // 按需引入
    axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘按需引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

二、全局引入
1、全局引入-结合Vueaxios
1.1安装
yarn add axios vue-axios

1.2入口文件导入
import VueAxios from ‘vue-axios’
import axios from ‘axios’

Vue.use(VueAxios, axios)

1.3使用
  mounted: function () {

    // 全局使用vue-axios
    this.axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

2、全局引入-使用原型属性(不推荐)
2.1安装
yarn add axios

2.2入口文件导入
import axios from ‘axios’

更改属性
Vue.prototype.$axios = axios

2.3使用
mounted: function () {
    // 全局使用prototype
    this.$axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’).then(response => {
      console.log(‘全局引入2’)
      console.log(response.data)
    }).catch(error => console.log(error))
  },

3、全局引入-结合vuex
3.1安装
yarn add vuex

3.2入口文件引入
import Vuex from ‘vuex’
import axios from ‘axios’

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    num: 1
  },
  actions: {
    // 封装一个 ajax 方法
    test () {
      axios({
        method: ‘get’,
        url: ‘https://localhost:8080/test.json’,
        data: {}
      }).catch(error => { console.log(‘错误提示’, error) })
    }
  }
})

3.3使用
   methods: {
    submitForm: function () {
      console.log(‘被点击’)
      this.$store.dispatch(‘test’)
    }
  }

vuex插件手册
https://vuex.vuejs.org/zh/

Vue安装vetur、eslint、prettier配置

{
  "editor.rulers": [
    120
  ],
  "editor.wordWrapColumn": 120,
  "editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "editor.tabSize": 2, //保存时自动格式化
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  },
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
}

Vue使用ElementUI

1、全局安装
yarn add element-ui -S

2、入口js导入
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’

3、使用
Vue.use(ElementUI)

4、页面使用组件
 <el-button>默认按钮</el-button>

更多参考:
https://element.eleme.cn/#/zh-CN/component/installation

PS:
Image图片属性fit说明
fill 被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应
contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加黑边
cover 被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应
none 被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应
scale-down 内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸

Vue引入静态资源

Vue引入静态资源<a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90">官方文档</a>&nbsp;

1、在js被导入或者在vue的template以及css中通过相对路径引入的,这样会被webpack处理

 2、放在public通过绝对路径引入,这类资源将会直接被拷贝 

引入图片示例 

1、相对路径引入

  

<img src="../assets/img/logo.png" />
//经过编译之后
<img src="data:image......." /> 

2、使用v-bind指令  

<img :src="require('../assets/img/logo.png')" />
<img :src="imgUrl" />
//在js定义imgUrl属性
imgUrl:'http://blog.phpfs.com/xxxx.png'

使用:src是v-bind:src的缩写,这样的是后面是可以写变量,注意如果变量是相对路径引入的图片,这样的也不会编译

3、使用绝对路径引入 

<img src="/static/img/icon.png" />
编译后
<img src="/static/img/icon.png" />

用绝对路径引入图片资源都会简单复制到编译后的目录中,不经过webpack处理。

Vue配置多模块

修改build/utils.js

const glob = require('glob')
const modulesPath = path.resolve(__dirname, "../src/modules")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')

// 多入口配置
exports.entries = function () {
  // 获取modules文件夹下所有目录下的main.js文件--入口文件
  var entryFiles = glob.sync(modulesPath + '/*/*.js')
  var map = {}
  // 遍历入口文件
  entryFiles.forEach((filepath) => {
    var filename = filepath.substring(filepath.lastIndexOf('/') + 1, filepath.lastIndexOf('.'))
    map[filename] = filepath
  })
  return map
}
// 多入口页面输出
exports.htmlPlugin = function () {
  var entryHtml = glob.sync(modulesPath + '/*/*.html')
  var arr = []
  entryHtml.forEach((filepath) => {
    var filename = filepath.substring(filepath.lastIndexOf('/') + 1, filepath.lastIndexOf('.'))
    var conf = {
      template: filepath,
      filename: filename + '.html',
      inject: true,
      chunks: ['manifest', 'vendor', filename]
    }
    // 生产环境特殊配置
    if (process.env.NODE_ENV === 'production') {
      conf = merge(conf, {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotos: true
        },
        chunksSortMode: 'dependency'
      })
    }
    arr.push(new HtmlWebpackPlugin(conf))
  })
  return arr
}

修改webpack.base.conf.js 

只修改entry配置

 // 配置多入口
 entry: utils.entries(),

修改webpack.dev.conf.js 

屏蔽原有的HtmlWebpackPlugin

添加如下代码

修改wenpack.prod.conf.js(参考webpakc.dev.conf.js修改)

【代码下载】

demo

使用步骤:

1、打开目录执行yarn install

2、执行yarn run dev

Session回收机制

文件存储
session.save_handler = files
session.save_path= “/var/lib/php/sessions”
session.gc_probability = 0
session.gc_divisor = 1000
session.gc_maxlifetime = 1800
文件存储清理的方案:
session.gc_divisor 与 session.gc_probability 合起来定义了在每个会话初始化时启动 gc(garbage collection 垃圾回收)进程的概率。此概率用 gc_probability/gc_divisor 计算得来。例如 1/100 意味着在每个请求中有 1% 的概率启动 gc 进程

Redis存储
session.save_handler = redis
session.save_path=”tcp://127.0.0.1:6379″

session.gc_maxlifetime = 1800

Redis存储清理的方案是按照gc_maxlifetime配置的时间来设定session 的ttl

Vue自定义组件-动态组件

<template>
  <div class="page-list">
    <span class="list-txt">{{ title }}</span>
    <!-- <ex-btn
      v-if="current == 'ex-btn'"
      v-on:myClick="myClick"
      :msg="msg"
    ></ex-btn>
    <ex-btn2 v-else v-on:myClick="myClick" :msg="msg">
      <img slot="icon" src="xxx.png" />
    </ex-btn2> -->
    <component
      keep-alive
      :is="current"
      v-on:myClick="myClick"
      :msg="msg"
    ></component>
  </div>
</template>
<script>
import btn from './button.vue'
import btn2 from './but2.vue'

export default {
  props: {
    title: { default: '标题' },
    msg: { default: '按钮' },
    current: { default: 'ex-btn' }
  },
  components: {
    'ex-btn': btn,
    'ex-btn2': btn2
  },
  methods: {
    myClick: function () {
      console.log('按钮被点击')
      this.$emit('myClick')
    }
  }
}
</script>

//使用
<template>
  <div id="list">
    <ex-list current="ex-btn2" title="标题1" msg="按钮1"></ex-list>
    <ex-list current="ex-btn" title="标题2" msg="按钮2"></ex-list>
    <ex-list
      current="ex-btn"
      title="标题3"
      msg="按钮3"
      v-on:myClick="test"
    ></ex-list>
    <ex-list
      ref="btnlist"
      current="ex-btn"
      title="标题4"
      msg="按钮4"
      v-on:myClick="test"
    ></ex-list>
  </div>
</template>
<script>
import myList from '../../components/demo/list.vue'
export default {
  name: 'list',
  components: {
    'ex-list': myList
  },
  methods: {
    test: function () {
      console.log('自定义')
      console.log('属性', this.$children)
      console.log('属性', this.$refs.btnlist.title)
    }
  },
  beforeCreate: function () {
    console.log('beforeCreate')
  }, // 组件实例化之前
  created: function () {
    console.log('created')
  }, // 组件实例化了
  beforeMount: function () {
    console.log('beforeMount')
  }, // 组件写入dom结构之前
  mounted: function () { // 组件写入dom结构了
    console.log('mounted')
    console.log(this.$children)
    console.log(this.$refs)
  },
  beforeUpdate: function () {
    console.log('beforeUpdate')
  }, // 组件更新前
  updated: function () {
    console.log('updated')
  }, // 组件更新比如修改了文案
  beforeDestroy: function () {
    console.log('beforeDestroy')
  }, // 组件销毁之前
  destroyed: function () {
    console.log('destroyed')
  }// 组件已经销毁
}
</script>

Vue自定义组件-事件使用

<!-- 组件 -->
<template>
  <button @click="btnClickEvent">
    <!-- 插件属性 -->
    <slot name="icon"></slot>
    <span>{{ msg }}</span>
  </button>
</template>

<script>
export default {
  props: {
    msg: {
      default: '下载'
    }
  },
  methods: {
    btnClickEvent: function () {
      // 执行统一事件
      console.log(this.msg)
      // 触发父组件自定义事件
      this.$emit('myClick')
    }
  }
}
</script>
组件使用
<template>
  <div id="myButton">
    <ex-btn v-on:myClick="doSth1" v-bind:msg="msg1"></ex-btn>
    <ex-btn v-on:myClick="doSth2" v-bind:msg="msg2"></ex-btn>
    <ex-btn v-on:myClick="doSth3" v-bind:msg="msg3">
      <img slot="icon" class="ico" src="@/assets/img/setting.png" />
    </ex-btn>
  </div>
</template>
<script>
import btn from '../../components/demo/button.vue'
export default {
  name: 'myButton',
  components: {
    'ex-btn': btn
  },
  data: function () {
    return { msg1: '变量1', msg2: '变量2', msg3: '变量3' }
  },
  methods: {
    doSth1: function () {
      console.log('方法1')
    },
    doSth2: function () {
      console.log('方法2')
    },
    doSth3: function () {
      console.log('方法3')
    }
  }
}
</script>

Vue自定义组件-属性使用

自定义组件Button

<template>
  <button>
    <span>{{ msg }}</span>
  </button>
</template>

<script>
export default {
  props: {
    msg: {
      default: '下载'
    }
  }
}
</script>

组件使用

<template>
  <div id="myButton">
    <ex-btn :msg="msg1"></ex-btn>
    <ex-btn v-bind:msg="msg2"></ex-btn>
    <ex-btn msg="按钮"></ex-btn>
  </div>
</template>
<script>
// 引入自定义组件
import btn from '@/components/demo/button.vue'
export default {
  name: 'myButton',
  components: {
    'ex-btn': btn
  },
  data: function () {
    return { msg1: '变量1', msg2: '变量2', msg3: '变量3' }
  }
}
</script>

Laya发布模式区分

1内嵌模式

该模式导出时会将页面的配置信息导出为项目代码文件

 export class RuntimeTestUI extends Scene {
        public static  uiView:any ={"type":"Scene","props":{"width":640,"height":1136},"compId":2,"child":[{"type":"Image","props":{"y":0,"x":0,"width":206,"skin":"comp/image.png","name":"Image_Bg","height":170},"compId":5}],"loadList":["comp/image.png"],"loadList3D":[]};
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.createView(RuntimeTestUI.uiView);
        }
    }

2加载模式

会将所有页面的配置信息导出为json格式的一个文件

export class RuntimeTestUI extends Scene {
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.loadScene("demo1/RuntimeTest");
        }
    }

3分离模式

UI界面上所有组件的属性、界面布局等逻辑与界面内容分离开,分离模式也是导出为json格式,但有所区别的是分离模式会将每一个页面独立导出,会产生多个json文件。

4文件模式

不生成场景类,进一步减少文件大小,使用的时候用Scene.load方式加载。区别于前三种最大的的不同就是,文件模式不能直接调用场景内的变量,需要getchild获取之后进行操作。前三种的场景类里声明了变量,有代码提示直接可以操作内部的变量。