![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
Vue.js
表演系小学渣
沉迷键盘,无法自拔
展开
-
docker部署vue项目
1、执行一下命令,拉去nginx镜像docker pull nginx2、将vue项目进行打包,sftp等方式将dist的文件放到linux系统中3、在dist同级目录下创建Dockerfile文件,内容如下FROM nginx:latestMAINTAINER 729253864@qq.comCOPY dist/ /usr/share/nginx/html/FROM nginxLABEL MAINTAINER="729253864@qq.com"# 瑕嗙洊default閰原创 2020-07-17 15:20:47 · 390 阅读 · 0 评论 -
vue事件绑定
@dblclick.native 绑定原生事件,可改成@dblclick.native="handle" 然后在methods中写handle方法<template> <div class="select-user"> <Modal v-model="modal.visible" :transfer="false" :title="modal.ti...原创 2020-03-13 08:43:40 · 168 阅读 · 0 评论 -
vue中axios实现同步请求(代码实现iview的table多选框默认选中)
axios封装的请求, user.jsimport axios from '@/libs/api.request'export const getAllUser = (data) => { return axios.request({ url: 'user/mgt/getAllUser', method: 'post', data: data })...原创 2020-03-12 17:26:56 · 781 阅读 · 0 评论 -
vue使用store定义全局共享变量,实现夸页面数据修改与共享
一、定义变量1、在vue项目src目录下有一个store文件夹 ,创建项目会自带,若没有百度如何创建store2、在store的module下创建一个user.js文件,其中第一行import的是一个封装的js文件,调用getUnreadCount方法将会到后台查询未读消息个数import { getUnreadCount} from '@/api/user'export...原创 2020-02-07 18:04:22 · 4456 阅读 · 0 评论 -
vue创建工具utils文件
说明: 封装一个公共方法connectWebsocket(),进行全局调用1、在src下创建utils文件夹,目录下创建index.htmlimport config from '@/config'export default { // websocket websocket: '', // 创建websocket链接 connectWebsocket (val) {...原创 2020-01-19 14:41:54 · 6335 阅读 · 0 评论 -
eslint: 'map' is assigned a value but never used
package.json中找到rules:{} 添加"no-unused-vars": 0原创 2019-12-26 17:22:52 · 2250 阅读 · 1 评论 -
vue下载zip文件
前台 :<q-btn color="primary" size="md" @click="downwin"> downwin () { this.$axios({ method: 'get', url: '/updateServerVersion/zipdownload?filename=electron-mat.zip', ...原创 2020-02-25 17:15:08 · 768 阅读 · 0 评论 -
iview与jpa或者hibernate前后台日期处理
1、页面<DatePicker type="date" @on-change="model.planStartData=$event" v-model.trim="model.planStartData" placeholder="Select date" style="width: 100%"></DatePicker>2、后台处理(1)、后台实体类中da...原创 2019-04-16 17:34:24 · 110 阅读 · 0 评论 -
Vue报错Custom elements in iteration require 'v-bind:key' directives."错误解决
错误代码<i-option v-for="item in typeList" :value="item.value">{{ item.label }}</i-option>修改后<i-option v-for="item in typeList" :key="item.label" :value="item.value">{{ item.labe...原创 2019-04-16 17:55:31 · 48337 阅读 · 3 评论 -
Vue父组件向子组件传递参数
1、父组件projectBatchsindex.vue// 使用:projectId="this.projectId" 传递参数<ProjectBatchEdit ref="projectBatchEdit" :projectId="this.projectId" @on-update="search"></ProjectBatchEdit>import Proj...原创 2019-04-26 10:22:48 · 1696 阅读 · 0 评论 -
vue子组件调用父组件方法
说明:有一个组件InputListSelect.vue,选中一个行数据,将该数据传送到父级ProjectEdit.vue文件中1、父级ProjectEdit.vue调用<InputListSelect :model="model" :maxlength="255" @on-update="updataInfo"></InputListSelect>import...原创 2019-04-17 16:51:10 · 354 阅读 · 0 评论 -
Vue父组件获取子组件数据
方法一、从父组件调用子组件方法获取数据1、子组件addindex.vue写一个方法,返回要用的数据methods: { // 父组件获取数据 getVal () { return this.procedure }}2、在父组aindex.vue件中获取值<ProcedureEdit ref="procedureEdit"><...原创 2019-04-29 18:54:55 · 35933 阅读 · 0 评论 -
vue引入iconfont
1、下载字体图标放到项目下src->assets文件夹下2、在mian.js中引入注意路径import './assets/iconfont/iconfont.css'3、使用字体图标,更改class中iconfont 后面的内容即可显示<i class="iconfont icon-bangongruanjianwenbenword" style="fon...原创 2019-05-17 14:37:06 · 289 阅读 · 0 评论 -
vue页面中丢失当前页面this数据
例如:页面中含有以下数据,但是this中却没有该数据,this.userName为undefineddata: function () { return { // 导航可视状态 visible: false, // 用户名 userName: '', notReadMessageData: '', countda...原创 2019-06-10 10:36:46 · 1005 阅读 · 0 评论 -
Vue纯数字验证码
该验证码为4个数字生成的验证码,亲自验证点击切换,验证码组件Identify.vue可直接复制使用提示: 该验证码图片缩小后数字经常看不清所以在这里仅仅是实现,没有详细进行实现登陆,仅仅实现了生成验证码,点击验证码后刷新验证码,真正的项目,若验证码图片要求小一点该验证码方式不合适,所以没有进行详细设计Identify.vue<template> <div c...原创 2019-01-16 17:03:12 · 2845 阅读 · 1 评论 -
Vue检测报错Identifier is not a camel case (camelcase)
在.eslintrc.js中添加rules规则中添加 "rules": { "camelcase": ["error", {"allow": ["aa_bb"]}] }原创 2019-01-24 09:13:53 · 29845 阅读 · 6 评论 -
Vue报错* !!vue-style-loader!css-loader?和you can run: npm install --save !!vue-style-loader!css-loader?
其中的问题是:Vue文件中,样式type问题<style lang="less" scoped>写成less报错,因为缺少两个插件,less和less-loader,将less换为postcss报错消失,为了可以设置为less,执行下面语句安装插件即可cnpm install less less-loader --save-dev ...原创 2019-01-18 16:38:36 · 2185 阅读 · 0 评论 -
创建Vue2.0项目并且使用Idea开发工具打开
首先在https://nodejs.org/zh-cn/download/下载安装和配置node.js,查看安装情况,显示版本号说明安装成功node -v // 查看node版本npm -v // 查看vue版本然后安装淘宝镜像npm i -g cnpm --registry=https://registry.npm.taobao.org安装脚vue脚手架cn...原创 2018-11-05 13:09:35 · 8224 阅读 · 0 评论 -
Vue定义全局函数、常量
定义全局函数和定义全局变量是相同的,下面截图中将带有自定义函数与变量的定义与调用1、创建一个自定义函数和变量文件,在该文件中写入方法2、在main.js中引入该文件包3、在需要的地方按下面方法引入即可// deleteTheAttachmentPath(file, _this.model)是自定义方法的名称与参数// Utils是mian.js中import引入时定义的...原创 2018-12-13 11:06:31 · 2667 阅读 · 0 评论 -
Vue项目环境配置以及搭建项目、启动项目
一、安装软件及相关插件1、先安装nodejs,这里不多说下面两个进行验证安装是否成功node -vnpm -v2、然后安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org3、运行下面进行查看是否安装成功cnpm -v4、接着安装webpagenpm install webp...原创 2018-12-10 17:43:07 · 131 阅读 · 0 评论 -
vue启动报错:This is probably not a problem with npm. There is likely additional logging output above.
npm install 后执行 cnpm i -D webpack-dev-server@2.9.7原创 2018-12-10 18:54:20 · 1291 阅读 · 0 评论 -
使用idea将项目托管到coding
1、确认git已安装,并且环境已配置好2、用idea或者webstrom打开前台项目配置本地仓库依次选择VCS-> Import into Version Control -> Create Git Repository3、完成后项目根目录下会生成.git文件,注意有时候是隐藏文件配置.gitignore文件,不要git上传node_modules文件夹4、...原创 2019-01-05 22:46:29 · 788 阅读 · 0 评论 -
idea支持创建vue文件
一、File->Settings,搜索"File" 将会打开File and Code Templates如下二、在File创建下翻看是否有vue文件,没有则按如下新建 默认文件内容,上图标注3内容自定义,以下是模板<template> <div> {{msg}} </div></templat...原创 2019-01-06 13:44:06 · 3157 阅读 · 1 评论 -
Idea或webstrom启动vue项目报错:Expected indentation of 0 tabs but found 4 spaces(indent)
解决办法:修改项目下.eslintrc.js文件在rules: {}中加入:"indent": ["off", 2] 或者'indent': 'off'原创 2019-01-06 15:10:06 · 2715 阅读 · 0 评论 -
idea/webstrom启动Vue报错You may use special comments to disable some warnings.
进入项目build文件夹中找到webpack.base.conf.js注释掉const createLintingRule = () => ({})里面的东西,这个方法不能注释,否则报错之后重新启动项目npm run dev就可以了...原创 2019-01-06 17:21:26 · 533 阅读 · 0 评论 -
Vue常用集成插件
本篇文章仅做记录,方便以后使用一、axios基于promise用于浏览器和node.js的http客户端特点 安装:项目中安装(npm install axios --save)支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器端支持防止CSRF(跨站请求伪造)$ npm inst...原创 2019-01-07 09:50:55 · 649 阅读 · 0 评论 -
Vue报错Newline required at end of file but not found
在该页面最后一行加一个回车,及最后一行没有任何字符即可原创 2019-01-07 14:19:33 · 11497 阅读 · 1 评论 -
Vue集成vue-router实现页面跳转出现的问题
1、配置router文件夹下index.js,配置方式一import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const routes = [ { path: '/', // 首页 name: 'home', component: resolve => { ...原创 2019-01-07 17:07:30 · 721 阅读 · 0 评论 -
Idea/webstrom开发Vue项目报错: Parsing error: x-invalid-end-tag
在项目根目录下找到.eslintrc.js 文件在rules下面添加"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]重新启动项目npm run dev即可原创 2019-01-07 17:42:56 · 899 阅读 · 0 评论 -
Vue实现axios手动配置跨域访问以及对访问进行封装
1、首先项目中安装axios插件2、手动配置,在src下面创建config文件夹,下面在创建index.js(访问域名配置)和axios.js(请求拦截以及轻轻配置等)index.js// 系统参数配置let url = { production: 'http://localhost:8083', release: 'http://localhost:8081', te...原创 2019-01-08 14:50:30 · 744 阅读 · 0 评论 -
vue + iview页面Modal中内嵌Tabs,重新显示Modal时默认选中Tabs的第一项
<Modal v-model="modal.visible" width="80%" transfer :title="modal.title" footer-hide> <Tabs ref="tabs" :animated="false"> <TabPane name="name1" &原创 2018-10-17 09:00:12 · 8011 阅读 · 0 评论