vue

找不到模块“包装” 当你维护别人的项目代码的时候，在自己这里电脑上运行，打开一个项目cnpm run dev的时候，报错如下 Cannot find module 'wrappy' 当出现这个问题的时候，找不到模块，并不意味意味着模块不存在，也有可能是模块的路径不对，或者是webpack的配置错误。 解决办法： 遇到诸如此类Node.js Cannot find module 'xxx' 问题解决这，首先想到的第一办法：使用npm install -g 'xxx' ； 在命令行输入： npm install -g wrappy 安装完成 安装完成之后，重新开启项目cnpm run dev，则成功跑通项目 注： 关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。公众号回复“1”，拉你进程序员技术讨论群。 来源： https://www.cnblogs.com/ting6/p/9725381.html

https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragula-demo/ 安装 并在vue里面使用的详细说明 Drag and drop so simple it hurts Vue wrapper for dragula drag'n drop library, based on vue-dragula by @Astray-git . vue 为 dragula 拖拽 包装 减少 代码，基于 vue-dragula 。 This library has been refactored, upgraded and extended with powerful new features for use with Vue 2. 代码已经被重构了，为vue 2 升级并且延申了有用的新特性 Call for help: copy error 寻求帮助: 拷贝的错误 This library has a long standing issue with the copy operation, resulting in items being inserted twice in the target container.

1 <div> 2 <draggable :list=“rows” group="people" @add="vadd"> 3 <component v-for="row in rows" ：key=“row.id” ：is="getComponentName(row)"></component> 4 </draggable> 5 6 <draggable :disable="item.ent" :group=“{name:"people",pull:"clone", put:false}” v-for="row in rows" ：key=“row.id”> 7 8 </draggable> 9 </div> 10 11 //js 12 13 Vue.component("name",{ 14 props:["row"], 15 methods:{ 16 17 }, 18 template 19 20 }) View Code 来源： https://www.cnblogs.com/lljboke/p/11420408.html

前端框架很多，vue相对来说上手快点，所以这里选用vue。 地图js api也很多，百度、高德、腾讯、天地图都有，都是基于其自身的地图地图封装的，我们这里选择一个更经典、更原生的leaflet，这样就可以不囿于地图底图限制，且leaflet是瓦片加载，性能更好些。 写程序，不管是后端，还是前端，跟造房子有点像，都需要先有框架，再往里面填塞。 我们的前端程序，大致是这么个步骤。 1.先用vue搭建个工程出来。 2.用element做个布局。 3.用leaflef加载个地图。 4.axios跟后端交互个数据。 5.webpack打包，整合进后端。 闲话少叙，进入环境搭载。 一、安装nodejs 下载个吻合电脑版本号的安装程序： http://nodejs.cn/download/ 。 一直安装下去即可。 然后配置一下系统和环境变量。 安装与配置方法参见： https://www.cnblogs.com/liuqiyun/p/8133904.html 先运行一下：npm i -g npm，把版本升级至最新版，这个注意下，因为不升级，安装模块的时候，容易报错。 随便安装个模块试一试。 运行：npm i express -g。 i其实就是install的简写。 二、搭建VUE2脚手架 以管理员身份打开cmd。 切换路径 切换到D:\gismap\git路径下，我把前端工程放在这里。 d:

原因： 此项错误表示 8080 端口被占用 解决方案一： 打开cmd 输入：netstat -ano|findstr "8080" 查看所有端口信息，并通过findstr “8080”命令只显示含有8080字符串的信息。如图，找到端口 8080，以及对应的 PID 输入：tskill PID 即可杀死进程，释放 解决方案二： 打开cmd 输入：netstat -ano | findstr “5896” 找到端口 8080，以及对应的 PID 输入：tasklist | findstr "5896" 使用PID做参数去查任务列表，找到PID 对应的任务，使用tskill 5896 删掉任务 输入：tskill PID 杀死进程 或者：打开任务管理器，结束对应进程。 来源： https://www.cnblogs.com/freyfeng/p/9890289.html

