vue
关注
分享
扫一扫
vue
xiaokanfuchen86
这个作者很懒，什么都没留下…
展开
-
1、使用vue-cli脚手架创建新项目
前提条件：已安装node可以正常使用npm命令，并全局安装vue-cli工具。npminstall vue-cli -g开始创建项目 使用vue初始化基于webpack的新项目 vueinitwebpack my-project项目创建过程中会提示是否安装eslint，可以选择不安装，否则项目编译过程中出现各种代码格式的问题； 项目创建完成后，安装基础模块 cd myproject;npm install;模块安装时间有可能会很长...转载 2020-10-05 23:27:01 · 112 阅读 · 0 评论 -
Vue2.0 搭建Vue脚手架（vue-cli）
介绍Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。阅读之前需要了解的知识htnl css javascript node.js环境(npm包管理工具） webpack打包工具安装node.js从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说转载 2020-10-05 23:25:18 · 243 阅读 · 0 评论 -
vue-cli（vue脚手架）超详细教程
都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用vue-cli构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握es6，而vue的全家桶(vue-cli,vue转载 2020-10-05 23:23:08 · 236 阅读 · 0 评论 -
安装vue-cli 3.
安装node.js，查看版本node -v修改npm为阿里的镜像源npm install cnpm -g --registry=https://registry.npm.taobao.org查看版本 cnpm -v全局安装vue-cli 3.3.0cnpm i -g @vue/cli@3.3.0查看版本，启动可视化管理工具 vue ui启动成功如果你有问题，欢迎给我留言。 如果这篇博客对你有帮助，请给我一个赞???? Life is fantastic.....转载 2020-10-05 23:21:27 · 156 阅读 · 0 评论 -
使用 vue-cli 3 快速创建 Vue 项目
为了便于 Vue 项目的管理， Vue 团队官方开发了vue-cli工具。本文将带您使用 vue-cli 快速创建一个 Vue 项目。本地安装 vue-cli使用 npm 全局安装 vue-cli ：npm i -g @vue/cli@3.0.0-beta.6创建项目执行：vuecreatemy-project会弹出如下界面：此处有两个选择：default (babel, eslint)默认套餐，提供babel和eslint支持。 Manu...转载 2020-10-05 23:19:11 · 248 阅读 · 0 评论 -
VUE CLI3项目搭建 ESLint配置
VUE项目框架配置一、工具准备Node.js安装安装方法：点击查看WebStorm安装下载地址：点击查看二、环境准备镜像准备1.查看代理：npm get registry2.设置淘宝镜像2.1临时使用.npm --registry https://registry.npm.taobao.org install express2.2持久使用.npm config set registry https://registry.npm.taobao.org2.3验证是否成功np转载 2020-10-05 23:11:52 · 1072 阅读 · 0 评论 -
vue-cli3如何设置跨域
使用vue create 项目名创建一个vue项目。 打开项目，在项目根目录新建文件vue.config.js配置文件。 使用devServer.proxy设置本地开发代理配置。 以要过滤的路径名作为属性名，设置target代理目标。 最后记得添加changOrigin: true开启代理设置。 END 注意事项 devServer.proxy适用于本地开发使用，生成环境请是用第三方代理软件，如nginx。 ...转载 2020-10-05 22:59:45 · 451 阅读 · 0 评论 -
webpack开发配置API代理解决跨域问题-devServer
1. 一个完整的webpack配置代理代码设置代理的前提条件：1、需要使用本地开发插件：webpack-dev-server。2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。3、webpack版本： 3.0、4.0亲测有效一个webpack配置信息：module.exports = { //... devServer: { proxy: { '/api': { target: 'htt转载 2020-10-05 22:56:45 · 548 阅读 · 0 评论 -
让vue项目可通过localhost和IP同时访问，又避免启动打开页面为0.0.0.0的尴尬
1.首先你需要将config/index.js中的host修改为0.0.0.0module.exports = { dev: { //... host: '0.0.0.0',//将 host设置为 0.0.0.0 port: 8080, //端口号,自定义 autoOpenBrowser: true, errorOverlay: true, notifyOnErrors: false, poll: false, //... },转载 2020-10-05 22:41:59 · 841 阅读 · 0 评论 -
vue-cli3.0 环境变量与模式
vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢?为什么需要配置环境变量和模式呢？所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们转载 2020-09-29 09:55:11 · 168 阅读 · 0 评论 -
import qs from ‘qs‘ qs库的使用
1.npm地址https://www.npmjs.com/package/qs2、概述将url中的参数转为对象；将对象转为url参数形式3、示例import qs from 'qs';const url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';// 转为对象console.log(qs.parse(url));co转载 2020-09-11 14:48:17 · 5752 阅读 · 0 评论 -
axios中get请求与post请求的简单函数封装
今天写点什么呢，就写写如何将axios的post请求和get请求封装在一个函数中。首先讲讲axios的get请求。axios.get('/user') .then( (response) => { console.log(response); }) .catch( (error) => { console.log(error); });get请求如何传参想必大家应该都知道的一是可以拼接在url上axios.get('/user?ID=12345').t转载 2020-09-11 14:42:04 · 601 阅读 · 0 评论 -
router分开定义
//主文件中:import MssMain from '@/views/MssMain.vue';import managementStatusRouter from 'ManagementStatus/router';import projectStatusRouter from 'ProjectStatus/router';import settingsRouter from 'Settings/router';import riskProjectStatusRouter from 'Ris.原创 2020-09-11 10:17:55 · 210 阅读 · 0 评论 -
Vue自定义组件通过v-model实现父子组件双向同步通信
在vue官网2.2.0的api新增的model选项，可以帮助我们实现父子同步通信。1. modelmodel的类型定义如下，它有两个属性prop，event.一个组件上的v-model会把 value用作 prop把 input用作 event类型：{ prop?: string, event?: string }model: { prop: ‘value1’, // prop说:我要在该组件被使用(被父组件调用)时,v-model的值绑定给value1 event:..转载 2020-09-09 15:38:02 · 870 阅读 · 0 评论 -
vue中对于一个非表单元素使用this.$emit(‘input‘,name)的问题.
vue中对于一个非表单元素使用this.$emit('input',name)的问题.vue.js一个tab页组建，包括三个文件，在tabs.js中，为何要 this.$emit('input',name)？请输入代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev转载 2020-09-09 15:29:20 · 1384 阅读 · 0 评论 -
vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event
<my-checkbox v-model="foo" value="some value"></my-checkbox> Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' },})Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change'...转载 2020-09-09 15:14:32 · 3210 阅读 · 1 评论 -
vue传参数：子传父 this.$emit(‘input‘,val)
子组件在传值的时候，选用input，如this.$emit(‘input’,val)，在父组件直接用v-model绑定，就可以获取到了如果你不用input，则需要常规的@方法获取值，并用jq代码给kcrid赋值。转载 2020-09-09 15:24:05 · 1374 阅读 · 0 评论 -
vuex深入理解 modules
一、什么是module？背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。二、怎么用module？一般结构const moduleA = { state: { ... }, mutations: { ... }, actio.转载 2020-08-29 20:11:03 · 246 阅读 · 0 评论 -
父组件给子组件传值
可以同时传多个值，也可以同时绑定多个事件<child :msg1="msg1" :msg2="msg2" :msg3="msg3" @query1="query1" @query2="query2"></child>原创 2020-08-25 20:36:09 · 131 阅读 · 0 评论 -
Lodash中的_.cloneDeep(value) 深拷贝和_.clone(value) 浅拷贝
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.cloneDeep(value)这个方法类似_.clone，除了它会递归拷贝value。（注：也叫深拷贝）。参数： value(*): 要深拷贝的值。返回： (*): 返回拷贝后的值。例子： var objects = [{ 'a': 1 }, { 'b': 2 }]; var deep = _.cloneDeep(objects); ...转载 2020-08-25 20:25:32 · 7937 阅读 · 0 评论 -
2020 Vue零基础教你 cloneDeep(obj) 安装并配置Lodash（npm指令） 完成对表单的深拷贝
1、引言我们在做Vue项目的时候，可能会遇到共用一个对象或者数组的时候，比如说两个渲染模块共用一个数组，但是需要的格式不一样，其中一种可能需要字符串形式，另外一种可能需要以逗号 , 隔开的形式拿数据，那么深拷贝就发挥了它的简便作用了，让我们一起来了解一下吧~2、install方式$ npm i -g npm$ npm i --save lodash任务：完成对addForm表单下goods_cat数组的深拷贝实现步骤：首先在script下导入刚刚安装好的lod...转载 2020-08-25 20:22:15 · 1082 阅读 · 0 评论 -
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
页面展示：实现效果：点击实现列表内容的展开、折叠。代码：<div class="invoice-list" v-for="(item,index) in invoiceData" :key="index"> <div class="images"><img src="../../../../../static/images/invoice_pu.png" v-if="item.invoiceType == '0'"><img sr..转载 2020-08-22 12:31:08 · 631 阅读 · 0 评论 -
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
问题描述：在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；解决：运用this.$forceUpdate()强制刷新代码案例 1 2 3 <Select v-model="carSafeLine.insuranceName" placeholder="请选择" class="mulisel option-h" filterable clearable :disabled=".转载 2020-08-22 12:28:23 · 2885 阅读 · 1 评论 -
vue-js-modal 模态弹出窗口
基于Vue实现的Modal窗口，单独组件，方便使用，还很美观更多精彩更多技术博客，请移步 IT人才终生实训与职业进阶平台 - 实训在线相关网址vue-js-modal github vue-js-modal example使用方式安装依赖使用终端在项目根目录运行以下脚本后，package.json 的 dependencies 中会出现 vue-js-modal: ^x.x.xx 的依赖npm i -D vue-js-modal全局注册插件在 main.js..转载 2020-06-18 17:28:31 · 2316 阅读 · 0 评论 -
Vue.js modal
Version 2.0.0+ potentially has breaking changes. Please take a look at the changelog below:Using ResizeObserver instead of MutationObserver Using transition states to coordinate modal & overlay transitions (instead of delays) Using prettier Overla转载 2020-06-18 17:26:39 · 1175 阅读 · 0 评论 -
webpack4 - 8.整合jquery等第三方库
虽然目前angular/react/vue这些现代化的框架使前端开发模式发生了极大的变化，但是有些东西还是需要依靠我们的老朋友jquery来实现。1.引入jquery我们继续使用之前的代码，引入jquery。1.1 使用import手动引入jquery安装jquery依赖npm install jquery在src/js/index/js中引入jquery，使用jquery来修改页面的title内容import '../css/index.css'import..转载 2020-06-16 16:51:30 · 482 阅读 · 0 评论 -
prop 单向数据流
1：浏览器报错vue.js:584 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's...转载 2020-05-07 21:46:39 · 544 阅读 · 0 评论 -
vue插件编写与实战
前言热爱vue开发的同学肯定知道awesome-vue这个github地址，里面包含了数以千计的vue开源插件，而这些插件大都来自第三方开发者们，是他们为vue社区提供了大量的技术支持和解决方案。本文立足vue开源的理念，主要为vue开发者讲解编写vue插件的方法和步骤，通过理论与实践相结合的方式来加深大家对vue插件编写的认识。vue插件介绍1. 插件与组件在讲解插件之前，我们...转载 2020-05-07 19:47:03 · 157 阅读 · 0 评论 -
vue-router的两种模式（hash和history）及区别
URL的hashURL的hash URL的hash也就是锚点(#), 本质上是改变window.location的href属性. 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新HTML5的history模式：history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.history.pushState()history...原创 2020-05-01 16:35:57 · 22975 阅读 · 0 评论 -
Vue-给对象新增属性（使用Vue.$set()）
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Obje...转载 2020-04-30 18:21:00 · 806 阅读 · 0 评论 -
Vue2.0 $set()的正确使用方式
Vue2.0 $set()的正确使用方式 问题： 在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。也就是如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 原因：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/...转载 2020-02-28 23:20:45 · 1786 阅读 · 0 评论 -
Vue中 v-for 绑定key和不绑定key的区别
首先，它们区别主要在于 虚拟DOM的复用，绑定key可以更好的复用，下面来详细讲一下假如我们有一个数组 arr = [1,2,3,4]，我们要在2后面插入一个值9；如果绑定了key值，那么会是这样的情况：如果没有绑定key值，那么会是这样的情况：...转载 2020-04-30 15:11:58 · 1542 阅读 · 0 评论 -
Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri...转载 2020-04-22 21:12:51 · 328 阅读 · 0 评论 -
Vue事件总线（EventBus）使用详细介绍
前言vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即 **EventBus**来通...转载 2020-04-22 21:10:34 · 264 阅读 · 0 评论 -
Vue-------$refs、$emit、$on的使用场景
1、$emit的使用场景子组件调用父组件的方法并传递数据注意：子组件标签中的时间也不区分大小写要用“-”隔开子组件：<template> <button @click="emitEvent">点击我</button></template><script> export default { data() {...转载 2020-03-27 21:01:25 · 137 阅读 · 0 评论 -
vue-cli中的build.js配置文件详细解析
这个配置文件是命令npm run build的入口配置文件，主要用于生产环境// 写在前面// 此文件是在node环境中运行的，使用webpack的nodejsAPI实现自定义构建和开发流程的// ---------------------// npm和node版本检查，请看我的check-versions配置文件解释文章require('./check-versions')()...转载 2020-03-11 21:12:39 · 423 阅读 · 0 评论 -
Vue中import from的来源及省略后缀与加载文件夹问题
Vue使用import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的：module.exports = {resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': resolve('src')}...转载 2020-03-03 21:13:08 · 1641 阅读 · 0 评论 -
vue绑定值与字符串拼接两种写法
<cell :title="`当前门店:${item.Storename}`" link="/component/radio" :inline-desc="'门店地址:' + item.Storeaddess"></cell>第一种:title="`字符串${xx}`"第二种:title="'字符串' + xx"...转载 2020-03-01 18:10:48 · 5655 阅读 · 0 评论 -
Vue 更新对象或数组数据时页面刷新的理解
<template> <div> <p>info1:</p> <ul> <li v-for="(item, key) in info1" :key="key">{{key}}={{item}}</li> </ul> <el-bu...原创 2020-02-29 22:22:01 · 1211 阅读 · 0 评论 -
Vue之computed(计算属性)详解get()、set()
Vue的计算属性：1.在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果。2.通过getter\setter实现对属性数据的显示和监视，计算属性存在缓存，多次读取只执行一次getter计算。<div id="demo"> 姓：<input type="text" placeholder="firstName" v...转载 2020-02-28 21:45:02 · 1754 阅读 · 0 评论