Vue
暂时关闭
朝阳群众Jone
这个作者很懒,什么都没留下…
展开
-
( Hot)原生js实现拖拽交换位置
成品效果如下,demo地址 很简单,一个属性:draggable="true",两个关键方法:dragend、dragenterdraggable:开启元素允许拖拽dragend:监听元素结束拖拽,此时可以做一些交换数据的逻辑(还有dragstart有需要自己上)dragenter:监听有元素拖拽进入到当前元素,此时更新要拖拽到的目标信息2、代码html:<div draggable="true" @dragend="dragend(num,index)" @drage原创 2022-02-28 17:54:32 · 911 阅读 · 2 评论 -
zorro/antd select多选下拉框选中强制一行
效果:1、multiple类型的select官方提供了最大显示属性,超出部分显示+nzorro:[nzMaxTagCount]="1"antd::maxTagCount="1"2、样式中强制一行显示选项zorro:nz-select{ ::ng-deep{ ul{ display: flex; flex-wrap: nowrap; overflow: hidden; float: left;原创 2022-02-23 10:47:43 · 1479 阅读 · 0 评论 -
Vue3项目创建
一、创建项目1)(荐)使用了官方推荐的构建工具Vite来构建项目#使用vite创建JoneWithVue3的项目npm init vite@latest JoneWithVue3 --template vue # npm 7+ ,要多加--npm init vite@latest JoneWithVue3 -- --template vue创建好了就直接运行cd JoneWithVue3 #转到刚刚新建的项目下npm install #安装基本配置npm run dev #开原创 2022-02-17 18:02:33 · 444 阅读 · 0 评论 -
params传参在history情况下报错
主要改了两个文件build目录下的“webpack.prod.conf.js”中“output”节点增加一个“publicPath: '/',”output: { publicPath: '/',//在原来的基础上增加这个,下面的是你项目的默认配置 path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.as原创 2021-03-05 08:43:41 · 294 阅读 · 0 评论 -
vue build后border-image不显示问题,奇耻大坑!
.oneChart { width: 25vw; height: $dash3Hei; position: relative; &:before{ content: ""; width: inherit; height: inherit; border: 2px solid transparent; border-width: 2.125rem 1.583rem 0.875rem 5.5rem; .原创 2021-01-26 15:04:23 · 887 阅读 · 0 评论 -
ant-design-vue修改配色
我的是vue-cli@2.0+按照官方说的,修改build/utils.js文件// build/utils.js+ less: generateLoaders('less', {+ modifyVars: {+ 'primary-color': '#1DA57A',+ 'link-color': '#1DA57A',+ 'border-radius-base': '2px',+ },+ javascriptEnabled: true,+ }),原创 2020-12-02 09:23:12 · 792 阅读 · 0 评论 -
vue中dev环境下局域网通访问
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", "start": "npm run dev", "build": "node build/build.js" },在项目根目录package.json中的scripts里吧dev末尾加上“--host 0.0.0.0”;这样默认局域网内的所有机器...原创 2020-11-20 12:38:54 · 1217 阅读 · 0 评论 -
iis部署build文件刷新404
两个关键点:一、安装UrlRewrite下载,安装完成重启iis二、添加重写规则1、iis里找到你部署的应用,选中下面的Url重写,双击进入2、文字描述:进入之后选择,添加规则——空白规则——取个自己能辨别的名字——模式里面输入“.*”——点击“条件”展开——选择添加——在条件输入“{REQUEST_FILENAME}”——检查输入字符串是否选择“不是文件”——再收起条件——找到操作下的操作属性——填入“./index.html”——iis窗口右侧应用——完成3、图原创 2020-11-03 09:33:47 · 390 阅读 · 0 评论 -
vue项目中使用外部js
首先大体分两种js写法第一种,全部export export const FileTypeObj={//文件格式Icon pdf:"file-pdf", excel:"file-excel", png:"file-image", jpg:"file-image", word:"file-word", mp4:"video-camera", } export const getTheIcon=func...原创 2020-11-02 17:53:02 · 1006 阅读 · 0 评论 -
记录完整的一次Vue项目搭建
1、用Node命令创建项目1)检查vue版本的时候“-V”要大写2)这其中注意在vue init webpack “这个项目名可以大小写”,但是到输入Project name:的时候只能小写2、配置Vue项目基本文件1)首先打开Config目录下的index.js中搜索“autoOpenBrowser”将值改为true--表示默认运行打开浏览器2)继续在index.js中搜索assetsSubDirectory和assetsPublicPath。注意会是在该文件中bulid对象下两个属.原创 2020-10-12 10:48:34 · 223 阅读 · 0 评论 -
vue项目外部js中使用vm(this)对象(uniapp也适用)
因为全局的vm对象在main.js中创建的所以在创建成功后直接可以像外部js一样直接exportimport Vue from 'vue'import App from './App'import moment from 'moment'//时间管理器Vue.prototype.$moment = moment;const app = new Vue({ ...App})app.$mount()//-------------------主要是这里------------原创 2020-09-22 15:37:40 · 3745 阅读 · 0 评论 -
vue项目build后部署iis
我的router.js先开启history模式,防止刷新页面走丢const router = new VueRouter({ mode: 'history', base: '/Web/', routes: [{ path: '/', name: 'Login', meta: {title: '登录'},//requireAuth: false component: (resolve) => require(['@/pages/Log原创 2020-09-07 16:54:34 · 835 阅读 · 0 评论 -
axios使用form data格式发送数据正确姿势
vue全家桶中axios使用form data格式请求数据两个点1)header中'Content-Type':'application/x-www-form-urlencoded'2)因为qs包含在axios中,所以不需要手动安装,只需引入一下,并将你发送的数据qs.stringify()一下import axios from 'axios'import qs from 'qs';axios({ url: "xxxxxAppService.ashx", meth原创 2020-07-29 15:41:25 · 1727 阅读 · 0 评论 -
npm ERR! Unexpected end of JSON input while parsing near
Problem今天在新建一个vue项目结束后,执行命令npm install的时候出错npm ERR! Unexpected end of JSON input while parsing near '...lize-newline":"^3.0.0'Solutioncmd执行命令npm cache clean --force (清除一下缓存)执行成功提示I sure hope you know what you are doing完成后再试试命令npm install...原创 2020-07-29 10:52:52 · 576 阅读 · 0 评论 -
vue-antd使用Table+Drawer做管理系统增删改查操作
一、查Table显示查询数据,官方api1、常用到的属性属性名 描述 数据格式 columns (必选)表头 [ {title: '姓名',dataIndex: 'name'}, {title: '年龄',dataIndex: 'age'} ] data-source (必选)表头 [ {UserID:13,name: '张三',age: '12'}, {UserID:16,name: '王五',...原创 2020-07-27 15:54:44 · 7621 阅读 · 1 评论 -
vue项目使用scss/sass
Study基本用法:scss/sass基操1、安装npminstall sass-loader --save-devnpm install node-sass --sava-dev2、单页面使用<style lang="scss" > .pageBody{ width:100%; }</style>3、全局引用npminstall sass-resources-loader --save-dev删除buil..原创 2020-07-02 14:48:11 · 657 阅读 · 0 评论 -
vue面试
vue中几个知识点1、一个对象修改或新增一个属性是视图层不更新这怎么办假设有以下对象this.student={ name:'Jone'}1):this.$set(this.student, 'age', 15)2):修改之后赋给一个新对象this.student.age = 15; this.student = Object.assign({}, this....原创 2020-05-08 15:13:10 · 233 阅读 · 0 评论 -
vue中excel导入导出
安装npm install xlsx官网:https://github.com/sheetjs/sheetjs导出html<a-button type="primary" @click="downloadTemplate" > <a-icon type="upload" /> 导出</a-button>jsvar ...原创 2020-04-30 18:00:22 · 879 阅读 · 0 评论 -
vue杂项笔记
强制渲染页面this.$forceUpdate();模拟触发点击事件this.$refs.timePicker.$el.click()触发全局监听事件原创 2019-12-05 11:44:38 · 573 阅读 · 0 评论 -
router跳页面传参
我的router定义 { path: "/Home/homePage", name: 'homePage'}, { path: "/Home/indexPage", name: 'indexPage'},1params 传参注意:patams传参 ,路径必须使用name,不然获取不到传的数据此种传参在刷新后就取不到值了this.$router.push({ ...原创 2019-11-25 18:42:28 · 697 阅读 · 0 评论 -
vue强制全局替换img错误图
第一种:比较简单,但是对于你引用别人的显示图片组件那就不一定有onerror事件,只能处理自己写的元素img标签附代码:<template> <img :src="record.ImagePath" class="myImage" :onerror="defaultImg" /></template><script> ...原创 2019-11-22 14:58:26 · 1011 阅读 · 0 评论 -
vs2019配置vue项目+iis环境上线
在项目目录下直接添加一个配置文件,叫vue.config.js内容如下添加了之后在命令行直接输入npm run build成功后去你配置的目录下看文件是否生成,我配置的目录是D:\\Release\\GeniusysVue,如下ok生成了,然后去iis新建一个网站指向这个目录就ok了附iis建站教程:https://blog.csdn.net/lindali1...原创 2019-10-17 18:36:45 · 4484 阅读 · 0 评论 -
Vue性能优化
1、我们可以直接在data函数return之前直接this.xxx的方式挂在实例上,在methods中还可以访问, 但是又不会触发响应式跟踪;改写后变成这样:data() { this.logInStatus = false, // 仅在methods中使用,未在视图层中使用,不要定义在return中 return { title: '性能优化' // 这个视图...原创 2019-10-12 15:56:44 · 274 阅读 · 0 评论 -
vue+Ant design vue做项目
哈喽哈喽,这期带来蚂蚁金服的一个Ant Design 的 Vue 实现。样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了。话不多说直接上手,喜欢记得关注,顺手右上角来个赏我两个大手赞,让我体验笑出个猪叫声一下。正文要做这种样式,我们一般在项目中全局引入一下,类似的还有reqwest这种http方法。反正就是常用的组件都在...原创 2019-09-23 16:31:27 · 68178 阅读 · 9 评论 -
Vue登录页
前言继上个文章新建项目后,我们准备来个由登录到首页先在src目录下来个文件夹view,然后新加两个由js为基础的vue页面,一个叫Login,一个叫Home在这之前我们得先引入路由1)回到npm的cmd命令里面,输入npm install vue-router --save 安装路由2)再到src目录下添加一个router.js的文件(用来写路由配置的)3)打开ro...原创 2019-08-16 10:43:06 · 11521 阅读 · 12 评论 -
手把手带做Vue项目By Visual Studio 2019
前言(扯皮):最近公司前端项目要重构,之前是纯Jquery+Bootstrap做的,虽然灵活易用而且要啥有啥,一顿jq插件什么都能实现,但是后期维护一下,妈呀,这哪个**写的**代码(自个儿想那是多刺激),反正最终项目是完成了,谁也不愿意去维护了,所以果断转战Vue,用Vue很舒服的啊,结构目录清晰,js,css,html划分非常明确,附图老项目:页面构建代码冗余,不断copy造轮子...原创 2019-08-15 12:24:24 · 26081 阅读 · 4 评论 -
使用淘宝镜像cnpm安装Vue.js
前言Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用。今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.步骤首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。...转载 2018-03-08 16:08:10 · 349 阅读 · 0 评论