网易云信IM讲解

npm install --global vue-cli
/*
*全局安装脚手架
*/
vue init webpack my-project
/*
*创建基于webpack的项目，vuecli3 不是此方式注意
*后面就是npm run dev 跑起你的项目
*/

  login () {
     /*
	 * 这里就是你需要做的一系列的登陆逻辑
	 * 然后下面的代码是需要成功的时候去执行的东西
	 * 他的demo 是用了md5加密了，你真实的逻辑就不用去进行加密
	  /
      let sdktoken = md5(this.password)
      cookie.setCookie('uid', this.account.toLowerCase())
      cookie.setCookie('sdktoken', sdktoken)
      kk = config.homeUrl
	  /*
	  *注意Cookie在浏览器端是ok 的，但是如果你需要打包成app 你需要替换成 localStorage，不然你
	  *后面的所有操作都无法进行，你只需要全局替换 几个地方，第一就是所有的
	  */
	   cookie.setCookie('uid') cookie.setCookie('sdktoken')包含这2个地方全部替换成
	   localStorage
	   /*
	   *接下来你就去走你的逻辑，你可以console.log()打印一下你console.log(this.account.toLowerCase())里面的
	   *值，这些就是触发sdk里面的方法
    },

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// vux 必需品
// 原来的 webpack.base.js 配置
const vuxLoader = require('vux-loader')
const webpackConfig = {
  context: path.resolve(__dirname, '../'),
  entry: {
  	app: './src/main.js'
  },
  output: {
  	path: config.build.assetsRoot,
  	filename: '[name].js',
  	publicPath: process.env.NODE_ENV === 'production' ?
  		config.build.assetsPublicPath : config.dev.assetsPublicPath
  },
  resolve: {
  	extensions: ['.js', '.vue', '.json', '.less'],
  	modules: [
  		resolve('src'),
  		resolve('node_modules')
  	],
  	alias: {
  		'vue$': 'vue/dist/vue.esm.js',
  		'@': resolve('src'),
  	}
  },
  module: {
  	rules: [{
  			test: /\.vue$/,
  			loader: 'vue-loader',
  			options: vueLoaderConfig,
  		},
  		{
  			test: /\.js$/,
  			loader: 'babel-loader?cacheDirectory=true',
  			include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
  		},
  		{
  			test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  			loader: 'url-loader',
  			options: {
  				limit: 10000,
  				name: utils.assetsPath('img/[name].[hash:7].[ext]')
  			}
  		},
  		{
  			test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  			loader: 'url-loader',
  			options: {
  				limit: 10000,
  				name: utils.assetsPath('media/[name].[hash:7].[ext]')
  			}
  		},
  		{
  			test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  			loader: 'url-loader',
  			options: {
  				limit: 10000,
  				name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  			}
  		},
  		{
  			test: /\.css$/,
  			loader: 'style!css!postcss!postcss-cssnext',
  			include: [resolve('src/themes'), resolve('node_modules/vux/src')]
  		},
  		{
  			test: /\.less$/,
  			loader: 'style!css!less',
  			include: [resolve('src/themes')]
  		},
  	]
  },
  node: {
  	// prevent webpack from injecting useless setImmediate polyfill because Vue
  	// source contains it (although only uses it if it's native).
  	setImmediate: false,
  	// prevent webpack from injecting mocks to Node native modules
  	// that does not make sense for the client
  	dgram: 'empty',
  	fs: 'empty',
  	net: 'empty',
  	tls: 'empty',
  	child_process: 'empty'
  },

}

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{
  	name: 'vux-ui'
  }],
  externals: {
  	'vue': 'Vue',
  	'vuex': 'Vuex',
  }
})

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

{
"presets": [
 ["env", {
   "modules": "commonjs",
   "targets": {
     "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   },
 		"loose": true,
 }],
 "stage-2"
],
"plugins": ["add-module-exports","transform-vue-jsx", ["transform-runtime", {polyfill: true}]],
"comments": false
}

- 打开vue项目路径下的  **config** 地址下面的 index.js 中的 **proxyTable**

'/api/\*\*': {    target: 'http://\*\*\*\*\*\*',    changeOrigin: true,    pathRewrite: {    '^/api': ''     }    /\*    \*此处的api 的名字就是代表http://47.110.146.12    \*比如如果你需要去请求数据的时候就是    \*/    	axios.get(api+ '/api/code/img')    			.then(function(response) {    			})    			.catch(function(error) {    				console.log(error);         });    	 /\*此方法的唯一缺陷就是必须后端与前端端口一致，否则还是会报跨域错误   } },

