vue
_cris
一场渐行渐远的旅途。
展开
-
Vue3项目运行Error: Cannot find module ‘vue-loader-v16/package.json‘问题处理
查看这个依赖是在@vue_cli-plugin-typescript这个库中进行引入,大概率fork-ts-checker-webpack-plugin-v5这个是库的作者还在开发当中并没有发布的库。到这里,那么就好解决了,@vue/cli-plugin-typescript版本降级!1)@vue/cli-plugin-typescript降级,降级到~4.4.0版本"@vue/cli-plugin-typescript""~4.4.0",2)安装开发依赖vue-loader-v16。...原创 2022-07-24 17:32:44 · 4300 阅读 · 4 评论 -
Vue项目优化实践,通过CDN引入依赖项文件,减少打包vendor.js大小
在我们使用vue构建项目时,常有一个问题值得我们思考,我们该如何去减少我们打包出来的chunk大小?以下,是一个项目实例过程。创建vue项目npm init webpack vuepjt在项目不进行任何配置时,直接build,让我们来看看打包出来的chunk大小npm run build --report咋一眼就发现vendor.js有120kb,让我们来看看为什么这个chunk这么大大致分析一下,vendor.js这个chunk中vue,vue-router这两个库占用原创 2020-08-18 14:01:25 · 2118 阅读 · 1 评论 -
如何在Vue中使用sass,以及Module build failed: TypeError: this.getResolve is not a function at Object.loader问题
安装项目依赖:cnpm install sass-loader node-sass vue-style-loader --Dwebpack.base.conf.js配置loadermodule.exports = { module: { rules: [ // ... { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ] },}tem原创 2020-06-23 13:16:04 · 387 阅读 · 0 评论 -
Chrome浏览器安装vue-devtools工具的方法
1)github上下载vue-devtools库,使用git下载git clone https://github.com/vuejs/vue-devtools2)项目根目录下安装项目依赖cd vue-devtoolsyarn run build3)打包之后的扩展程序文件在,packages/shell-chorme文件夹中4)打开chorme浏览器,在浏览器搜索地址输入chrome://extensions/ ,再“加载已解压的扩展的程序”加载刚刚打包出的文件..原创 2020-05-29 14:35:40 · 3590 阅读 · 0 评论 -
使用vuecli3 构建的项目,修改项目webpack配置
今年vuecli已经升级到了vuecli3+,和以往vuecli构建的项目不同,在新版本的vuecli构建的项目中,默认是无配置文件的。如果我们想修改server的端口号,打包输出文件的资源,我们该怎么处理呢?按照官方文档,https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE我们在与package...原创 2019-12-02 11:13:42 · 1344 阅读 · 2 评论 -
vue3.0项目中eslint检查时,Unexpected console statement (no-console)报错解决
在利用vue-cli3+构建的项目中引入eslint进行语法检查时,使用console.log('xxx')时,控制台抛出了Unexpected console statement (no-console)异常,解决办法是:在项目的package.json文件中,eslintConfig 配置项中的“rules”中新增一条配置项即可"eslintConfig": { ......原创 2019-12-02 11:03:21 · 2658 阅读 · 0 评论 -
vue项目中路由不匹配或者路径错误,添加默认404页面的方法
在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白。然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面。处理方法如下,在router中添加方法:router.beforeEach((to, from, next) => { if (to.matched.length === 0) { //匹配前往的路由不存在 ...原创 2018-09-04 14:50:27 · 18728 阅读 · 1 评论 -
Vue项目中如何使用Echarts 及Echarts中echarts-liquidfill水晶球插件
在博主的前述的一篇文章当中,有写到如何在vue项目引入Echarts插件,Echarts插件的应用方法可参考博主之前的文章。在本文中,博主将结合实际开发过程中的操作,介绍一下如何引入echarts-liquidfill插件,并使用它。echarts-liquidfill在github上的链接是https://github.com/ecomfe/echarts-liquidfill,上面有详述插件的...原创 2018-09-12 14:17:27 · 19580 阅读 · 1 评论 -
vue状态管理vuex使用之项目中如何合理引入vuex
在前端开发过程中,状态的管理是一件很令人头疼的事情。尤其是在项目中,涉及同一状态的组件越多,在组件状态管理上,通过父子组件之间通信来更新状态将变的复杂。Vue项目开发过程中,借助vuex进行状态管理将极大的减轻我们在开发过程中对于组件状态的维护。vuex:vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可...原创 2018-09-26 11:29:35 · 1478 阅读 · 1 评论 -
图示vscode修改缩进为2个空格
此外可以对 settings.json文件做出修改亦可。图示如下:原创 2018-09-26 12:37:28 · 5142 阅读 · 0 评论 -
vue中对数组值变化的监听与重新响应渲染的方法
在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅博主的文章 https://blog.csdn.net/weixin_37861326/article/details/81034231;例如:<script> export default { data(){ ...原创 2018-09-29 10:32:10 · 24508 阅读 · 2 评论 -
vue项目中富文本编辑器vue-quill-editor的使用
前端开发过程中,会遇到在页面上加入富文本编辑器,在vue项目中开发遇到这一需求的时候,我们可以使用富文本编辑器vue-quill-editor,话不多说,先上一张效果图:1)安装vue-quill-editor 依赖npm installvue-quill-editor --save2)入口文件main.js中引入// 引入富文本编辑器import VueQu...原创 2018-09-30 15:07:24 · 4755 阅读 · 8 评论 -
mac如何安装tomcat并部署vue项目
1. 安装tomcat官网下载tomcat,download目录下,下载对应的tomcat资源文件,下载zip或者tar.gz文件在资源库文件夹下,新建文件夹 Tomcat并将下载的文件拷贝至该文件夹下修改项目文件的读写权限,在tomcat文件夹下打开终端,并执行 sudo chmod 755 /apache-tomcat-9.0.16/bin/*.sh 输入电脑密码...原创 2019-02-19 11:29:35 · 649 阅读 · 0 评论 -
Vue项目build打包之后,背景图路径错误问题解决方式
在vue项目中,npm run build之后,得到的项目输出文件部署到服务器之后,图片无法找到,发现是图片路径不对。处理和修改方式如下:index.js中修改// 在index.js中assetsPublicPath: './',bulid文件下,utils中修改// Extract CSS when that option is specified// (which ...原创 2019-04-25 11:21:17 · 841 阅读 · 0 评论 -
vue项目中如何利用base64上传图片与文件
前端在进行资源文件上传的时候,可以借助HTML5中,fileReader对象进行图片和文件的上传。利用该对象提供的一些属性方法更加方便的获取所上传的文件信息。在vue项目中操作方法如下: 1)绑定input[type=‘file’]的change事件<input @change="uploadPhoto($event)" type="file" class="kyc-passi...原创 2018-07-31 12:01:50 · 14154 阅读 · 2 评论 -
Vue项目中数据的深度监听或对象属性的监听
众所周知,vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。根据vue的文档,不难发现,使用数据的深度监听来达到这一效果。具体实现如下:watch: { evlist: { handler(val, oldVal) { ...原创 2018-07-13 16:57:30 · 5341 阅读 · 0 评论 -
基于Vue-cli的Vue单页面项目构建详解
在使用vue来构建项目时,通常采用vue脚手架工具vue-cli来构建项目,在项目构建完成之后,需要安装一些常用的插件:jquery、element-ui,以及一些全局配置文件。具体操作如下:1. 利用脚手架工具vue-cli 下载vue项目模板// vue init 模板名 项目名vue init webpack myvuepjt2. 安装项目依赖npm install3. 启动项目,检查项目...原创 2018-04-11 11:10:09 · 759 阅读 · 0 评论 -
vue项目中,页面刷新回到页面顶部的方法
在Vue项目中,访问过的页面,在滚动到某个位置后,再次刷新页面,页面仍处于上次访问过的位置。为了想页面回到顶部,只需要对路由进行修改,在router下index.js中:export default new Router({ routes: [{...}], scrollBehavior(to, from,savedPosition) { return { x: 0,...原创 2018-04-17 17:39:01 · 12449 阅读 · 9 评论 -
vue中父级组件向子组件传递参数(通信)
在父级组件中引入子组件,并像如下定义:<template> <div id="app"> <img src="./assets/logo.png"> <!-- 在调用组件的时候,使用v-bind将logo的值绑定为 APP.vue中定义的变量 logoMsg 然后就能将App.vue中的logoMsg的值传给h...原创 2018-04-17 17:54:28 · 9787 阅读 · 1 评论 -
vue中子组件向父组件传递参数(通信)
vue构建项目时,在组件内部引用了子组件,子组件的数据更新或者状态更新,需要向父级组件传递参数,在传递上如下进行定义:子组件中,在需要向父级组件传递参数的方法中,使用emit传递参数this.$emit('loadsuc', true);父组件中,v-on:loadsuc 来监听和接收参数<template> <div> <hometask v-on:lo...原创 2018-04-17 18:07:46 · 2892 阅读 · 0 评论 -
vue构建手机端项目的过程
在使用vue构建手机端项目便捷开发过程中,需要在项目中配置常用的插件,常用的依赖。具体构建步骤如下:构建vue项目1. 创建vue项目Vue init webpack 文件名2. 安装项目依赖npm install3. 启动项目npm run devVue项目默认不会自动打开浏览器,需要在config文件夹下index.js中将autoOpenBrowser: false,修改为a...原创 2018-04-19 10:23:25 · 4654 阅读 · 0 评论 -
vue项目中,vue-i18n和element-ui国际化开发
在vue构建的项目中,我们常用element-ui插件,在我的博客前面有讲述,具体怎么用vue-i18n插件进行国际化开发,但是在前面博客中,如果项目中使用了element-ui插件,插件中的语言文字替换可以结合element-ui插件一同进行。element-ui插件自身也提供了语言包。具体的配置和使用方法参考如下:默认你已构建好了一个vue项目,在vue项目中安装vue-i18n以及eleme...原创 2018-04-23 14:04:20 · 2506 阅读 · 0 评论 -
vue多页面开发
在使用vue-cli构建项目时,默认模板都是用它的单页面应用,但有的时候需要我们做成多页面方式,要怎么操作和修改呢?先附上github上修改好的源代码链接:https://github.com/path2017/vue-multi-page。大家都知道vue-cli结合webpack是最常用的模板,所以在想怎么解决vue的多页面应用时,可以通过修改webpack的配置入手。话不多说,先附一张项...原创 2018-05-02 12:33:59 · 3261 阅读 · 1 评论 -
vue项目中,将信息生成二维码的方法
在构建vue项目中,如果需要把一个链接或者一串数字生成一个二维码供用户扫描使用,我们通常会用到jquery.qrcode.min.js这个js库,并配合jquery一并使用。在npm中我们无法直接下载安装这一依赖,因此需要我们在vue项目文件中下载静态文件引入进行使用。1)下载jquery.qrcode.min.js插件2)在项目main.js中引入jquery.qrcode.min.js// 引...原创 2018-05-18 12:15:05 · 8076 阅读 · 0 评论 -
vue项目中将canvas生成的图片,保存为png格式并下载
在博主的稍前一篇文章中,写到vue中关于将信息生成二维码的方法,生成的二维码图片是canvas所绘制,在手机端我们往往需要将手机二维码图片可以保存到本地,该如何操作呢。首先,假使生成的二维码图片挂载在id为target的div标签下<div data-v-4eb8d02a="" id="target" class="qrcode"> <canvas wid...原创 2018-05-25 16:40:26 · 21580 阅读 · 3 评论 -
vue中监听路由参数变化的方法
在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果。举例:当前路由为 /pjthome?pjtid=123456mounted: function () { this.pjtid = this.$route.query.pjtid this.pjtdetail()},...原创 2018-05-31 16:05:49 · 34403 阅读 · 8 评论 -
Vue项目中引入Echarts_(2021年更新)
在Vue项目中使用Echats,可以极大程度的方便完成很多Canvas功能。1. 安装Echatsnpm install echarts --save2.项目main.js中引入Echarts// 引入Echartsimport Echarts from 'echarts'Vue.prototype.echarts = EchartsVue.use(Echarts)3.项目中使用,挂载到一个...原创 2018-06-22 16:44:28 · 26746 阅读 · 2 评论 -
vue实现原理
转载:https://blog.csdn.net/lishanleilixin/article/details/79360244一 理解vue的核心理念使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.倘若用一句话来概括vue,那么我首先想到的便是官方文档中的一句话:Vue.js(读音 /vjuː/,类似于 vie...转载 2018-06-29 12:10:31 · 19366 阅读 · 2 评论 -
vue项目中如何引入vuex
vue框架提供了自身的状态管理工具vuex,如何方便引入vuex在vue项目中,博主在最近项目中的引入方式如下。1. 入口文件main.jsimport Vue from 'vue'import Layout from './layout'import router from './router'// 引入vueximport store from './store/store'vue实例...原创 2018-07-13 12:01:42 · 8713 阅读 · 0 评论 -
前端Vue中多语言切换功能的实现
在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,具体实现方法如下:step1: 在项目中安装vue-i18插件cnpm install vue-i18n --save-devstep2:在项目的入口文件main.js中引入vue-i18n插件import Vue from 'vue'import router from './router'import VueI18...原创 2018-04-08 15:27:41 · 10204 阅读 · 0 评论