随笔分类 -  Vue

移动端vw页面适配方案在vue项目中的应用
摘要：移动端vw页面适配方案主要是借助以下几个PostCSS插件实现的。 postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units 首先 阅读全文
posted @ 2020-03-26 19:10 风岳轩 阅读(512) 评论(0) 推荐(0)
应用十二：Vue之动态表单的实现及校验
摘要：该篇仍然使用Vue + TypeScript的语法，以近期项目中的实例来做分享~ 动态表单实现 首先给出页面展示效果： 该页面分为上下两部分，上面是静态表单部分，下面是动态的实现。简单来说就是每点击一次批量添加按钮就会新增一行设备信息表单，点击后面的移除就会删掉当前表单行。 静态表单就不多说了，动态 阅读全文
posted @ 2020-01-17 11:31 风岳轩 阅读(8808) 评论(0) 推荐(0)
应用十一：Vue之基于ElementUI封装execl导入组件
摘要：针对上一篇《应用十：Vue之Vue与TypeScript集成开发》的介绍，这里给大家分享一个在近期项目中封装的导入组件，参考组件源码来更好的熟悉.vue文件中脚本的语法。 组件源码： <template> <div id="myImport"> <el-button type="primary" p 阅读全文
posted @ 2020-01-03 17:52 风岳轩 阅读(452) 评论(0) 推荐(0)
应用十：Vue之Vue与TypeScript集成开发
摘要：截至2019年底，TypeScript（简称ts）已经与Python并列成为第二受欢迎的开发语言，仅次于Rust。如果你还不清楚到底什么是ts，请先移步至ts中文网了解。再过几个月Vue3.0版本就将正式发布，源码完全使用TypeScript编写，Vue与TypeScript的集成势必将成为接下来的 阅读全文
posted @ 2020-01-02 21:19 风岳轩 阅读(1569) 评论(0) 推荐(0)
应用九：Vue之国际化（vue-i18n）
摘要：vue-i18n是一款针对Vue.js 的国际化插件，具体应用步骤如下： 一、安装插件 npm install vue-i18n --save 二、在main.js中引入插件 import VueI18n from 'vue-i18n' Vue.use(VueI18n) 三、创建i18n实例 con 阅读全文
posted @ 2019-12-18 21:02 风岳轩 阅读(2967) 评论(0) 推荐(0)
应用八：Vue之在nginx下的部署实践
摘要：最近有时间研究了下前端项目如何在nginx服务器下进行部署，折腾了两天总算有所收获，汗~~ 所以就想着写篇文章来总结一下，主要包括以下三个方面： 1、打包好的vue项目如何进行部署。 2、如何反向代理后端服务接口。 3、vue项目二级访问目录在nginx下的配置。 说明：nginx服务器的安装及vu 阅读全文
posted @ 2019-09-06 10:08 风岳轩 阅读(28781) 评论(0) 推荐(3)
Vue生命周期学习总结
摘要：官方文档上关于Vue生命周期的图片大家一定很熟悉： 1、beforeCreate 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作。2、create 阅读全文
posted @ 2019-07-22 10:11 风岳轩 阅读(332) 评论(0) 推荐(0)
应用七：Vue之适配test环境变量（2.0版）
摘要：在我们使用vue-cli创建的项目中，默认只有开发development和生产production两种环境变量；但在实际的项目开发过程中往往都会有测试环境，下面就来说一下如何适配测试环境test的环境变量。 1、在项目的config目录下新建test.env.js文件，然后拷贝prod.env.js 阅读全文
posted @ 2019-06-14 13:30 风岳轩 阅读(1972) 评论(1) 推荐(0)
应用六：Vue之父子组件间的三种通信方式
摘要：（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 组件是Vue的核心功能之一，也是我们在开发过程中经常要用到的。各个独立的组件之间如何进行数据的交互，下面介绍三种个人在开发过程中用过的方法~ 1、props与$emit 父组件通过props的 阅读全文
posted @ 2019-06-04 18:27 风岳轩 阅读(583) 评论(1) 推荐(0)
应用五：Vue之ElementUI 表格Table与分页Pagination组件化
摘要：（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 在平时的web项目开发过程中，列表分页查询展示应用的很频繁，为了便于阅读并减少代码的冗余，所以对ElementUI的表格和分页组件进行了二次封装。 首先在工程下的components目录下创建 阅读全文
posted @ 2019-05-30 18:17 风岳轩 阅读(9008) 评论(1) 推荐(3)
应用四：Vue之VUEX状态管理
摘要：（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 应用场景：Vue多个组件之间 阅读全文
posted @ 2019-05-29 20:41 风岳轩 阅读(4351) 评论(0) 推荐(0)
应用三：Vue之混入(mixin)与全局混入
摘要：（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 首先介绍一下混入mixin的概念： 官方文档：混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“ 阅读全文
posted @ 2019-05-24 14:29 风岳轩 阅读(6462) 评论(0) 推荐(0)
应用二：Vue之ElementUI Form表单校验
摘要：（注：本文适用于有一定Vue基础或开发经验的读者，文章就知识点的讲解不一定全面，但却是开发过程中很实用的） 表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明~ 如下代码是Form表单校验的demo示例： <template> <div id= 阅读全文
posted @ 2019-05-23 16:08 风岳轩 阅读(1068) 评论(0) 推荐(0)
应用一：Vue之开发环境搭建
摘要：简单分享下vue项目的开发环境搭建流程~ 1、安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现，下载地址：https://nodejs.org/en/。安装完成之后以管理员身份运行cmd， 输入node -v，查看node版本号，出现版本号则说明安装成功。 2、安装淘宝npm 阅读全文
posted @ 2019-05-22 13:46 风岳轩 阅读(344) 评论(0) 推荐(0)
基于vue项目的js工具方法汇总
摘要：以下是个人在vue项目的开发过程中经常会用到的一些公共方法，在此进行汇总，方便以后及有需要的朋友查看~ let util = {}; /** * @description 日期格式化 * @param {Date} date 日期 * @param {String} fmt 日期格式 eg: yyy 阅读全文
posted @ 2019-05-17 16:20 风岳轩 阅读(1608) 评论(0) 推荐(1)