npm i vue-cli -g

vue init webpack my-project

npm i

port: 8081

dev: {
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api':{
      target:'http://localhost:8080',
      changeOrigin:true,
      pathRewrite:{
        '^/api':'/api'
      }
    }
  },

proxy: {
  '*': {//*表示所有url
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false,
    ws: false
  },
  '/static/*': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false
  }
}

if (module.hot) {
    //解决wds一直请求的bug
  module.hot.accept();
}

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import store from './store';
import axios from 'axios';
import 'common/css/base.css';
import 'common/css/animate.css';
import jquery from 'jquery';
Vue.use(iView);
Vue.config.productionTip = false;
Vue.prototype.$http=axios;
Vue.prototype.$=jquery;
if (module.hot) {
    //解决wds一直请求的bug
  module.hot.accept();
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)

｝）

router.beforeEach((to, from, next) => {
  //to即将进入的目标路由对象，from当前导航正要离开的路由， next  :  下一步执行的函数钩子
  if(to.path === '/login'||to.path === '/register'){
    next()
  }  // 如果即将进入登录路由或者进入注册，则直接放行
  else {     //进入的不是登录路由
    if(util.getCookie('userInfo')){
      //如果需要登录验证，或者已经登录成功，则直接放行
      if(islogin.getislogin()){

      }
      next()
    }

    else{
      //下一跳路由需要登录验证，并且还未登录，则路由定向到  登录路由
      next({
        path: '/login'
      })
    }
  }

})

项目中用到codemirror，jquery-slimscroll，ztree,Markdown,echarts等插件，其中只讲一两个简

两种方法使用，一种直接引：

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.slimscroll.min.js"></script>

另一种用npm

npm i jquery-slimscroll --save

代码

$("#inner-content").slimScroll({
        width: '100%', //可滚动区域宽度
        height: '100%', //可滚动区域高度
        size: '10px', //滚动条宽度，即组件宽度
        color: '#000', //滚动条颜色
        position: 'right', //组件位置：left/right
        distance: '0px', //组件与侧边之间的距离
        start: 'top', //默认滚动位置：top/bottom
        opacity: .4, //滚动条透明度
        alwaysVisible: true, //是否 始终显示组件
        disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
        railVisible: true, //是否 显示轨道
        railColor: '#333', //轨道颜色
        railOpacity: .2, //轨道透明度
        railDraggable: true, //是否 滚动条可拖动
        railClass: 'slimScrollRail', //轨道div类名 
        barClass: 'slimScrollBar', //滚动条div类名
        wrapperClass: 'slimScrollDiv', //外包div类名
        allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
        wheelStep: 20, //滚轮滚动量
        touchScrollStep: 200, //滚动量当用户使用手势
        borderRadius: '7px', //滚动条圆角
        railBorderRadius: '7px' //轨道圆角
    });

$('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ //滚动条到底部执行的事件 
                if(pos=='bottom'){
                   // 执行其他逻辑
                }
            });  

Markdown

Markdown 的目标是实现「易读易写」。可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

也就是我们现在用到的博客文章显示的插件。

两种方式使用

代码直接引入marked.js

另一种npm安装

npm i marked --save

两种都能够使用，在普通html页面需要实现双向数据绑定，所以这样实现：

var obj = {};

 Object.defineProperty(obj,'code',{
       set:function(newVal){
           document.getElementById('code-text').value = newVal;//要编辑的编辑器
           document.getElementById('text').innerHTML = marked(newVal);
       }
 });
document.addEventListener('keyup',function(e){
        obj.code = e.target.value;
});

