vue
文章平均质量分 68
lihefei_coder
这个作者很懒,什么都没留下…
展开
-
vue v-html新增点击图片放大预览功能组件
封装组件 PicturePreview<template> <div v-if="visible" class="preview-container" @click.stop="previewClick($event)"> <span class="preview-close" @click.stop="closeClick"></span> <img class="preview-img" :src="src"原创 2021-04-15 11:57:43 · 1190 阅读 · 1 评论 -
vue项目添加百度统计
第一步:准备工作1.使用百度账号登录百度统计平台(没有百度账号先注册一个)https://tongji.baidu.com/web/welcome/login2.登录后进入管理 >账户管理 > 网站列表 > 新增网站3.录入网站信息后保存4.代码管理 > 代码获取 > 复制代码第二步:vue项目配置1.打开public/index.html,把复制的代码粘贴到<div id=“app”></div>后面,然后在粘贴后的script标原创 2021-04-08 17:25:25 · 5512 阅读 · 0 评论 -
vue-cli在index.html判断环境变量加载不同代码
index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale原创 2021-04-08 12:07:49 · 4072 阅读 · 2 评论 -
vue路由导航方法 router.push,router.replace,router.go,router.back,router. forward
方法说明 router.push(url) 导航到新url,向 history栈添加一条新访问记录,等同于window.history.pushState router.replace(url) 导航到新url,替换 history 栈中当前记录,等同于window.history.replaceState router.go(num) 导航到指定步数的记录,num为正数是前进,为负数是后退,为0的时候是刷新当前页面,等同于window.histo...原创 2020-12-30 15:04:28 · 2517 阅读 · 0 评论 -
elementui快捷时间
private pickerOptions: any = { shortcuts: [ { text: '最近1小时', onClick(picker: any) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 1000 *原创 2020-12-18 10:58:37 · 167 阅读 · 0 评论 -
Electron-builder打包vue桌面程序安装包
准备工作已完成Electron打包vue项目成桌面端程序此文章一、二、三、四步一、安装打包工具 electron-packagercnpm install electron-builder -g二、修改package.json在package.json的基础上新增"build": { "productName": "electron桌面端", "appId": "com.lihefei.electron", "copyright": "© lihefei", "原创 2020-09-27 17:12:28 · 958 阅读 · 0 评论 -
Electron打包vue项目成桌面端程序
准备工作在已开发完成的vue项目执行npm run build打包生成dist文件夹之后所有的工作都是在vue项目目录下进行一、安装electron在vue项目目录下执行命令安装npm install --save-dev electron二、编写应用程序main.js在vue项目目录下创建main.js,代码如下const { app, BrowserWindow, Menu } = require('electron');function createWindow() {原创 2020-09-24 19:45:29 · 1095 阅读 · 0 评论 -
Vue自定义组件实现v-model双向绑定
核心点:1.父组件啥也不用干只需要绑定v-model值2.子组件接收的props属性必须为value3.子组件data中必须定义一个属性接收value的值4.子组件watch监听value值同步给定义的属性5.子组件watch监听定义属性的值通过$emit(‘input’)同步给父组件父组件<template> <div> <p>父组件当前的值:{{num}}</p> <button @click="btnClick">原创 2020-08-21 20:02:44 · 830 阅读 · 0 评论 -
vue clipboard 复制到粘贴板功能
import Clipboard from 'clipboard';//复制到粘贴板function handleClipboard(text: string, event: MouseEvent) { const clipboard = new Clipboard(event.target as Element, { text: () => text, }); clipboard.on('success', () => {原创 2020-07-13 16:10:55 · 669 阅读 · 0 评论 -
Vue+Elementui+Axios+TypeScript+downloadjs下载文件
<template> <el-button type="primary" size="large" @click="fileDownload">下载模版文件(Excel文件)</el-button></template><script lang="ts">import { Component, Vue } from 'vue-property-decorator';import axios from 'axios';import原创 2020-07-10 11:14:48 · 690 阅读 · 0 评论 -
Vue+Elementui+Axios+TypeScript上传文件
<template> <el-upload ref="upload" action accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :limit="1" :file-list="fileList" :auto-upload="false原创 2020-07-10 10:47:48 · 1132 阅读 · 1 评论 -
Nginx部署Vue项目刷新页面404
vue项目router用的是history模式,用nginx代理服务器部署后只能看到主页,刷新或跳转其他页面就会出现404。解决方法:修改nginx.conf配置文件,将客户端发来的url重定向到默认的index.html,才能正常访问。关键代码:try_files $uri $uri/ /index.html;完整配置:server { listen XXXX; //端口号 server_name XXX.XXX.XXX.XXX; //本机IP地址原创 2020-06-29 16:21:07 · 2694 阅读 · 0 评论 -
vue项目运行在二级域名打包配置
1.修改vue.config.js中的publicPathmodule.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //打包时区分开发环境与生产环境静态资源路径 ...}2.修改src/router/index.js路由模式为hash(删除mode: 'history’后默认是hash模式){ // mode: 'history' // 默认为hash} ...原创 2020-06-28 20:33:08 · 2280 阅读 · 0 评论 -
vue typescript mixins混入
person-mixins.tsimport { Component, Vue } from 'vue-property-decorator';@Componentexport default class PersonMixins extends Vue { public name: string = "Zhangsan"; public say(msg: string) { console.log(msg); }}home.vue<template>原创 2020-05-28 17:40:31 · 3271 阅读 · 0 评论 -
vue typescript 使用tinymce5富文本编辑器
GitHub上地址https://github.com/tinymce/tinymce-vue1.安装tinymce、tinymce ts声明文件npm install tinymce -Snpm install @types/tinymce -S安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录复制到 public/tinymce目录下同时下载简体中文语言包文件,复制到 public/tinymce目录下skins文件夹及zh_CN原创 2020-05-18 16:59:42 · 3212 阅读 · 5 评论 -
Vuex持久化vuex-persistedstate
import createPersistedState from 'vuex-persistedstate';const store = new Vuex.Store({ plugins: [ createPersistedState({ storage: window.sessionStorage, //持久化数据存储到sessionStorage reducer(val) { return {原创 2020-05-08 19:16:54 · 319 阅读 · 0 评论 -
vue中jsx语法解析字符串标签
使用domPropsInnerHTMLrander(){ let str = '<span>aaaa</span><span>bbb</span>'; return (<span domPropsInnerHTML={str}></span>);}原创 2020-04-10 11:02:47 · 2046 阅读 · 0 评论 -
vue中使用jsx条件判断
简单结构用三元表达式rander() { return (<div>{ this.isNumber ? <span>11111</span> : <p>aaaa</p>}</div>)}复杂结构用块级if elserander() { if (this.isSimple) { return (<span...原创 2020-04-10 10:52:31 · 4115 阅读 · 0 评论 -
vue清除地址栏路由参数
vue清除地址栏路由参数原创 2020-04-09 14:44:03 · 21193 阅读 · 8 评论 -
vue在scss中使用js的变量
<template> <div> <span v-for="item in list" :style="{'--text': item.text, '--color': item.color}"></span> </div></template><script>export...原创 2020-03-12 11:58:39 · 23854 阅读 · 9 评论 -
vue开发分页组件
组件效果图组件用法<pagination :show-jumper="true" :total="100" :currentPage="20" :pagerCount="7" @prev-click="prevClick" @next-click="nextClick" @prev-quick-click="prevQuickCl...原创 2020-03-10 11:03:16 · 2319 阅读 · 2 评论 -
VSCode可视化调试Vue代码
1.安装扩展Browser Preview安装完成后在侧栏会多出一个图标,点击后就能打开内置谷歌浏览器2.安装扩展Debugger for Chrome3.在项目里创建launch.js文件会在当前项目下生成文件夹和配置文件4.编辑launch.jsurl与项目启动后的地址保持一致{ // Use IntelliSense to learn about possib...原创 2020-01-06 14:00:00 · 6946 阅读 · 0 评论 -
Vue打包CDN加速优化
vue.config.jsconst isProduction = process.env.NODE_ENV === 'production';const cdn = { css: [], js: [ 'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js', 'https://cdn.boo...原创 2020-01-02 16:19:26 · 2390 阅读 · 0 评论 -
vue-i18n 语言国际化
vue-i18n 语言国际化原创 2019-12-05 14:58:24 · 354 阅读 · 1 评论 -
vue-cli3分环境打包配置
概述在项目开发过程中一般会分为三种运行环境:开发环境、测试生产环境、正式生产环境,不同的环境在配置上的要求会有所不同,最简单的例子就是请求后端的接口地址不同。在打包过程中需要区分不同的运行环境手动去修改配置,这是一项枯燥且没有技术含量的工作,对于这种能用工具解决的工作就不要去人肉操作了,就算避免不了人肉操作,但也尽量让它来得简单点。接下来主要讲解在vue-cli3项目中打包怎么解放人肉配置,...原创 2019-11-21 16:26:29 · 3667 阅读 · 0 评论 -
vue开发小技巧
mixins 多组件公用数据和生命周期//test.jsexport default { data() { return { a: 1, b: 2 }; }, mounted() { }, methods: { }}import resize from './m...原创 2019-10-17 11:56:34 · 210 阅读 · 0 评论 -
vue设置页面title
src/router/index.jsimport Vue from 'vue';import Router from 'vue-router';Vue.use(Router);const router = new Router({ routes: [{ name: 'home', path: '/', m...原创 2018-09-20 19:51:09 · 4978 阅读 · 0 评论 -
vue删除data属性
原始数据data() { return { person: { name: 'vue', age: 20 } }; }例子:删除person下的name属性//以created举例create() { delete this.person.name;//js删除方式 this.$delete(this.person,'name'); //vue删除方式...原创 2019-03-05 15:46:21 · 3407 阅读 · 0 评论 -
vscode快速新建vue及table模板
第一步: 新建模板并保存文件 ==> 首选项 ==> 用户代码片段 ==> 输入 vue,选择 vue.json ==> 编辑vue.json文件如下:{ "Print to console": { "prefix": "vue", "body": [ "<template&转载 2019-03-12 20:11:44 · 2960 阅读 · 0 评论 -
Vue项目开发常见问题记录
问题:打包后的文件放在服务器上运行字体图标变成方框解决方法: build > webpack.base.conf.js 里面loader的字体文件limit值设大一些,至少要比字体文件大...原创 2019-05-31 14:35:15 · 328 阅读 · 1 评论 -
vue-cli3.0配置安装
1.首先卸载旧的版本npm uninstall vue-cli -g2.使用新的命令安装到全局cnpm install @vue/cli -g或者yarn global add @vue/cli3.创建项目创建一个名为clinet的项目vue create clinet这里会提示用默认的npm安装会很慢,是否切换到淘宝的地址,输入y3.配置选择第一个是默认配置,第二...原创 2019-06-01 10:17:57 · 460 阅读 · 0 评论 -
Vue脚手架项目目录结构
Project├── build 构建脚本目录│ ├── build.js 生产环境构建(编译打包)脚本│ ├── check-version.js 检查node、npm等版本│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段页面自动刷新│ ├── de...原创 2018-09-04 18:10:22 · 945 阅读 · 0 评论 -
vue百度地图自定义标记图标
由于vue的路由机制,导致通过传参写的相对位置的图片资源时并不能被正常获取,需要通过import的方式导入资源import iconCar from '../assets/images/deviceIcon/car.png'; //以import的方式导入图片文件const map = new BMap.Map("Map");const point = new BMap.Point...原创 2018-09-04 09:47:25 · 12800 阅读 · 1 评论 -
Vue路由守卫
import Vue from 'vue';import Router from 'vue-router';import regindex from '@/pages/register/regindex';import userauthent from '@/pages/register/userauthent';import submit from '@/pages/register/s...原创 2018-09-04 09:33:41 · 2251 阅读 · 0 评论 -
Sublime Text 3 HTML/CSS/JS prettify 格式化Vue文件
1.打开配置文件Preferences &gt; Package settings &gt; HTML/CSS/JS prettify &gt; Plugins Options-Default2.找到”global_file_rules” &gt; “html” &gt; “allowed_file_extensions”,添加”vue” 3.滚动到底部,找到”use_editor_in...原创 2018-08-27 21:01:49 · 1563 阅读 · 0 评论 -
让Sublime Text3支持Vue语法高亮显示
1.打开 Preferences&amp;gt;Package Control 2.选择Install Package 3.在搜索框输入vue-syntax-highlight,在列表中点击安装(因我本机已安装,所以搜索列表没有显示) 4.重启sublime text3即可生效...原创 2018-07-01 03:03:39 · 1880 阅读 · 0 评论 -
让Sublime Text3支持新建.vue模板
1.首先安装好SublimeTmpl插件 2.在C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates目录下新建vue.tmpl 文件3.vue.tmpl模板内容为&amp;amp;amp;amp;lt;template&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;/template&原创 2018-07-01 02:37:55 · 4610 阅读 · 0 评论 -
vue关键钩子created、mounted、beforeMount间的生命周期
1. el参数对生命周期的影响① 先判断是否有el项,如果没有执行到created后停止编译,var vm = new Vue({ data() { return { message: 'hello vue' }; }, beforeCreate() { console.group('before...原创 2019-06-06 16:09:23 · 10047 阅读 · 3 评论 -
Vue父子组件相互调用方法
https://www.cnblogs.com/jin-zhe/p/9523782.html原创 2019-10-09 17:17:55 · 441 阅读 · 0 评论 -
vue项目build打包优化
vue-cli 3.0 build包太大导致首屏过长的解决方案https://www.jianshu.com/p/d1fb954f5713?utm_source=oschina-appvue打包优化https://www.jianshu.com/p/171e8e529f35vue cli3 优化配置生产去除console.log - from UglifyJs warnings is no...原创 2019-10-08 18:14:18 · 1583 阅读 · 0 评论