mkdir -p myproject  
//创建一个项目
npm install --save-dev http-proxy-middleware
npm install --save express
//安装一下依赖
const express = require('express');
const app = express();
var proxy = require('http-proxy-middleware');

var onProxyReq = function(proxyReq, req, res) {
 // add new header to request
 // proxyReq.setHeader('x-added', 'foobar')
}

var onError = function(err, req, res) {
 console.log('Something went wrong.')
 console.log('And we are reporting a custom error message.')
}

// proxy middleware options
var options = {
   target: 'https://api.server.domain',
   rejectUnauthorized:false,
   changeOrigin: true,
   onProxyReq: onProxyReq, 
   onError: onError,
   logLevel: "debug"
};

// create the proxy (without context)
var exampleProxy = proxy('/api/**',options);
app.use(exampleProxy);

// create the listening
app.listen('3000', function() {
   console.log('[DEMO] Server: listening on port 3000')
});
/*
*解释:
*从前端访问localhost:3000,地址以/api/开始的所有请求转发到https://api.server.domain后端服务
*例如:
*localhost:3000/api/common/info  =>   https://api.server.domain/api/common/info
*/

function connectNim({state,commit,dispatch}, obj) {
	  let {
		force
	  } = Object.assign({}, obj)
	// 操作为内容页刷新页面，此时无nim实例
	   if(!state.nim || force) {
		let loginInfo = {
			uid: localStorage.getItem('uid'),
			sdktoken:localStorage.getItem('sdktoken'),
		}
		if(!loginInfo.uid) {
			// 无cookie，直接跳转登录页
		let regist=sessionStorage.getItem('registred')
			if(regist==99){
			/*
			*这里这个就是如果当你点击了注册，或者找回密码的时候，会传递一个名为 99 的参数
			*如果点击了，这里就会接收到 值，就不会强制跳转登录，会走你需要的流程，
			*但是你记得登录之后，必须要清除当前的 值，否则会出问题的，不然你下次没有cookie 他也不会跳转
			*到你的登录页面了，
			*此方法仅供参考
			}else{
				kk = '#/login'
			}
		} else {
			console.log("有空")
			// 有cookie，重新登录
			dispatch('initNimSDK', loginInfo)
		}
	}
}

- 如果你后端返回了的是 **/upload\_pic/29e10cb1b3de0497b84424c9379a025d?imageView&thumbnail=40z40** 这样一串，然后 你通过云信返回的时候，会前面 多加一个 **HTTP//**我也不知道为啥，云信的客服也不知道为啥，好吧，那就替换Ip 地址， ES6中出了一个判断字符串是否含有另一个字符串的方法  

 npm install electron --save-dev
 npm install electron-builder  --save-dev
 /* 
 *  这个代码的意思是引入这个打包的js 
 *  第二句的意思是进行打包命令
 */

  "scripts": {
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ IM  --platform=win32 --arch=x64  --   icon=./src/assets/yizhu.ico  --overwrite"
	/*第一句代码就相当于 npm run dev 一个意思
	*进行预览查看
	*第二句代码意思是进行打包命令
	*语法：electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

    *1. sourcedir 资源路径，在本例中既是./dist/
    *2. appname 打包出的exe名称
    *3. platform 平台名称（windows是win32）
    *4. arch 版本，本例为x64
    *5. [optional flags…] 配置项选填，可以设置二进制打包等，默认没有这些

  },