HuangsTing的博客

文章目录一、准备工作二、使用Vue CLI3创建Vue项目三、运行一、准备工作（1）环境要求：vue-cli要求node版本8或者更高（8.10.0+推荐）；vue-cli3 需要node版本>=8.9, （官方推荐：8.11.0+ ）。（2）安装vue-cli4：如果原本安装了cli2.0版本，需要先卸载旧版本（npm uninstall vue-cli -g），然后清除缓存（ npm cache clean --force），再安装vue-cli4（npm install -g @vue/c

//template<el-select v-model="form.userCode" v-el-select-loadmore="loadmore" filterable remote reserve-keyword placeholder="通过手机号进行查询" :remote-method="userRemoteMethod" :loading="personLoading"> <el-option v-for="item in pe

一、节流（throttle）在一定时间内（例n秒内），不管方法被调动多少次，只会在n秒后再调动第二次方法。也就是每隔n秒执行一次。var canFlag = true;window.onresize = function(){ console.log('resize') if (!canFlag) return; canFlag = false; setTimeout(function(){ canFlag = true; console

报错： Error: Cannot find module 'vue-loader-v16/package.json'解决：尝试删掉 node_modules 用 npm i 重新下包，无效；使用 cnpm i ，有效。

情景：本地项目移到git上面，项目从git上面拉下来运行后报错 failed: Error: No PostCSS Config found in: D:\XXX解决：查了网上的资料说：需要在根文件里面新建一个文件 postcss.config.js ,在里面添加以下代码：module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } }然后重新 npm run dev 就好了…

1.router.jsexport default new Router({ routes: [ { path: '/statistic', name: '/statistic', component: Statistic, title: 'statistic', hidden: true } ]2.使用 $router.resolve带参数在新窗口打开<a href="javas

前言： 记录一个好用的包，在做自适应模块的时候，可以实时监听页面中元素的宽高变化，弥补了window.onresize只能监听由于浏览器大小引起的元素变化；安装方法：npm install element-resize-detector或<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>使用：<div ref="box"

首先在入口文件main.js定义一个全局指令//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片Vue.directive('real-img', async function (el, binding) {//指令名称为：real-img let imgURL = binding.value;//获取图片地址 if (imgURL) { let exist = await imageIsExist(imgUR

第一次使用websocket，在网上找了很久的例子，找到了一个比较好用的demo，使用了没什么问题<template> <div class="test"> </div></template><script> export default { name : 'test', data() { return { websock: null, } }, creat

dependencies和devDependencies在使用node开发时，我们在工程中用到的包必须在package.json中列出。而dependencies和devDependencies是package.json中的两个属性，我们要用的包在这两个属性中列出即可–save和–save-dev在安装包时, 我们可以根据环境决定包的安装效果. 假设我们要安装express1.执行 npm i express --save 则表示我想在生产环境中使用express, 同时, express的版本

网上已经有不少成熟的图片查看器插件，如果是单纯想要点击图片放大预览的话，可以直接使用插件。例如viewerjs但是，当打开图片后还需要对图片进行一些像删除、下载、标记等业务层面上的操作，使用插件就显得不那么便捷，于是决定自己简单写个图片查看器思路：项目中用的是vue+iview，于是使用Modal弹窗组件做为播放器的盒子，考虑需要用到的基本功能有：放大、缩小、拖拽、全屏查看、查看上/下一张、双击图片回到初始大小和初始位置完成效果如图：代码大致思路如下：html部分：<Modal id="

最近开发需要用到点击图片放大查看，找到一个好用的插件，简单记录下插件安装：npm install viewerjs --save插件引入：//main.jsimport Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';html部分：<!-- 使用情况1： --><img id="viewerDom" src="xxx.png" alt=""><!-- 使用情况2： --><

vuex可以用来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，适用于多组件共用同一个状态值的情况。首先，需要一个vue项目，新建一个空文件夹，在该文件夹目录下命令行输入（使用webpack创建一个项目名为web的项目）：vue init webpack web项目创建后，然后安装vuex，在项目目录下命令行输入：npm install vuex --save...

记录一个问题，在做项目的时候，有一个页面比较复杂，嵌套了多层v-for循环，改变其中的值的时候页面没有刷新原因： 因为数据层次太多，render函数没有自动更新，需手动强制刷新。解决： 添加 this.$forceUpdate(); 可以强制更新视图和数据，并且会触发updated生命周期。...

写法一：<div class="demo" :class="{active:isActive}"></div>写法二：<div class="demo" :class="[{active:isActive},{open:isOpen}]"></div>绑定的class只能有一个，如果有多个条件判断的class，则必须将其写在一个数组中...

<Form class="search_form" ref="searchForm" :rules="ruleInline" :model="formInline" label-position="right" :label-width="80"> <FormItem prop="searchTime" label="查询时间"> <DatePicker ...

需求：关于iview上的文字提示及气泡提示都是没有换行的，如果我们要换行必须自己设置，但是你直接在Tooltip上设置它的style为whit-spce=‘normal’是不能生效的，官方是提供了一种换行方式，但是并没有很详细的解答官方解决方案：注意 Tooltip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增...

1. 下载字体文件所需的.ttf文件并引入：2.在font.css文件，将下载好的字体文件的路径引入：@font-face { font-family: 'PMZD'; src: url('PMZD.ttf'); font-weight: normal; font-style: normal; }3.在要使用的style里面引入font....

1. 准备两个less文件：1.1 theme.less 用于定义控制样式的函数.theme( @Background: #1D2B40, @Border: #000017,){ .header{ background: @Background; border-bottom: 1px solid @Border; }}2.2 colo...

首先打开项目目录：找到index.html：在index.html的head中添加：<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

父组件的数据通过props传递给子组件,子组件需要显式地使用 props 声明 prop <div id="app"> <child message="hello"></child> </div><script> Vue.component('child',{ props:['message'], templat...

基本用法：在当前页面中获取dom元素 <div id="app"> <button @click="getRef" ref="button">获取该节点</button> </div><script> new Vue({ el:'#app', methods:{ getRef(){ console.log(...

在官方文档中，强调了computed区别于method最重要的两点：computed是属性调用，而method是函数调用computed带有缓存功能，而method不是下面看一个具体例子： <div id="app"> <h5>{{ msg }}</h5> <p class="text1">{{ methodTest}}...

1. 什么是better-scrollbetter-scroll是一个滚动插件，旨在解决移动端的滚动环境（已经支持PC）。是对iscroll的封装github地址 https://github.com/ustbhuangyi/better-scroll2. 下载进入项目的目录npm install better-scroll --save3. 引入需要在页面中引入impo...

1.介绍vue-router： vue官方路由插件。路由： 指单页面应用的路径管理系统。在vue中都是单页应用，相当于只有一个index.html页面，所以无法使用标签，我们使用路由来管理插件路径2.安装npm install vue-router --save-dev //--save-dev命令直接将依赖包信息写入packege.json文件中 --save写在dependenc...

class对象方式绑定 <div id="app"> <div @click="handleDivClick" :class="{activated: isActivated}"> Hello world </div> </div> <script&g...

1.基本使用 <div id="root"> <child> <p>Dell</p> </child> </div> <script> Vue.component('child',{ templ...

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter getter 用于监控属性变化时触发。set可选，当computed属性自身被赋值时触发 <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ ...

运行iview-project工程的时候，报错如下：❯ npm run dev > iview-admin@1.3.1 dev /Users/xiaoyue/myProject> webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.con...

一、安装node.js（https://nodejs.org/en/）下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。二、设置nodejs prefix（全局）和cache（缓存）路径1、在nodejs安装路径下，新建node_global和node_cache两个文件夹2、设置缓存文件夹npm config set cache "D:\vueProject\nod...