![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
目标达成
这个作者很懒,什么都没留下…
展开
-
使用nginx部署vue项目
1 配置nginx.conf 1.1 用xshell连接上linux测试服务器 1.2 执行命令查看nginx服务启动情况:ps aux | grep nginx 1.2.1 会出现多个,其中有一个是master,然后后面跟了一段路径,这里是:/usr/sbin/nginx,表示运行的是这个/usr/sbin/ 下的 nginx文件; 1.2.2 执行/usr/sbin/nginx -t(或者进入/usr/sbin目录执行 nginx -t),这个时候你会看到...原创 2022-05-07 17:50:00 · 2804 阅读 · 1 评论 -
vue中的代理proxy
由于大多情况下由前端像后端服务器发起的请求都会存在跨域,由于跨域,会导致请求不通,因此需要进行代理跨域:协议、域名、端口只要有一个不同,就会存在跨域如前端网站为:http://192.168.1.1:8100后端服务器接口地址为:http://192.168.1.2:8001这样前端要请求接口时就会存在跨域问题,这个时候就需要使用代码来进行请求配置vue.config.js:这里的配置只对本地有效,测试环境或正式环境的需要通过nginx进行代理配置module.exports =原创 2022-05-07 16:20:43 · 1997 阅读 · 2 评论 -
vue按需引入ElementUI
1、安装 babel-plugin-component:npm install babel-plugin-component -D2、babel.config.js文件中,在plugins中添加如下:"plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]]3、在mai原创 2022-05-07 14:52:32 · 433 阅读 · 0 评论 -
vue中引入JQuery
1、下载依赖包 npm install jquery -S2、vue.config.js中const webpack = require("webpack");......module.exports = { configureWebpack: { //支持jquery plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery"原创 2022-05-07 14:36:31 · 2508 阅读 · 0 评论 -
vue中的.env文件
vue中的几个.env文件,用来处理某些情况下不同环境需要不同的值比如:在某个商品在测试环境跳转的域名和正式环境跳转的域名就不同,这个时候就需要用到.env文件,这几个文件都放在package.json同目录下.env: 网上是说无论开发环境还是生成环境都会加载,这里我没用到,就不描述了.env.development: 本地开发环境(文件名也可以是.env.dev等,没有规定死)NODE_ENV=development #这里的NODE_ENV都要有,本地环境取值developmen,非原创 2022-05-07 12:00:19 · 3617 阅读 · 0 评论 -
WebSocket
WebSocket:也是一种协议,基于tcp协议,这里来和Http协议做一个对比场景:http或https协议只能用来从前端发送请求给后端,而当服务端需要主动给前端发送消息时就没办法实现了,如:聊天系统;如果使用http协议就只能实现发送消息,而不能接收消息(因为接收消息需要服务端主动发送,这时候就需要用到WebSocket来进行通讯了)websocket协议:ws://或wss://(区别一下http/https)方法:websocket协议有这么几个方法1、创建WebSock原创 2022-05-07 10:07:26 · 1862 阅读 · 0 评论 -
vue .env文件
.env文件的作用:当某个变量需要在不同环境下取不同的值时,可以使用.env进行配置.env相关的文件有好几个,这里主要用到2个:.env.development和.env.production默认情况下,npm run serve命令,对应的会取.env.development文件中的配置;npm run build构建生成的包,放到服务器去运行,会读取.env.production文件中的配置听说还可以通过--mode命令指定读取哪个配置,没去试过:在package.json中的script原创 2021-05-14 17:03:13 · 489 阅读 · 0 评论 -
vue中引入vue-xss
在写需求时,有输入框,因此需要处理下xss攻击的问题。它会帮忙过滤一些攻击的代码,下面是最简单的使用,不考虑设置白名单的情况1、下载依赖:npm install vue-xss --save2、main.jsimport VueXss from 'vue-xss'Vue.use(VueXss)3、使用在js中let message = xxxmessage = this.$xss(message)在html中<div v-html="$xss(message原创 2021-05-14 16:22:30 · 3020 阅读 · 0 评论 -
做聊天表情时,表情图片放在assets目录中,读取数组动态显示图片时发现图片显示不出来
问题描述:做聊天表情时,表情图片放在assets目录中,读取数组动态显示图片时发现图片显示不出来,但是如果是在src=""这里是写死的字符串是能显示的如下图:第一个img可以显示,第二个不行(变量的路径是没错的,一样的路径)<div class="face-item" v-for="(item,index) in emotionList" @click="clickEmoticon(item.src, item.sign)" :key="index" :title="item.desc"&g原创 2021-03-03 16:56:08 · 642 阅读 · 1 评论 -
在<pre>元素作为输入框时,选择表情插入到输入框并将光标定位到表情后面
现在以pre元素作为输入框(通过contenteditable属性将pre元素变为可编辑输入框)<pre contenteditable="true" @click="inputAreaClick" @input="inputAreaInput" @keydown="inputAreaKeyEnter"></pre>实现:比如我要下面这样的内容,那么页面显示如下图2:步骤:这里的代码是适用于我这里的场景的,有些多余的代码,但思路是这个思路1 监听输入框的点原创 2021-03-03 16:21:51 · 1017 阅读 · 1 评论 -
vue中使用axios
1 安装依赖:npm install axios --save2 在需要使用的地方引入:import axios from 'axios'3 使用3.1 创建axios实例const request = axios.create({ // 每次通过request对象进行请求的时候都会在前面带/api这个路径,这里没有用"http://xx:8081/api",是因为这里做了proxy配置代理,因为跨域了 baseURL: '/api', timeout: 600 /原创 2021-02-20 17:29:55 · 192 阅读 · 0 评论 -
关于在vue中使用echarts时碰到的问题: Error Initialize failed invalid dom
今天在使用echarts时碰到的一个小问题,记录一下:首先,如何使用echarts:// 1:npm安装依赖npm install echarts --save// 2:引入echartsimport * as echarts from 'echarts'; // 注意:这里要 * as echarts 而不是 import echarts from xxx// 3:需要一个显示echarts的出口<div id="hello-world"></div>// 4原创 2021-02-07 17:45:56 · 26694 阅读 · 11 评论 -
在执行sentry-cli命令进行删除工件时,报错:Invalid token(http status:401)
问题:在执行删除sentry上某个项目的某个分支的工件时:sentry-cli releases files test@0.1.0delete --all提示需要提供组织org和项目project,于是我执行了:sentry-cli releases -o 组织 -p 项目 files test@0.1.0 delete --all报错了;Invalid token(http status:401),意思是说token无效,但是我明明在上面先进行登陆了,而且登陆也成功了解决办法.原创 2020-10-16 11:04:27 · 3337 阅读 · 1 评论 -
vue转kbone
新建一个kbone项目将代码对应拷贝过去注:package.json: 依赖需要修改,将我们的依赖添加进去,有重复的删除我们这边的 注意一个Bable的版本可能会产生冲突,将我们dependencies的"babel-loader"版本改成和kbone里面生成的同样的版本即可小程序中不支持<style scoped>??突然会包缺少一个文件sitemap.json,之前没有这个问题,解决: 在dist/mp下添加一个sitemap.json文件即可...原创 2020-09-16 10:32:03 · 644 阅读 · 0 评论 -
vue+elementUI(el-table):分页修改数据源后,子组件的数据不刷新问题
问题:父组件中加载数据,部分数据传到子组件,通过子组件显示,切换页码之后,使用子组件显示的部分数据不刷新解决办法:类似v-for,给子组件加一个v-key,值唯一即可<!-- 购买商品 --><el-table-column align="center" label="购买商品" min-width="100" fixed="right"> <template slot-scope="scope"> <item-info v-if="sco原创 2020-08-25 18:08:49 · 2117 阅读 · 2 评论 -
vue(单页面应用)接入腾讯移动分析(这里只说创建完应用之后的代码相关内容)
由于单页面应用只有一个页面,路由到其他url时页面是不会刷新的,而腾讯移动分析默认情况下是自动上报,而是需要刷新页面才能记录到的,因此这里不能使用自动上报,修改下面截图所以的勾选项,去掉自动上报的勾选,即为手动上报(注意修改了这里,下面的统计代码也会相应变化,记得使用最新的统计代码),下面都是基于使用手动上报的相关操作一、查看我的应用相关配置信息进入到应用管理->翻到最下面的配置指南,有一段统计代码(注:这段代码会根据你上面高级功能、可选功能的勾选相应的变化,记得使用最新的统计代码)二原创 2020-08-12 18:29:13 · 2037 阅读 · 0 评论 -
vue中实现日期显示格式化(按照指定的格式展示时间)
这里需要使用到一个插件:moment1 npm安装(--save表示保存到package.json中)npm install moment --save2 main.js中定义全局变量import moment from 'moment'Vue.prototype.$moment = moment3组件中的使用<div>开售时间{{$moment(startAt).format('YYYY-MM-DD HH:mm')}}</div> 就是这...原创 2020-07-27 15:13:29 · 4756 阅读 · 0 评论 -
vue中实现复制功能
这里使用到一个插件:clipboard.js,官网地址:http://www.clipboardjs.cn/1通过npm安装clipboard.js(如果要将插件添加到配置,则npm命令后面加上--save) npm install clipboard2在需要使用到复制功能的组件中引入:import ClipboardJS from 'clipboard';3...原创 2020-07-27 15:06:59 · 3462 阅读 · 1 评论 -
关于vue的keep-alive
一、keep-alive的作用: 1 具有缓存的作用 通过在router.js中的meta配置中添加keepAlive:ture来指定对哪个组件进行缓存 2具体加了这个有什么影响? 由于加了keepAlive:true,则该组件被缓存到内存中,那么其他的钩子函数都将不会再执行,除了activated(进来) 和deactivated(离开),这2个会相应执行,这2个钩子函数是专门for keep-alive的,因此如...原创 2020-07-27 11:27:17 · 1110 阅读 · 0 评论 -
使用cordova对vue项目进行打包(android)
说明:当前有一个vue项目,需要使用cordova进行打包环境条件:1 jdk-即Java运行环境 这个很简单,百度一下就行,学过Java的话都有安装过jdk 检查电脑是否安装了jdk:win+R->输入cmd->回车进入黑窗口,输入javac->如果出现关于javac的帮助信息则表示已安装 2安装nodejs环境 相信一般要打包vue项目肯定开始也是装了nodejs了 查看是否安装了nodejs:node -v(如果出现了版...原创 2020-06-17 16:20:37 · 961 阅读 · 0 评论 -
vue中的computed和watch
<template><template> <!-- 所有的内容要被根节点包含起来 --> <div id="app"> msg:{{msg}}<br/> msg2:{{msg2}}<br/> <button @click="setMsg()">执行方法改变msg</button> </div></template>&l原创 2020-06-12 14:42:38 · 112 阅读 · 0 评论 -
vue组件之间的引用
有个App.vue,需要引入HelloWorld.vue的组件HelloWorld.vue<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }}</原创 2020-06-11 11:25:34 · 738 阅读 · 0 评论 -
CMD命令的多条选项选中问题
今天碰到一个很尴尬的问题,在选择手动创建vue项目的时候,需要选择一些配置,这些配置需要多选,然后就尴尬了。。不会多选,各种上网疯狂百度,硬是找不到怎么可以选中,好吧。。最后其实就在cmd窗口上提示了,“空格”即可选中。在此记录一下,万一也有同学和我一样没看到上面的提示呢.........原创 2019-12-09 10:49:16 · 2936 阅读 · 1 评论 -
使用vue的2种方式
在开始学习vue的时候,很混乱,自己学习的是vue cli这种形式,但是在网上查找的时候,很多都和我学的不一样,当时很懵逼,到底vue是怎么样的?或者说2种都行,那2种又有什么区别呢,是新老版本的不同还是其他的不同?反正一堆这样的疑问,也没人指导,搞不清。 自己当初是先学习的vue脚手架开发的方式,后来又一次开发公司web项目,发现用到了vue.js,这时候才发现了自...原创 2019-11-26 15:48:33 · 830 阅读 · 0 评论 -
vue环境搭建及目录结构分析
搭建vue开发环境: 1 安装Nodejs--见隔壁angular—https://blog.csdn.net/liucai1018/article/details/100877183 2 需要npm环境,安装了node就会自动安装npm了(查看版本:npm -v) 3设置npm镜像为淘宝镜像--由于node安装插件是从国外服务器下载,受网络影响大...原创 2019-09-16 09:32:36 · 1324 阅读 · 0 评论