——————– 如上图所示:需要完成的功能是点击更改头像,获取本地文件库,选择图片后将原始图片替换.这里我就直接用html文件引入vue来简单实现在这功能,代码如下: HTML: <div id="app"> <div class="item_bock head_p"> <div class="head_img"> <img :src="userInfo.avatar"/> &

已完成: 后台的管理功能: 这里用的组件是 element-UI  ====> NavMenu ◆首先是排版 : <div class="manage-page fillcontain"> <el-row style="height: 100%;"> <el-col :span="width" style="height: 100%;background-color: #324057;overflow

https://blog.csdn.net/wk767113154/article/details/77989544  参考资料 <template> <div id="profile" class="has-top"> <!-- <v-header title="我的资料"></v-header> --> <!-- <div class="section"

因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-saver xlsx --save npm install script-loader --save-dev 2.下载需要的两个js插件,Blob.js和 Export2Excel.js.这两个文件在别的文章里面有下载地址,很好找.在src/目录下新建一个vendor,将这两个文件放到里面. 3.修改web

selectCityServiceOne() { let sendData = { token: this.token, id: this.id } post_ajax('backStage/cityService/selectCityServiceOne', sendData, (json) => { let data = json.data let arr = [ 'import_name', 'company_name', 'company_legal_person', 'service_

引入了element-ui,但是和我们自己的样式颜色有很大的不同, 修改例子:在src文件下创建 element-var.scss,代码如下 $--color-primary: yellow;  /*修改按钮primary的颜色*//* 改变 icon 字体路径变量,必需 */$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';@import "../node_modules/element-ui/packages/t

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

Docker 部署 vue 项目 Docker 作为轻量级虚拟化技术,拥有持续集成.版本控制.可移植性.隔离性和安全性等优势.本文使用Docker来部署一个vue的前端应用,并尽可能详尽的介绍了实现思路和具体步骤,以方便有类似需要的同学参考. Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,该容器包含了应用程序的代码.运行环境.依赖库.配置文件等必需的资源,通过容器就可以实现方便快速并且与平台解耦的自动化部署方式,无论你部署时的环境如何,容器中的

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目的请求生命周期 三.vue项目中的功能 1. 路由相关的标签和方法 2. 路由配置 (1)无路由传参的路由配置方法 (2)路由传参的路由配置方法 3. 页面的跳转功能 (1)标签跳转 (2)逻辑跳转(路由跳转) 4. 项目组件中的小知识点 (1)组件样式 (2)vue前端项目和django后端 四.

实现功能: 1.记住密码勾选,点登陆时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.不勾选,点登陆时候则清空之前保存到cookie的值,下次登陆需要手动输入 大体思路就是通过存/取/删cookie实现的:每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如上: 直接上主要的代码 HTML部分 <div class=&qu

本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍了如何把这个编辑器整合到vue项目中去,但涉及到图片上传的部分都没用,ueditor.config.js中有个serverUrl配置项,作用就是设置图片上传接口,把后端给的接口填进去,结果是单图无法上传,多图可以上传,这里就是对单图和多图上传进行修改. 一.废掉单图上传 打开ueditor.all.

0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localStorage) ( 3 ) vuex设置 SET_LOCK state.isLock = true (为true是锁屏状态) ( 4 ) 在路由里面判断vuex里面的isLock(为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以) (1)设置锁屏密码 handleSetLock

一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 三.全局安装vue-cli脚手架 npm install --global vue-cli 四.vue2.* webpack模板下载 vue init webpack vue_project 五.安装vuex npm install vuex --save 在main.js中注入vue

在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 <template> <textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"><

一.vue项目利用vue-clipboard2实现剪切板的功能 1.安装vue-clipboard2插件:cnpm install --save vue-clipboard2 2.main.js添加 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 3.copy组件:message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调 v-clipboard:copy="message" v

最近写公司项目时,动态更新favicon 动态更新之前需要有一个默认的favicon. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹,存放静态文件. favicon图片放到该文件夹下. 然后再index.html中添加: <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico"> 然后刷新浏览器,就会更新. 如果没有效果,则查

在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO NO,让我们一起来探索如何解决这个问题吧. 首先我们需要借助一个插件 generate-asset-webpack-plugin npm install generate-asset-webpack-plugin --save-dev 其次在build文件夹下建立一个generate-asset.co

上传模块在web开发中是很常见的功能也是很重要的功能,在web应用中需要上传的可以是图片.pdf.压缩包等其它类型的文件,同时对于图片可能需要回显,对于其它文件要能够支持下载等.在守望博客系统中对于上传模块进行统一管理,同时对于上传不同的类型文件,留有自定义实现机制的接口,也即可扩展. 基于上传模块机制,就可以实现修改头像功能了.同时顺带将修改密码的功能也一起实现,这个修改密码的功能相对就很简单了. 1.可扩展上传模块 统一上传模块的体现就是上传所有类型的文件,都是调用统一的一个接口,即上传接口

VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/details/80944513

vue项目打包之后的dist文件目录是如下 如果想要修改dist或则static文件名称,需要打开config / index.js build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 对应的