前言 Vue 项目开发过程中，经常用到插件，比如原生插件 vue-router 、 vuex ，还有 element-ui 提供的 notify 、 message 等等。这些插件让我们的开发变得更简单更高效。那么 Vue 插件是怎么开发的呢？如何自己开发一个 Vue 插件然后打包发布到npm？ 本文涉及技术点： Vue 插件的本质 Vue.extend() 全局方法 如何手动挂载 Vue 实例 Vue.use() 的原理 如何打包成 umd 格式 发布前如何测试 npm 包 一、定义 什么是Vue插件，它和Vue组件有什么区别？来看一下官网的解释： “插件通常用来为 Vue 添加全局功能。” “组件是可复用的 Vue 实例，且带有一个名字。” —— Vue.js 官网 Emmmm，似乎好像有种朦胧美。。。 我来尝试解释一下，其实， Vue 插件 和 Vue组件 只是在 Vue.js 中包装的两个概念而已，不管是插件还是组件，最终目的都是为了实现逻辑复用。它们的本质都是对代码逻辑的封装，只是封装方式不同而已。在必要时，组件也可以封装成插件，插件也可以改写成组件，就看实际哪种封装更方便使用了。 除此之外，插件是全局的，组件可以全局注册也可以局部注册。 我们今天只聚焦 Vue 插件。 插件一般有下面几种： 添加全局方法或者属性。如: vue-custom-element 添加全局资源

给前端同事部署了web项目之后，访问发现除了index.html可以访问，其他的路径使用了“伪静态”。比如访问：http://localhost:8081/user/login，访问即报404错误，这个实际上是请求HTML相关资源而非后台接口，后面网上查了相关资料找到了解决办法。 upstream portalServer { server 192.168.1.1:8080; } server { listen 8081; server_name localhost; root /usr/local/application/nginx/web/build; location / { try_files $uri $uri/ @router; index index.html;a } location @router{ rewrite ^.*$ /index.html last; } #代理后台接口 location /api/ { proxy_pass http://portalServer/; proxy_set_header Host $host:$server_port; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 来源： https://www.cnblogs

Vue-Echarts vue-echarts是封装后的vue插件， 基于 ECharts v4.0.1 + 开发，依赖 Vue.js v2.2.6 +，功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。 Demo GitHub Repo Vue-Pikaday 一个简单而灵活的自定义指令，用于在Vue.js（v2.xx）应用程序中使用 Pikaday 。 Demo GitHub Repo Vue-particles Vue粒子特效 Demo 　　GitHub Repo better-scroll BetterScroll是一个插件，旨在解决移动端的滚动环境（已支持PC）。核心的灵感来自 iscroll 的实现，因此 BetterScroll 的API总体上与iscroll兼容。更重要的是，BetterScroll还扩展了一些功能并根据iscroll优化了性能。 Demo GitHub Repo vue-video-player 一款视频播放器 Demo GitHub Repo vue-quill-editor 基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。 Demo GitHub Repo vue-countTo vue-countTo是一个无依赖，轻量级的vue组件，可以自行覆盖easingFn。 Demo GitHub

一、vue前端代码准备工作： 1、目录结构 2、在 npm run build 之前 将/src/config/index.js文件中的 assetsPublicPath: '/', 改为 assetsPublicPath: './',否则当打开页面时会出现空白页的情况。 3、若项目使用的elementUI，编译后可能会出现elementUI自带icon变为小方框情况，解决办法：修改/src/build/utilutils.js 文件，在执行 npm run build 4、将编译后的dist文件夹压缩上传到服务器某目录下。 二、服务器准备及部署 1、在服务器上安装 nginx 2、nginx常用命令 （1）启动、停止、重载命令 systemctl start nginx.service systemctl stop nginx.service systemctl reload nginx.service systemctl status nginx.service （2）查看nginx的状态及进程与端口（启动后） 命令1：systemctl status nginx.service 命令2：netstat -antp | grep :80（查看80端口被哪个服务占用）or netstat -antpuel | grep ":22" | grep -v grep（过虑grep本身）

场景介绍 对于表单项，存在前一个表单项填写控制后一个表单项展示问题。即动态表单项展示。 处理思路 定义表单项变量：:label="nameLabel" < Form ref = "form" : model = "formModel" : rules = "formRulesList" label - width = "100px" size = "mini" > < FormItem label = "家长" required prop = "isFather" > < Select v - model = "formModel.isFather" clearable @change = "changeFamilyType" > < Option v - for = "(dataType, index) in familyList" : key = "index" : label = "dataType.type" : value = "dataType.isFather" / > < / Select > < / FormItem > < FormItem : label = "nameLabel" required prop = "nameId" v - if = "isVisible" > < Select v - model = "formModel.nameId"