Vue小记

vue安装

1. 安装nodejs
   http://nodejs.cn/download/ 下载安装，node安装完成npm也就安装完成，查看版本
   node -v 和 npm -v
2. 安装vue
   (sudo) npm install -g vue-cli
   vue -V

代码管理

代码提交时会忽略node_modules文件夹,生成node_modules命令：npm install
引入模块：npm install vue-router

vue使用

更新依赖

npm install

初始化项目

进入项目目录vue init webpack vueapp

打包

1. config/index.js里的assetsPublicPath的字段’/‘->’./’
2. npm run build

语法

1. vue import 中@代表src路径
2. v-on可以替换为@，比如<p v-on:click=""> -> <p @click="">
3. v-bind，动态绑定，可以替换为:,比如<el-submenu :index="subMenu1.id + ''" v-for="subMenu1 in menuRoot.subMenuWebList">等价于<el-submenu v-bind:index="subMenu1.id + ''" v-for="subMenu1 in menuRoot.subMenuWebList">
4. ()=>箭头函数
   ()=>相当于function()，但是箭头函数不改变this的指向。如果用function，里面this指的函数本身，而不是全局对象

let ws = new WebSocket("ws://127.0.0.1:28080/websocket");
ws.onopen = function ()
{
    ws.send("login://"+this.loginname+":connected");
    this.websocket = ws;//this指向函数，而不是全局的websocket对象
};
          
  //改为
  
  let ws = new WebSocket("ws://127.0.0.1:28080/websocket");
  ws.onopen = ()=>
  {
    ws.send("login://"+this.loginname+":connected");
    this.websocket = ws;
  };
  
  //或者
  
  let that = this
  ws.onopen = function ()
  {
    ws.send("login://"+this.loginname+":connected");
    that.websocket = ws;
  };

5. 异步转同步Promise

const get = function (url, params) {
  return new Promise((resolve, reject) => {
    axios.get($api[url], { params }).then((res) => {
      if (res) {
        const { code, data, message } = res.data
        if (code == NO_ERR) {
          resolve(data)
        } else {
          Vue.prototype.$toast(message)
          // reject(`${url}: ${code} -- ${message}`)
        }
      }
    }).catch((err) => {
      reject(err)
    })
  })
}

Json使用

字符串转为对象：JSON.parse(jsonString);
对象转为字符串：JSON.stringify(object);
list（数组）对象：list[index]
对象获取属性：object.name

引入配置文件

1. 创建js文件src/api/global.js

const baseUrl = "http://localhost:8100/"

export default {
  baseUrl
}

2. 将js import到vue中直接使用

import global from '@/api/global'
...
var baseUrl = global.baseUrl

3. 全局引用：将js import到main.js中，使用Vue.prototype.GLOBAL创建别名，使用this即可访问

//main.js中
import global from '@/api/global'

Vue.prototype.GLOBAL = global;

//xxx.vue中
//使用属性
var baseUrl = this.GLOBAL.baseUrl;

//使用公共方法
<span @click="GLOBAL.goback()">返回</span>

跨域设置

允许携带cookieaxios.defaults.withCredentials = true

生命周期

mounted：html加载完之后执行
created：渲染成html前执行

框架

element ui：
https://element.eleme.cn/2.0/#/zh-CN

markdown

使用mavon-editor模块
官网：https://www.npmjs.com/package/mavon-editor
博客：https://blog.csdn.net/wn1245343496/article/details/82147850

Ajax

使用axios模块实现
官网：http://www.axios-js.com/
npm install axios
import axios from 'axios'

axios.post(url,{"dtdate":select.value,"teacheremail":this.teacheremail}).then(resp => {
    this.unhandledList = resp.data.data
  }).catch(err => {
    console.log('请求失败：'+err.status+","+err.statusText)
  })

addBlog2(){
  var url = this.GLOBAL.baseUrl + "blog/saveBlog";
  var userid = 1;
  axios({
    method:"post",
    url:url,
    data:{
      "content":this.content,
      "userid":userid
    }
  }).then((res)=>{
    console.log(res.data);
  })
}

form-data格式发送请求

axios({
        url: $api[url],
        method: 'post',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: params,
        transformRequest: [function (data) {
          let ret = ''
          for(let item in data) {
            ret += `${encodeURIComponent(item)}=${encodeURIComponent(data[item])}&`
          }
          return ret
        }]
      }).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })

路由：router

官网：https://router.vuejs.org/zh/guide/#html
npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

传参:

//props注册 main.js中
const routes = [
  { path: '/blogAdd', component: BlogAdd },
  { path: '/blogList', component: BlogList },
  { path: '/blogView', component: BlogView,props:{id:143661634716673} }
]
//query复制 blogList中
this.$router.push({path:"/blogView",query:{id:id}});
//$route.query取值
mounted() {
    this.getBlog(this.$route.query.id);
}

时间格式化显示

    //js方法
    timestampToTime (cjsj) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = date.getDate() + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y+M+D+h+m+s
    }
    //标签中使用
    {{timestampToTime(createTime)}}

CheckList问题列表

1. Vue打包后路径匹配不到无法显示问题：

在config/index.js文件中将build下的assetsPublicPath： '/',改为assetsPublicPath： './',

2. 打包后ElementUi下icon（或fonts字体目录）路径找不到，多了两级目录：

将build/utils.js中的generateLoaders方法下

  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
  })

改为

  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })

3. 请求发送后，收不到参数。浏览器network的header中不显示参数发送

问题在错误信息中 errorMessage