vue
impossible1994727
百尺竿头更进一步
展开
-
vue 打包完成之前不清除上次打包的内容
vue 项目在构建项目之前不清除目标目录的内容原创 2023-02-09 14:03:12 · 1238 阅读 · 0 评论 -
在Vue3.0中定义vant的toast全部提示
在vue3中挂载全局方法原创 2022-06-20 16:00:05 · 4550 阅读 · 5 评论 -
mac升级vue/cli2.9.6
尝试vue3.0项目的时候,新建失败,提示应该升级vue/cli,且附带了卸载和升级的命令:npm uninstall -g vue-clinpm install -g @vue/cli执行了好几次,查看vue版本还是2.9.6发现,卸载vue/cli的时候,执行vue -V还是可以看到vue存在的,且版本号为2.9.6上网查资料总结卸载及升级方法如下;查看vue存在路径 which due 看到vue存在usr/local/bin(每个人的不一样)下面; 进入.原创 2022-04-02 17:52:21 · 1264 阅读 · 1 评论 -
vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
千万不要随便改host为ip,万一断网之后重启了,真找不到错误啊。根据网上各种操作比如:npm uninstall webpack-dev-servernpm install webpack-dev-server@2.9.1npm run dev都尝试了,but,依旧报错。。。然后突然想起来上次也报这个错,只怪自己脑子太笨。上解决方式:我之前修改了host为本地ip地址,但是后来ip变了,这里没改。改回来localhost就可以正常运行了。...原创 2021-03-29 13:10:45 · 2072 阅读 · 0 评论 -
vue中使用腾讯视频播放器
参考:https://m.v.qq.com/txp/v3/src/jsapi/下载腾讯视频的jshttps://vm.gtimg.cn/tencentvideo/txp/js/txplayer.jshttp://vm.gtimg.cn/tencentvideo/txp/js/txplayer.js在页面新建一个视频播放的父级div<div id="container" class="video-wrapper"></div>引入腾讯视频jsimport原创 2021-01-26 16:22:19 · 2641 阅读 · 6 评论 -
在v-html中,清除标签里的style属性
<div class="d_article" id="d_article" v-html="removeHtmlStyle(content.content)" ></div>removeHtmlStyle(html) { var rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/; var newHtml = ""; if (html) { .原创 2020-09-05 11:52:21 · 2108 阅读 · 0 评论 -
从零用webpack构建一个vue项目
1、需要新建的文件以及文件夹:空白文件夹:dist,src,index.html,webpack.config.jssrc下新建main.js2、项目初始化:npm init根目录文件夹下自动新增一个package.json文件确定自己项目的入口,我的项目入口为main.js。...原创 2020-06-30 16:08:00 · 376 阅读 · 0 评论 -
vue线上版本引用网络图片报错403的解决办法
在index.html头部添加meta标签,不发送HTTP Referer首部<meta name="referrer" content="no-referrer">原创 2020-06-15 11:55:27 · 844 阅读 · 0 评论 -
vue中引入jquery
用vue-cli构建好项目之后,怎么引入jquery?首先,在package.json的dependencies添加jqury以及其版本:如下: "dependencies": { "jquery": "^2.2.1" },然后在build文件夹下的webpack.base.config.js文件中先引入webapck:var webpack=require("webpack")接着再module.exports对象的最下面添加以下内容: plugins: [.原创 2020-05-22 15:40:25 · 207 阅读 · 2 评论 -
vue webpack打包之后怎么在本地运行
网上有很多种方式,我用了http-server。运行命令:npm installhttp-server -gnpm install http-server -g cd 到dist盘,运行:http-server http-server 运行结果如下图:原创 2020-05-22 17:30:07 · 2708 阅读 · 0 评论 -
vant 报错 "export 'DropdownItem' was not found in 'vant'
在vue项目中引入的vant组件,看了官方文档,版本已经更新到2.几了,但是我本地只有1.6几。在项目进行过程中很多组件都报错类似:"export 'DropdownItem' was not found in 'vant';查询到解决方式升级本地版本,升级命令:npm install vant@2.2.14...原创 2020-04-25 17:14:08 · 4682 阅读 · 0 评论 -
vue的插槽的使用-slot
slot的基本使用:<slot></slot> slot可以设置默认值:<slot><h5>默认</h5></slot> <div id="app"> <navbar><span>an</span></navbar>//slo...原创 2020-04-21 15:23:41 · 390 阅读 · 0 评论 -
从零搭建一个vue项目
确保电脑上有node环境; 查询命令:node -v node官网:http://nodejs.cn/download/ 安装vue-cli脚手架构建工具 安装命令:npm install -g vue-cli 用vue-cli构建项目 去到项目的目录执行命令:vue init webpack vue_test(vue_test为项目的名字) 后面项目名称,项目描...原创 2020-04-20 15:30:03 · 326 阅读 · 0 评论 -
vue中引用了vant插件怎么使用rem自适应——postcss/flexible
首先下载vue :https://github.com/adventurewithme/vue_demo这个是最初始的空白vue。安装vant:# 通过 npm 安装 : npm i vant -S# 通过 yarn 安装 : yarn add vantRem 适配postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem:npm install...原创 2020-04-16 14:29:01 · 1324 阅读 · 0 评论 -
vue中怎么引入echarts
引入命令:npm install echarts --save全局引入:在main.js中写入:import echarts from 'echarts'Vue.prototype.$echarts = echarts在其他页面用到echarts时,需要先有一个HTML标签:(id不可缺少) <div id="monthorder" style="width:1...原创 2019-08-09 17:36:16 · 2961 阅读 · 0 评论 -
前端vue aes加密,解密
首先确保有node.js运行命令:npm install crypto-js --save然后在src文件夹下新建js文件夹,目录结构如下:在until.js里面引入crypto-js,然后封装加密和解密的函数。接着在需要用到加解密的文件中引入until.jsimport utils from '@/js/utils.js'做个演示:我在页面创建后执行d...原创 2019-07-03 18:01:09 · 7084 阅读 · 1 评论 -
font-spider压缩字体文件--vue项目用法
这个只能压缩固定的文字,如果有需要用到的不在压缩范围文字可能还会显示系统字体;确保电脑上有node.js首先安装font-spider:npm install font-spider -g然后再桌面上新建一个文件夹index,文件夹内部结构如下:上面的.font-spider是我压缩后自动生成的文件,里面保存的是原本的字体文件。在index.html引入css\ind...原创 2019-07-03 14:56:52 · 7398 阅读 · 16 评论 -
vue之计算属性
一、vue计算属性--computed: 依赖于data中的数据,只有相关数据变化才会重新求值; 属性调用,带有缓存功能; 比methods节省内存; <p>{{text}}</p>computed:{ text(){console.log('a')}} 二、vue计算属性--methods 函数调用,无缓存功能;...原创 2019-01-22 16:57:39 · 446 阅读 · 0 评论 -
vue之自定义组件
在vue项目中怎么自定义组件呢?在网上都到的都是引用vue.js这种的,原生的vue自定义组件方式如下:1、组件假如为a.vue,和引用它的b.vue在同一级的文件夹下;2、在b.vue中写入的script内部写入:import star_a from './a.vue'export default{ components:{ star_a:star_...原创 2019-01-28 17:43:19 · 254 阅读 · 0 评论 -
vue--小tips
1、使用router-link跳转页面只用写页面的名字不用带后缀名,比如我要跳转到a.vue页面:<router-link to='/a'>to a</router-link>2、每个vue文件中要有template标签,并且template标签下必须有一个一级div标签,这个一级div标签有且只有一个; ...原创 2019-02-13 16:13:48 · 200 阅读 · 0 评论 -
前端面试题
于今年3月份辞职之后找工作,整理一下我的面试中遇到的各种面试题。关于盒子模型? html中的每一个元素都可以看作是一个盒模型,在网页中一个元素由content , padding , border,margin组成,这四部分整体组成一个盒子模型;当元素使用了padding的时候我习惯性加上box-sizing:border-box; 比如一个宽高都是100px,p...原创 2019-04-16 11:25:55 · 308 阅读 · 0 评论 -
vue页面之间相互传值的方法
1、使用query传值--地址栏可见比如从a.vue跳转至b.vue,传name=‘jack’,代码如下: this.$router.push({ path: "/result", query: { name: 'jack' } });在b.vue通过地址栏的url 进行接收参数;我是在created这个函数里面进行接收的...原创 2019-04-26 09:48:50 · 32790 阅读 · 2 评论 -
vue中子组件与父组件数据之间的相互调用
最近练手了一个项目,是这样的一个页面我拆分成了父组件(test.vue)和子组件(use_select.vue)一、父组件怎么引用子组件:首先在父组件的js内用import引入子组件(后缀名省略了):import UserSelectDiv from "./user_select";然后再data下面同级的部分写一个components对象:components: { ...原创 2019-04-18 16:44:44 · 2634 阅读 · 0 评论 -
vue执行init webpack 报错
创建一个vue项目的时候,执行了cnpm install -g vue-cli,到第二步:vue init wepack '项目名'的时候报错:vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate解决方式:去C:\Users\Adminis...原创 2019-04-28 15:04:59 · 1782 阅读 · 0 评论 -
vant 组件引用方式
vant官网:https://youzan.github.io/vant/#/zh-CN/col需求是用vue做一个移动端商城,查了一些前端框架,就这个还合适,按照文档上面所说的组件按需引用的写法如下:import { Row, Col } from 'vant';Vue.use(Row).use(Col);然后再页面上写对应的HTML代码:<van-row>...原创 2019-04-28 18:09:00 · 16067 阅读 · 0 评论 -
vue中设置全局变量
最近用了uni-app写vue,不知道怎么设置反向代理,所以,设置一个全局变量来表示域名方法一:操作如下:在main.js或者是全局的js文件的同级目录下新建一个global.js,声明http并赋值,然后给他暴露出来,代码如下:import Vue from 'vue'var http='http://www.baidu.com';export default{ http...原创 2019-05-08 18:17:18 · 6933 阅读 · 0 评论 -
vue数据渲染不成功
需求:页面上同时多个倒计时;有个数组,数据层级为3级,create里面写了一个setInterval定时器,每隔一秒改变这个数组中的数据;我的思路是,单独给倒计时新建一个数组,每秒循环一次数据,改变一次倒计时数据里的数据;改变规则:定时器循环之前,先获取当前时间戳(只获取一次),给个常量duration=0; 进入定时器,每秒duration+1,进入循环,新建一个数组times...原创 2019-05-30 10:37:26 · 5677 阅读 · 0 评论 -
vue引用外部字体的方法
1、我们按照步骤搭建好vue 项目之后,确保webpack.base.conf.js下面有这一段,没有的自己写上上面的代码: { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, ...原创 2019-05-28 11:02:49 · 6300 阅读 · 1 评论 -
Request header field token is not allowed by Access-Control-Allow-Headers in preflight response
在vue项目里,用axios进行get请求,测试环境是ok的,打包之后运行没有数据返回,经过查验,返现报错查资料是需要在后端请求的headers里面加入token,参考:http://ask.dcloud.net.cn/article/35033http://www.mamicode.com/info-detail-2380637.html...原创 2019-07-01 15:02:28 · 20114 阅读 · 2 评论 -
修改vue项目的title左边的icon
1、icon命名为favicon.ico放在项目根目录;2、在index.html中写入:<link rel="icon" href="./favicon.ico" type="image/x-icon">3、修改build下面webpack.prod.conf.js和webpack.dev.conf.js:修改:添加一行favicon: path.resolve('...原创 2019-06-18 16:04:30 · 3517 阅读 · 0 评论 -
vue调用微信jssdk,引用分享接口
首先安装jssdknpm install weixin-js-sdk --save-dev然后在新建一个公共的js文件,比如share.js在share.js中引入weixin-js-sdkimport wx from 'weixin-js-sdk';在调用微信的接口之前要先获取他们的appid,timestamp,nonceStr等授权参数,传递参数为当前的url ...原创 2019-07-02 14:28:10 · 13560 阅读 · 2 评论 -
vue之watch
watch:监听vue项目上数据变动;使用方法有四种: 基本代码如下:(监听input的变化)<input v-model='text'><p>{{p_text}}</p>data(){ return{ text:'first', p_text:'' }} ...原创 2019-01-22 14:07:30 · 360 阅读 · 0 评论