vue
关注
分享
扫一扫
小志的博客
随笔笔记，仅供参考
展开
-
Vue 中 import from @符号指的是什么
1、假设vue文件中引入如下代码import { auth } from "@/utils/auth";2、@符号表示的含义@符号表示一个特定路径名称，这个设置引入的是src/utils路径下的auth.js文件3、lz的vue框架中，@符号可以在build/vue.config.js文件中设置，如下图：具体在哪个文件下的vue配置文件可根据实际情况参考...原创 2021-06-11 23:38:45 · 5709 阅读 · 2 评论 -
element-ui 表单验证同表单一个值不能小于另一个输入值（亲测有效）
转载自：https://www.jianshu.com/p/361ebeab3a97一、效果图二、vue格式文件代码<el-row> <el-col :span="6"> <el-form-item label="收款金额" prop="amount" :rules="[ { required: true, message: '请输入', trigger: 'blur' }, { validator: this.numberR转载 2021-05-07 22:53:20 · 4814 阅读 · 2 评论 -
vue项目如何重命名（亲测有效）
一、已有的vue项目重新命名步骤1、例如lz想把原有的vue-master项目名称修改成vueapp-master，进入vue项目工作空间，修改vue-master文件夹的名称为vueapp-master，如下图：2、删除node_modules文件夹,如下图：3、把package.json中的项目名称vue-master修改成为vueapp-master，如下图：4、修改index.html文件中的title标签中内容为为vueapp-master，如下图：5、修改完成，重新运行加载依原创 2021-05-07 22:49:38 · 7443 阅读 · 2 评论 -
vue直接获取url中的参数
一、问题描述前端vue框架项目，后端springboot框架；lz的需求场景是集成单点登录，通过登录页面路径后追加参数，向后端springboot项目发送请求，后端接收请求后同时获取到追加的参数。二、解决方式网上有说通过路由的方式，lz尝试后失败lz采用不通过路由直接获取url中参数的方法尝试成功三、解决步骤1、在vue项目根目录下创建一个urlParse.js文件export default{ getUrlKey:function(name){ return decod原创 2021-04-28 22:03:33 · 10594 阅读 · 5 评论 -
Vue打包时报错：ReferenceError: primordials is not defined（亲测有效）
参考原文链接：https://blog.csdn.net/weixin_55560445/article/details/114420039一、解决方式升级gulp到4.0npm install -g gulp-clinpm install --save-dev gulp@4#查看gulp 版本gulp -v修改项目的根目录gulpfile.js文件 （这里直接复制一下代码，粘贴覆盖gulpfile.js里的类容）var gulp = require('gulp');var $转载 2021-03-30 22:21:47 · 2173 阅读 · 1 评论 -
Date Wed Mar 17 2021 13:52:00 GMT+0800 (中国标准时间) 转标准的日期格式
一、问题产生背景vue使用FullCalendar插件时，点击日历获取点击的开始时间时，输出的格式为Date Wed Mar 17 2021 13:52:00 GMT+0800 (中国标准时间)格式。如下图：二、解决方式1、FullCalendar插件中timeZone属性一定要设置为local，否则获取到的时间是中国标准时间+8小时。<script> data(){ return { calendarOptions: { plu原创 2021-03-18 22:32:42 · 14764 阅读 · 0 评论 -
Unknown custom element: [xxx] - did you register the component correctly...
一、解决方式1、查看是否在页面上注册该组件 export default { data(){ return{ }, components: { FullCalendar// //注册组件 }, } }2、查看是否在页面上引入正确写好的组件<script> import FullCalendar from '@fullcalendar/v原创 2021-03-17 22:33:42 · 574 阅读 · 0 评论 -
vue项目启动后设置默认谷歌浏览器打开
1、lz本地用的windows10系统，在系统左下角的搜索框中输入【控制面板】，如下图：2、在控制面板窗口中选择【默认程序】，如下图：3、在默认程序窗口，选择【设置默认程序】，如下图：4、在默认应用窗口的Web浏览器中更改浏览器，如下图:5、更改默认浏览器后的效果如下图：6、再次npm run dev 重新启动vue项目，如下图：7、可看到默认的谷歌浏览器打开了vue项目访问路径，如下图：...原创 2020-10-19 20:59:52 · 13876 阅读 · 12 评论 -
vue中"‘webpack-dev-server’不是内部或外部命令，也不是可运行的程序"的报错
1、问题：刚安装vue，创建vue项目，执行npm run dev报如下错误：2、解决办法：1）删除项目目录下的node_modules文件夹2)、cd到项目目录下，执行cnpm install，在执行npm run dev,如下图：3、运行成功如下图：...原创 2019-09-15 23:05:43 · 379 阅读 · 0 评论 -
idea创建vue模板文件
1、步骤如下图：下图中模板内容如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>#[[$Title$]]#</title></head><body>#[[$END$]]#</body...原创 2019-09-16 22:45:52 · 7115 阅读 · 0 评论 -
idea报错ESLint:expected indentation of 0 spaces but found 2.(indent)解决方法
1、问题如下图：2、解决方式如下图：（去掉验证即可）原创 2019-09-16 22:37:29 · 20677 阅读 · 9 评论 -
基于vue脚手架编写简单的项目页面
1、脚手架结构如下图：2、在src/assets添加logo图片3、在src/components文件夹下创建HelloWorld.vue文件，代码和截图如下：<template> <div class="msgclass"> {{msg}} </div></template><script> expo...原创 2019-09-16 23:26:58 · 4061 阅读 · 0 评论 -
Vue_打包并发布项目
一、 打包vue项目步骤：1、对当前vue项目进行打包的命令如下：npm run build2、打包完成，会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。如下图：二、 使用静态服务器工具包发布打包的vue项目1、首先安装全局的serve，如下图：2、使用serve运行打包文件命令如下：serve + 打包文件名serve dist ...原创 2019-09-17 23:00:28 · 5211 阅读 · 4 评论 -
Vue_忽略eslint的编码规范检查
在项目中找到.eslintignore文件，添加*.js和*.vue,如下图：原创 2019-09-18 09:31:47 · 1756 阅读 · 0 评论 -
[Vue warn]: Unknown custom element: <Add> - did you register the component correctly? For recursive
1、报错如下：2、解决方法：原创 2019-09-18 11:01:46 · 3476 阅读 · 0 评论 -
vue安装pubsub-js 库的命令
1、查看pubsub-js 库是否已经存在该库命令：npm info pubsub-js2、若不存在,则先安装pubsub-js 库，命令如下：npm install pubsub-js原创 2019-09-25 22:22:39 · 4805 阅读 · 0 评论 -
vue项目下载pubsub-js后，但引入pubsub-js提示找不到资源路径
一、问题：1、用npm install pubsub-js --save命令下载pubsub-js成功后，import PubSub from ‘pubsub-js’，提示找不到。二、解决方法：1、vue项目下找到package.json文件，找到dependencies属性，查看pubsub-js的版本，默认下载的是1.7.0版本，如下图：2、重新使用npm install pubsu...原创 2019-09-26 23:46:00 · 5697 阅读 · 5 评论 -
Component template should contain exactly one root element. If you are using v-if on multiple elemen
1、vue菜鸟一枚，添加自己新的代码调试的时候，发现了一个错误，，具体报错如： error in ./src/components/Main.vue(Emitted value instead of an instance of Error) Error compiling template: <h2 v-if="firstView">请输入用户信息</h2&g...原创 2019-09-29 16:07:02 · 722 阅读 · 0 评论 -
This relative module was not found: * ./router in ./src/main.js
首先理解import router from './router’这个是什么意思？在main.js中引入router文件夹中的index.js文件，等效于import router from './router/index.js’1、启动vue项目报错如下图：2、发现原因是mianjs引入router文件夹下的index.js没有找到引入文件，如下图：3、解决方式：把routes文件...原创 2019-10-09 16:32:17 · 28239 阅读 · 3 评论 -
使用vue-cli创建模板项目并运行访问
一、验证是否安装vue、vue-cli及环境，如下图所示已安装安装过程参考：https://blog.csdn.net/li1325169021/article/details/100765894vue-cli 是vue 官方提供的脚手架工具github: https://github.com/vuejs/vue-cli二、打开window命令行，进入需要安装的位置路径，如下图：说明：...原创 2019-09-12 15:21:40 · 660 阅读 · 0 评论 -
Win10系统安装VUE及环境配置解析
下面任何命令都是在windows的命令行工具下进行输入，打开命令行工具的快捷方式如下图：快捷键采用windows+R进入命令行cmd一、Node.js下载地址:https://nodejs.org/en/download/二、安装步骤如下：按照windows一般应用程序，一路next就可以安装成功，建议不要安装在系统盘（如C：）。选择安装位置等中间安装过程省略。。。。。。。三、配...原创 2019-09-12 12:08:20 · 10267 阅读 · 21 评论 -
Vue——表单输入绑定
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08_表单输入绑定</title></head><body><!--1. 使用v-model(双向数据绑定)自动收集数据 ...原创 2019-09-01 22:35:04 · 222 阅读 · 0 评论 -
Vue——事件处理
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07_事件处理</title></head><input><!--1. 绑定监听: v-on:xxx="fun" @x...原创 2019-09-01 22:33:05 · 234 阅读 · 0 评论 -
Vue——条件渲染
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title></head><body><!--1. 条件渲染指令 v-if v-else v-show...原创 2019-09-01 22:29:27 · 130 阅读 · 0 评论 -
Vue——class与style绑定
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>class与style绑定</title> <style> .classA { color: red; } .c...原创 2019-09-01 22:25:03 · 195 阅读 · 0 评论 -
Vue——计算属性和监视
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性和监视</title></head><body><!--1. 计算属性 在computed属性对象中定义计算属性的...原创 2019-09-01 22:21:44 · 228 阅读 · 0 评论 -
Vue——模板语法
1、代码如下：<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>模板...原创 2019-09-01 22:18:10 · 219 阅读 · 0 评论 -
IDEA中使用vue 报 Namespace 'xxx' is not bound的解决办法
解决方式：1）、选择【File】——【Setting】，找到步骤2）的界面。2）、去掉验证3）、回到页面，鼠标放报错地方，按Alt+Enter，报错即消失。原创 2019-09-01 22:11:39 · 4804 阅读 · 2 评论 -
Vue——HelloWorld
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_HelloWorld</title></head><body><!-- 1. 引入Vue.js 2. 创建Vue...原创 2019-09-01 22:03:38 · 329 阅读 · 0 评论 -
Vue——列表渲染1
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>列表渲染</title></head><body><!--1. 列表显示 数组: v-for / index 对象:...原创 2019-09-01 22:47:35 · 192 阅读 · 0 评论 -
Vue——列表渲染_过滤与排序
1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06_列表渲染_过滤与排序</title></head><body><!--1. 列表过滤2. 列表排序-->&...原创 2019-09-01 22:51:21 · 555 阅读 · 0 评论 -
Vue_自定义插件
1、引入自定义的vue-myPlugin.js文件，js文件名称自定义，代码如下：/** 自定义Vue的插件库* */(function (window) { //需要向外暴露的插件对象 const MyPlugin = {} //插件对象必须要有一个install() MyPlugin.install = function (Vue, options) { // ...原创 2019-09-11 22:17:10 · 350 阅读 · 0 评论 -
Vue_自定义指令
参考：VUE官网1、代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</title></head><body><!--1. 注册全局指令 Vue.directive...原创 2019-09-11 21:52:24 · 266 阅读 · 0 评论 -
Vue_内置指令
参考：vue官网1、代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内置指令</title> <style> [v-cloak] { display: none } </style&g...原创 2019-09-11 21:21:11 · 187 阅读 · 0 评论 -
Vue——过滤器
1、代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过滤器</title></head><body><!--1. 理解过滤器 功能: 对要显示的数据进行特定格式化后再显示 注...原创 2019-09-05 22:54:39 · 135 阅读 · 0 评论 -
Vue——过渡&动画2
参考：vue官网1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡&动画2</title> <style> /*显示的过度效果*/ .bounce-enter-active ...原创 2019-09-03 23:16:45 · 219 阅读 · 0 评论 -
Vue——过渡和动画1
1、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡&动画1</title> <style> /*显示、隐藏的过度效果*/ .fade-enter-active,.fade-le...原创 2019-09-03 22:59:47 · 227 阅读 · 0 评论 -
Vue——生命周期2
参考：vue官网1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue_生命周期2</title></head><body><!--1. vue对象的生命周期 1). ...原创 2019-09-02 22:51:02 · 200 阅读 · 0 评论 -
Vue——生命周期1
参考：vue官网1、代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue_生命周期1</title></head><body><!--1. vue对象的生命周期 1). ...原创 2019-09-02 22:46:54 · 186 阅读 · 0 评论 -
谷歌浏览器安装Vue.js devtools插件步骤
1、下载chrome扩展插件Vue.js devtools_3.1.2_0.crx。下载地址如下：链接：https://pan.baidu.com/s/1sk8Jt50WzH8O6fPp63t-rA提取码：f9hx2、下载后，把Vue.js devtools_3.1.2_0.crx改成rar格式，如下图：3、本人解压到D:\Vue.js devtools_3.1.2_0目录下的Vue.j...原创 2019-08-19 22:28:32 · 2630 阅读 · 5 评论