引入文件：<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"><script src="//vuejs.org/js/vue.min.js"></script><script src="//unpkg.com/iview/dist/iview.min.js"></script>html：<div id="iviewTrasnsfer"> <transfer :titles="titles" :data="data_" :target-keys="targetKeys1" :render-format="render" @on-change="handleChange"></tr...
引言：vue的vuex是一个全局状态管理工具，有强大的社区所贡献，方便达到一端改变全局改变功能，这里就不强调如何使用了，单独讲解一下如何更好的使用这个工具。先说一下这个使用的场景，如果仅是父子组件传值这个大可不必使用，当你用本地存储和广播事件都不能满足你的需求时，你就可以考虑使用vuex来管理你的数据了。使用方法：import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) let state = { //vuex的状态对象 ...
Vue Element UI 图片上传ElementUI upload组件上传图片，多看看文档参数，基本没什么难度，我总结以下个人的需求。文档里面其实都有说明，我这边给出使用例子，方便他人。参照ElementUI官网:https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan上传权限验证 (需要heades里面加上token)预览上传图片(这个其实就很简单了, 我没仔细看文档)上传headers添加token由于我接口限制了headers token验证，所以...
<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，//即将原来...
前言：在前端项目的部署上需要让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 的作用域中注意: 使用别名一定要加 :<!--路由的入口 就是一个 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对于制作原型或学习，你可以这样使用最新版本：<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 是一套构建用户界面的渐进式...
技术基础开发之前，请先熟悉下面的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 中的插槽使用。 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包及调用方法1、首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到2、网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用，较稳定的方式是在 index.html 中引入js包 1<script src="static/xxxxx.js"></script>3、mount...
饿了么的对话框 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"...
写一个公用的组件 这样在其它页面也可以直接复用组件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> ...
当我们需要和后台分离部署的时候，必须配置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‘部分，...
一、任务要求基于任务二 SpringBoot+Vue 的 demo 进行微服务拆分使用 Consul 作为注册中心使用 Zuul 作为网关二、具体实施构思将任务二 Demo 的后台工程，划分为几个微服务模块。将几个微服务模块和网关模块，注册到注册中心【依赖导入】<!-- consul服务发现和配置 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-consul-config</artifactId> </dependency> <dependency><groupId...
1.在结构化css时，习惯将不同的css文件通过一个入口文件打包，而入口文件在引入其他css文件时，需要强烈注意，要在单行末尾加分号；少分号的，单行相对应的css文件会引用无效@import ‘./login.css‘; @import ‘./app.css‘; @import ‘./transition.css‘; 原文：http://www.cnblogs.com/pomelott/p/8047989.html