VUE - 技术教程文章
vue--vux框架的使用【代码】
<1>. 在项目里安装vuxnpm install vux --save<2>. 安装vux-loader npm install vux-loader --save-dev<3>. 安装less-loader npm install less less-loader --save-dev<4>. 安装yaml-loader npm install yaml-loader --save-dev<5>. 在build/webpack.base.conf.js 文件进行配置const vuxLoader = require(‘vux-loader‘) const webpackConfig = originalConfig// 原来的 module.exports 代码赋值给变量 webpackConfig，//即将原来...
Nginx部署多个vue前端项目【代码】【图】
前言：在前端项目的部署上需要让2个前端项目都部署到一个IP地址和端口下，那么我们这里就要用到Nginx了，接下来我们看看如何在一个Nginx下部署2个前端项目。例如我的服务器地址是http://1.116.33.31/那么则是访问的pc项目首页，则是访问的app项目首页 一，首先打包编译两个前端项目（base基础路径）pc项目base默认不写，也就是 1.116.33.31/ app项目base：‘/app/‘，也就是http://1.116.33.31/app/二，把打包生成的静态文件上传到...
Vue Router【代码】
Vue Router前端 中的路由Vue Router中文文档路由的基本使用在 vue 的作用域中注意: 使用别名一定要加 :<!--路由的入口 就是一个 a 标签--> <router-link to='/home'>主页</router-link><!--入口使用 别名 --> <router-link :to='{name:'home'}'>主页</router-link><!--路由的出口--> <router-view></router-view><!--可以使用单闭合标签--> <router-view/> 在 script 中// 导入 vue 以及 vue-router <script src="https://cdn...
Vue.js（一）【代码】【图】
引入 vue.js对于制作原型或学习，你可以这样使用最新版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>Vue 介绍前端主要负责 MVC 中的 V（视图）这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue.js 是一套构建用户界面的渐进式...
VSCode搭建简单的Vue前端项目【代码】【图】
技术基础开发之前，请先熟悉下面的4个文档vue.js, 优秀的JS框架vue-router, vue.js 配套路由vuex，vue.js 应用状态管理库AntDesign，蚂蚁金服提供的组件库开发环境Node JS（npm）Visual Studio Code（前端IDE）安装Visual Studio Code下载地址： 官网下载地址Visual Studio Code 是一款非常优秀的开源编辑器，非常适合作为前端IDE, 根据自己的系统下载相应的版本进行安装。更多 VS Code 教程可以参考以下资料官网文档：https://cod...
Vue 进阶之路（十一）【代码】【图】
之前的文章我们说了一下 vue 中组件的原生事件绑定，本章我们来所以下 vue 中的插槽使用。 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>vue</title> 6<script src="https://cdn.jsdelivr.net/npm/vue"></script> 7</head> 8<body> 9<div id="app">10<child title="<p>你好 世界</p>"></child>11</div>12<script>13 Vue.component("child", { 14 props: [‘title‘], 15 templat...
VUE引入第三方js包及调用方法讲解
今天小编就为大家分享一篇关于VUE引入第三方js包及调用方法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧VUE引入第三方js包及调用方法1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到2、网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用，较稳定的方式是在 index.html 中引入js包 1<script src="static/xxxxx.js"></script>3、mount...
vue element-ui的对话框dialog没有height怎么解决？【代码】【图】
饿了么的对话框 https://element.eleme.cn/#/zh-CN/component/dialog 思路：直接获得dialog，然后强制加height见如下代码：<el-dialogref="elDialog"title="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer"class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false"...
vue中头部写成公用组件【代码】【图】
写一个公用的组件 这样在其它页面也可以直接复用组件m-header.vue<template> <div class="top-page" :class="{‘top-bg‘: hasBg}" :style="{height:1.28+statusBarHeight+‘rem‘,paddingTop:0.46+statusBarHeight+‘rem‘}"> <div class="top"> <div class="back" @click="goBack"> <!-- 返回图标箭头 --> <img style="width:0.5rem;height:0.5rem" src="@/assets/img/return_1.png" > </div> ...
vue中webpack的配置理解【代码】
当我们需要和后台分离部署的时候，必须配置config/index.js:用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置）var path = require(‘path‘)module.exports = {build: {index: path.resolve(__dirname, ‘dist/index.html‘),assetsRoot: path.resolve(__dirname, ‘dist‘),assetsSubDirectory: ‘static‘,assetsPublicPath: ‘/‘,productionSourceMap: true},dev: {port: 8080,proxyTable: {}} }在‘build‘部分，...
SpringCloud+SpringBoot+Vue【代码】
一、任务要求基于任务二 SpringBoot+Vue 的 demo 进行微服务拆分使用 Consul 作为注册中心使用 Zuul 作为网关二、具体实施构思将任务二 Demo 的后台工程，划分为几个微服务模块。将几个微服务模块和网关模块，注册到注册中心【依赖导入】<!-- consul服务发现和配置 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-consul-config</artifactId> </dependency> <dependency><groupId...
vue-router填坑之路【代码】
1.在结构化css时，习惯将不同的css文件通过一个入口文件打包，而入口文件在引入其他css文件时，需要强烈注意，要在单行末尾加分号；少分号的，单行相对应的css文件会引用无效@import ‘./login.css‘; @import ‘./app.css‘; @import ‘./transition.css‘; 原文：http://www.cnblogs.com/pomelott/p/8047989.html
【Vuex】vuex基本介绍与使用【代码】【图】
Vuex是什么？官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单来说，当Vue应用程序比较庞大的时候，组件里面的状态会比较多，为了方便管理某些状态，我们需要把其中一些变量抽出来...
vue生命周期【图】
由此可见，当代码运行时，会一次调用Vue 的 beforeCreate、created、beforeMount、mounted 四个方法，直至完成组件的挂载。而update阶段，要在数据发生改变时（比如更新message字段 vm.message = ‘Hahahaha~‘）才出发；destroy阶段，要在调用vm.$destroy()后才触发。 大佬更多详细https://www.jianshu.com/p/b88572d8f80a原文：https://www.cnblogs.com/ll15888/p/11511131.html
vue-创建组件的5种方法【代码】【图】
Vue组件分为全局组件和局部组件以及Vue 构造器创建组件，统计为5种创建组件的方式一、效果截图创建的h1-h5五个组件组件名称和结构二、具体的写法如下：1、全局-直接创建Vue.component(‘first‘, {template: ‘<h1>第一种创建组件的方法</h1>‘ }) 2、全局-定义再创建const second = {template: ‘<h2>第二种创建组件的方法</h2>‘ } Vue.component(‘second‘, second); 3、局部注册组件new Vue({el: ‘#app‘,components: {third...
Vue2.x中的Render函数【代码】【图】
Render函数是Vue2.x版本新增的一个函数；使用虚拟dom来渲染节点提升性能，因为它是基于JavaScript计算。通过使用createElement(h)来创建dom节点。createElement是render的核心方法。其Vue编译的时候会把template里面的节点解析成虚拟dom；什么是虚拟dom?虚拟dom不同于真正的dom，它是一个JavaScript对象。当状态发生变化的时候虚拟dom会进行一个diff判断/运算；然后判断哪些dom是需要被替换的而不是全部重绘，所以性能会比dom操作高...
vue上传文件夹的解决方案【代码】【图】
上周遇到这样一个问题，客户上传高清视频（1G以上）的时候上传失败。 一开始以为是session过期或者文件大小受系统限制，导致的错误。 查看了系统的配置文件没有看到文件大小限制， web.xml中seesiontimeout是30，我把它改成了120。 但还是不行，有时候10分钟就崩了。 同事说，可能是客户这里服务器网络波动导致网络连接断开，我觉得有点道理。 但是我在本地测试的时候发觉上传也失败，网络原因排除。 看了日志，错误为： java.lang...
Vue的computed属性
computed属性：计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></scrip...
vue2+vuex+vue-router 快速入门（三） vue 实例介绍【代码】【图】
vue 实例介绍 vue 实例分两种，一种为组件实例，另外一种为根实例。组件实例负责创建个性化组件、而根实例负责把组件渲染到指定的真实的 DOM 结构中。并且 vue 为我们提供了一种特殊的文件格式 .vue 来创建 组件实例。.vue 文件格式如下：*.vue<template>... </template><script>export default {data(){return {}}} </script><style lang="less" scoped></style>通过上面的代码，我们可以看出，整个 .vue 文件分为三个部分：te...
VUE面刷新【代码】
1.这种方法页面会一瞬间的白屏this.$router.go(0)2.这种也是一样，画面一闪location.reload()3.搭配provide、inject使用首先在主页面 app.vue设置： <keep-alive include="GjTable"><router-view v-if="isRouterAlive"></router-view></keep-alive>设置：scriptexport default {provide () {return {reload: this.reload},data () {return {isRouterAlive: true}},methods: {reload () {this.isRouterAlive = falsethis.$nextTick(...
vue 2.0 点击添加class，同时删除同级class【代码】【图】
<template><div class="n-header"><ul class="title-wrapper"><li class="n-fliter">筛选:</li><li v-for="(item,index) in titles" :key="item.id" class="n-title" @click="select(index)" :class="{‘active‘: item.show?‘active‘: ‘‘}"><a href="#"><span v-show="item.show"></span>{{item.sort}}</a></li></ul></div></template><script> export default {data() {return {titles: [{ sort: "全部", show: true },{ sor...
vue前后分离动态路由和权限管理方案【代码】
需求需要根据不同的角色来显示不同的菜单问题系统是前后分离模式开发的，出现了后端接口和前端路由都需要权限管理。思路后端的接口肯定得验证权限前端的路由通过后端发回的json动态生成，对于比较细粒度的可以通过css来控制和隐藏方案使用vue-router的router.addRoutes(routes)来动态生成路由。注意事项vue-router 是按照路由表里的顺序来查找路由的，如果你的404页面在动态添加的路由前面，则需要把404路由单独移出来，最后再添加...
【前端】Vue利用html2Canvas将Dom内容生成图片并下载（解决svg无法显示的问题）【代码】
需求：将页面中DIV内容块（包含svg流程节点）生成图片并直接下载到用户本地，并且不影响之前的svg图的使用实现：1、安装依赖cnpm install --save html2canvas cnpm install --save canvg@2.0.0-beta.1 canvas@^2 jsdom@^13 xmldom@^0 2、引入依赖import html2canvas from "html2canvas"; import canvg from "canvg"; 3、代码实现主要是两个问题SVG无法显示： 借助canvg将svg转canvas不能影响原有的元素显示：上一步会改变原有的dom...
Vue中的动画、监听见、过滤器、计算属性【代码】
1.动画基础使用：给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以<transition><div class="box" v-show=‘isShow‘></div> </transition>之后去样式中设置6个类名即可 .v-enter {opacity: 0;}.v-enter-to {opacity: 1;}.v-enter-active {transition: all 2s;}.v-leave {opacity: 1;}.v-leave-to {opacity: 0;}.v-leave-active {transition: all 2s;}如果页面中有多个元素需要添加不同的动画，那么只需要给<tran...
Vue+Webpack之 代码及打包优化【代码】
本文重点介绍Vue单页面应用的优化手段：异步加载面切换时加loading特效点击延迟inline manifest逻辑代码优化依赖包体积优化cdn引用Vue代码优化异步加载所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。所以在router文件夹下 index.js 做如下配置组件优化由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体...
vue的入门【代码】【图】
1、vue的路径通过新建的项目的导入：得到绝对路径“@/.....”import LoginPage from‘@/components/LoginPage‘2、2.1、vue init webpack project, project是你创建的文件夹名2.2、npm install就像其他的项目内的sbt导入依赖包和相关的包文件的导入进入项目，下载依赖：（进入项目一定要切换到项目路径）1npm install 或者 cnpm install 2.3、运行项目：npm run dev 3、不同的创建vue项目的方式，没有试过 npm install -g @vu...
vue路由vue-router
什么是路由后端路由对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上的资源前端路由对于单页面应用程序来说，主要通过URL中的hash(#)来实现不同页面的切换，hash有一个特点，HTTP请求中不会包含hash相关的内容。所以单页面程序中的页面跳转主要用hash实现。这种通过hash改变来切换页面的方式叫做前端路由。 原文：https://www.cnblogs.com/lianglanlan/p/10279039.html
springcloud 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离 项目源码【图】
1.代码生成器： [正反双向](单表、主表、明细表、树形表，快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面、建表sql脚本、处理类、service等完整模块2.多数据源：（支持同时连接无数个数据库，可以不同的模块连接不同数的据库）支持N个数据源3.阿里数据库连接池druid,安全权限框架 shiro（菜单权限和按钮权限）, 缓存框架 ehcache4.代码编辑器，在线模版编辑，仿开发工具编辑器5.调用摄像头拍照 自定义裁...
Jquery和vue对比【代码】【图】
前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？ 1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，...
16.如何做到webpack打包vue项目后，可以修改配置文件【代码】【图】
问题描述：前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。解决方法：用了generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.js...