创建Vue项目 以及引入Iview官方文档# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法。 我创建Vue项目过程$ vue init webpack vue-iview ? Project name vue-iview ? Project description A Vue.js project ? Author yo...
脚手架不说了,提前搭建好 然后安装 vue-skeleton-webpack-plugin npm install vue-skeleton-webpack-plugin 创建文件 skeleton.js和skeleton.vue skeleton.js import Vue from vueimport Skeleton from ./Skeleton.vueexport default new Vue({components: {Skeleton},template: <skeleton />})skeleton.vue 我的skeleton.vue不知为何<style>标签写在外部没有加载进去,故写到<template>内 样式和模板可以自己修改 <template><div c...
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录 下面的两个页面，登录页不需要检测，首页需要检测const routers = [ {path: /,component: App,children: [{ path: /login, component: Login,meta: {title: 登录}},{ path: /home, component: Home,meta: {title: 首页,requireAuth: true}}] } ] export default routers2.main.js 返回遍历的某个路由对象，我们定义为record，检测这个对象是否拥有...
简介页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板 安装npm install --save clipboard使用方法一<template><span>{{ code }}</span><iclass="el-icon-document"title="点击复制"@click="copyActiveCode($event,code )"/> </template> // methods copyActiveCode(e, text) {const clipboard = new Clipboard(e.target, { text: () => text })clipboard.on(success, e => {this.$message({ type: success, ...
前言 最近组长安排着做一个项目，h5的应用下载项目，想着做起来还是比较容易，可是看到提出的需求，我就有点懵逼了！需要对应用的下载进行统计！！！我当时就想着我前端怎么对页面点击按钮就行数据统计啊！我以前的项目也有对应用的下载量就行数据统计的，可是那些项目都是后台人员编写进行数据统计的。我当时就有点不知所措了。想着怎么进行统计，怎么搞定这个！百度得知，百度统计可以帮着解决这个问题，可是没有用过啊！硬着头皮...
1、安装使用npm下载： `npm install wangeditor`2、 创建实例（1）基本用法： <template><div><div id="editor" class="editor"></div></div> </template><script> import E from wangeditor export default {name: editor,mounted () {var editor = new E(#editor)editor.customConfig.onchange = (html) => {this.formArticle.content = html}editor.create()} } </script>效果如图（2）自定义高度写法如下：把菜单和编辑框分开 ...
Vue 通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据强制重新生成 DOM 的实现原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如果不同，则会重新生成。 代码示例： 每次点击 refresh 按钮，Demo 组件都会重新生成组件： /*** Demo.vue*/ <template><div>Demo</div> </template> <script>export default {data ()...
最近Vue项目中，要将用户上传的图片全部上传到oss上，OSS配置项请访问：https://help.aliyun.com/document_detail/64095.html?spm=a2c4g.11186623.6.773.kcD20n OSS平台配置在平台的概览里面看看自己的基础设置里面的读写权限是否改为了公共读，我这边只有配置公共读才上传并且回显图片成功，其他情况还请朋友告知，谢谢关于跨域访问的配置这里是我的效果图 （当只有点击上传按钮时才会上传到OSS）预览图片<template><div class="v...
概述 后台管理系统里面有非常多的表单需求，我们希望能够通过写一个json格式的数据，通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单的数据，可以对表单进行重置操作。我结合element ui的控件的下拉框,输入框，时间选择控件和vue-treeselect，做了一个动态表单。v-model的理解 先简单讲一下vue-model是怎么玩的。其实vue-model相当于给表单元素传递一个value,外部监听input事件。所以我们自己封装表单组件的...
代码敲完，项目上线，然后就要与优化相遇。项目有抢购的性质content download 时间非常的长加载慢的很，至此开始前端优化之旅 项目根目录运行 npm install webpack-bundle-analyzer --save-dev在build/webpack.dev.conf.js中引入 const BundleAnalyzerPlugin = require(webpack-bundle-analyzer).BundleAnalyzerPluginplugins: [new BundleAnalyzerPlugin()]运行后显示可以看到几个大的js 下面是已经优化过后的截图像vue ，vue-rou...
一、前言 在广告机项目中，角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分，其中根据粒的大小分的更细： 接口访问的权限控制页面的权限控制菜单中的页面是否能被访问页面中的按钮（增、删、改）的权限控制是否显示权限控制是什么 在权限的世界里服务端提供的一切都是资源，资源可以由请求方法+请求地址来描述，权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源。具体的...
下载swiper首先使用npm 或者cnpm下载swiper cnpm install swiper 引入swiperimport Swiper from ‘swiper; import ‘swiper/dist/css/swiper.min.css;使用swiper<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="../../static/images/ad1.jpg" alt=""></div><div class="swiper-slide"><img src="../../static/images/ad2.jpg" alt=""></div><div class="swiper-slide"><img src=...
在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷.开发移动端，我们常常要用到rem+flex，那么vue中如何配置呢，我的做法是这样： 1、在js中统一计算配置代码如下： export default function() {// var devicePixelRatio = 1;// var scale = 1 / devicePixelRatio;// document.querySelector(meta[name="viewport"]).setAttribute(content,initial-scale= + scale + , maximum-scale= + sc...
本文介绍了Vue CLI3 如何支持less的方法示例，分享给大家，具体如下： 安装方式：npm install less less-loader --save或者cnpm install less less-loader --save大家在编写 .vue 文件的 style 的时候多会选择采用预编译样式来加速开发效率 <style lang="less"> #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3...
用Promise来实现 function2(){// 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) }function3(){// 你的逻辑代码 return Promise.resolve(/* 这里是需要返回的数据*/) }// 调用 function1(){this.function2().then(val => { this.function3();}); } 拓展知识：vue解决一个方法同时发送多个请求的问题 在项目开发过程中，让人抓狂之一的问题就是一个点击事件，当快速点击的时候，它会重复发送多个请求。这是不允许...