还有ctrl+s保存编辑的文档：

 $("#code-text")[0].οnkeydοwn=function(event) {
       if (event.ctrlKey == true && event.keyCode == 83) {//Ctrl+S
                  event.preventDefault();
                  update(res.Document.uuid,$("#code-text").html())
        }
 }

 var imgReader = function( item ){
        var blob = item.getAsFile(),//直接拿到的file文件
            reader = new FileReader();
        // 读取文件后将其显示在网页中
        reader.onload = function( e ){
            var img = new Image();
            console.log(e.target.result)//拿到粘贴的图片的base64编码
            console.log(JSON.stringify(blob))
            console.log(typeof blob)
            img.src = e.target.result; document.body.appendChild( img );
        }; // 读取文件
        reader.readAsDataURL( blob );
    };
    document.getElementById( 'code-text' ).addEventListener( 'paste', function( e ){ // 添加到事件对象中的访问系统剪贴板的接口
        var clipboardData = e.clipboardData, i = 0, items, item, types;
        if( clipboardData ){
            items = clipboardData.items;
            if( !items )
            { return; }
            item = items[0]; // 保存在剪贴板中的数据类型
            types = clipboardData.types || [];
            for( ; i < types.length; i++ ){
                if( types[i] === 'Files' ){
                    item = items[i]; break;
                }
            } // 判断是否为图片数据
            if( item && item.kind === 'file' && item.type.match(/^image\//i) ){ imgReader( item );
            }
        }
    });

在vue中这样使用Markdown ：

inputMarkdown: function() {
            var rendererMD = new marked.Renderer();
            marked.setOptions({
              renderer: rendererMD,
              gfm: true,
              tables: true,
              breaks: false,
              pedantic: false,
              sanitize: false,
              smartLists: true,
              smartypants: false
});
this.html = marked(this.md);

<keep-alive include="edit,server">
      <router-view></router-view>
</keep-alive>

 export default {
    name:'edit',//组建的名字
    data(){
      return{
   

在vue开发中总是遇到这样的错误

    export default {
        name:"menu"
    }

半缓存需要用到vue的钩子：activated，这个钩子是你每进去一次页面就运行一次，所以当你需要步缓存某些请求时可以放在activated里面：

activated(){
      this.getList()
｝

在项目中，涉及到一个多层数组查询里面是否有某个元素，传统方法是递归遍历，这个对于我们前端来说简直就是让初学日语的人说一大串很流利的日语。反正我是不会用那么复杂的方法。es6给我们提供了两个好的语法糖：

startWith，endWith,includes

这三个都是需要es6语法才能运行的，而且是在字符串中使用，所以用之前需要先声明方法，否则浏览器识别不了：

String.prototype.startWith=function(str){//重新定义startWith
     if(str==null||str==""||this.length==0||str.length>this.length)
          return false;
     if(this.substr(0,str.length)==str)
          return true;
     else
          return false;
     return true;
}

let names=_this.names;
for(let i=0;i<names.length;i++){
    if(names[i].path.startWith(path)){
          names.splice(i,1)
    }
}

很多时候我们需要用到这种情况，当我从固定某个页面路由跳转到另一个页面时，我需要去到另一个页面的某个固定的页面，也就是另一个页面的某个子路由：

if (from.path == '/home/edit'&&to.path == '/home/server/serverlist'){
    next({
      path: '/home/server/robot'
    })

  }

router.beforeEach((to, from, next) => {
｝)

现在说一下WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

我在vue的main中这样实现：

function RobotWebSocketPlugin (traderKey,robotKey) {
  let addr = 'ws://'+window.location.host+'/api/subscription/robot?traderKey='+traderKey+'&robotKey='+robotKey;//推送数据的连接

  let socket = new WebSocket(addr);//声明一个WebSocket

  // let p = new robothostSubscription();
  socket.onmessage = function(event) {//event就是拿到的数据内容
    // console.log(event.data);
    let data = JSON.parse(event.data);

    // console.log(data);
    switch (data.Topic){
      case "OnMarketStatusChanged":

      case "OnRobotStatusChanged":
      // do something...
        
      case "OnLog":
      // do something...
   
      case "OnOrder":
      // do something...

      case "Indicator":
      // do something...
       
    }
  };
  socket.onopen = function(event) {
    // loadRobotAndRobothost(store);

  };
}

j接着我把socket映射到vue上：

let RobotWebSocket = {
};
RobotWebSocket.socketBind = function (traderKey,robotKey) {
  RobotWebSocketPlugin(traderKey,robotKey)
};
Vue.prototype.RobotWebSocket = RobotWebSocket;

ctrl实现多选

let _this=this;
this.$(document).on('keydown',function (e) {
    if(e.keyCode==17){
      _this.isCtrl=true;
    }
})
this.$(document).on('keyup',function (e) {
    if(e.keyCode==17){
       _this.isCtrl=false;
    }
})