vue总结
个人从业阶段对vue框架的总结
手掌日月摘星辰
这个作者很懒,什么都没留下…
展开
-
vue项目使用cropper.js实现单图上传、多图上传、裁剪、缩放图片
HTML代码<template> <div> <div v-if="!onOff" class="initBox clearFix"> <!-- 单张图片展示 --> <div class="uploadLogo" v-if="ifOnePic && picPath" :style="{width: 60 * aspectRatio +'px'}"> <img :src原创 2020-08-28 13:47:15 · 1565 阅读 · 2 评论 -
iview中Page分页组件添加首页尾页按钮
前端面试秘籍:https://github.com/yisainan/web-interview 欢迎star直接上代码html:<Button style="display:inline-block;position: relative;bottom: 13px;" @click.native="changePage(1)">首页</Button>&...原创 2019-01-08 16:09:26 · 2034 阅读 · 1 评论 -
vue如何设置 网页标题 关键字 描述
前端面试秘籍:https://github.com/yisainan/web-interview 欢迎star1.如果执行一次,在main.js中写;2.如果根据路由动态改变,在路由拦截router.beforeEach((to, from, next) => {}中写;代码:document.title = 接口获取的title || '默认title'docume...原创 2018-12-06 16:45:25 · 7237 阅读 · 3 评论 -
vue 路由传参 params 与 query两种方式的区别
如何在方法中跳转界面并传参,vue 中有 params 与 query两种方式。1、使用params 方式传参方式在vue router 文件夹下index.js里面,定义路由: { path: '/groupCommand/:code', name: 'groupCommand', component: groupCommand }...转载 2018-09-27 14:28:08 · 777 阅读 · 0 评论 -
vue-cli的webpack模板项目配置文件分析
个人github:https://github.com/qiilee 欢迎follow2017-09-11更新:更新到webpack 2.6.1所对应的配置,完善部分代码注释。由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时...转载 2017-11-09 14:49:05 · 843 阅读 · 0 评论 -
新手向:Vue 2.0 的建议学习顺序
首发于Code, Design & Things in between写文章登录新手向:Vue 2.0 的建议学习顺序尤雨溪1 年前注:2.0 已经有中文文档 。如果对自己英文有信心,也可以直接阅读英文文档。此指南仅供参考,请根据自身实际情况灵活调整。欢迎转载,请注明出处。起步1. 扎实的 JavaScript / H转载 2017-11-08 18:03:19 · 532 阅读 · 0 评论 -
Vue2.0 新手入门 — 从环境搭建到发布
Vue2.0 新手入门 — 从环境搭建到发布分类 编程技术Jinkey原创感谢 showonne、yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vue2-example什么是 VueVue 是一个前端框架,转载 2017-11-03 13:14:08 · 588 阅读 · 0 评论 -
最全最新的Vue相关开源项目库汇总
这可能是目前最新的 Vue 相关开源项目库汇总个人github:https://github.com/qiilee 欢迎follow零基础掌握无人驾驶,限时报名中http://cn.udacity.com/course/intro-to-self-driving-cars--nd113awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们...转载 2017-11-01 22:12:44 · 1269 阅读 · 0 评论 -
如何在Vue Project中使用vue-apollo
个人github:https://github.com/qiilee 欢迎follow首先我们来熟悉下graphql的工作机制一个GraphQL查询可以包含一个或者多个操作(operation),类似于一个RESTful API。操作(operation)可以使两种类型:查询(Query)或者修改(mutation)。我们看一个例子:`query { client(id: 1)...原创 2017-10-31 14:38:11 · 1756 阅读 · 1 评论 -
vue-cli脚手架config目录下index.js配置文件
个人github:https://github.com/qiilee 欢迎follow 此文章介绍vue-cli脚手架config目录下index.js配置文件此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单独的注释模块,请自行查看 上代码// see http://vuejs-templat...转载 2017-09-08 16:22:04 · 2911 阅读 · 1 评论 -
devDependencies和dependencies的区别
前端面试秘籍,欢迎star!devDependencies和dependencies的区别我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如:--save-dev--save在 package.json 文件里面提现出来的区别就是,使用 --save-dev 安装的 插件,被写入到 devDepende...原创 2017-09-08 14:40:12 · 1737 阅读 · 0 评论 -
Vue 开发|文件目录结构部署
作者:阿安链接:https://www.zhihu.com/question/38213423/answer/128155176来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,转载 2017-09-08 15:40:38 · 1846 阅读 · 0 评论 -
Vue-cli proxyTable 解决开发环境的跨域问题
和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然。在vuejs-templates,也就是vue-cli的转载 2017-09-08 14:33:48 · 531 阅读 · 0 评论 -
import与@import的区别
前端面试秘籍,欢迎star!script中的import是js的语法, 是在js中去引用css文件style中的@import是stylus的语法(没用过stylus, 不知道引用文件是不是@import) 也就是在css中引用css文件, 就像saas那样理论上效果都是一样的, 都是将依赖的文件在打包的时候一块打包进去...原创 2017-09-08 14:21:29 · 8602 阅读 · 0 评论 -
vue-cli创建的项目的目录结构及说明
个人github:https://github.com/qiilee 欢迎follow一、├── build // 项目构建(webpack)相关代码 记忆:(够贱) 9个│ ├── build.js // 生产环境构建代码│ ├── check-versions.js // 检查node&npm等版本│ ├...原创 2017-06-05 16:34:59 · 8969 阅读 · 1 评论 -
vue项目的开发流程
vue 项目的开发流程1.$ node -v (检测node版本,node版本需要在 V4 以上)2.全局安装vue $ npm install -g vue3.安装脚手架 $ npm install -g vue-cli4.运行 vue 命令,看是否已安装完毕 $ vue / $ vue list (查看可安装的模板)5.安装模板 $ vue init web转载 2017-09-08 10:52:59 · 1733 阅读 · 0 评论 -
npm全局安装默认路径
C:\Users\xxx\AppData\Roaming\npm原创 2017-09-08 11:33:53 · 1253 阅读 · 0 评论 -
引入element流程
从新建vue项目到引入组件Element流程标签: vue引入Element报错npm2017-02-27 13:55 8605人阅读 评论(2) 收藏 举报 分类:嵌套(3) 版权声明:本文为博主原创文章,未经博主允许不得转载。从新建vue项目到引入组件Element以及Error when rendering co转载 2017-09-08 11:03:13 · 5034 阅读 · 0 评论 -
简单快速了解Vue.js的开发流程
简单快速了解Vue.js的开发流程个人github:https://github.com/qiilee 欢迎follow Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文主要介绍 vue.js的开发流程,不会涉及知识点的具体代码,点到为止。了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型...转载 2017-09-08 10:58:04 · 10773 阅读 · 0 评论 -
Vue $refs的基本用法
div id="app"> input type="text" ref="input1"/> button @click="add">添加button>div>script>new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="2转载 2017-08-03 17:15:34 · 3186 阅读 · 1 评论 -
Vue-高级讲师之笔记03
1、git page:任何仓库 master分支,都可以发布(git page)-------------------------------------双向过滤器:Vue.filter(name,{read:write:});-------------------------------------1.02.0---------------------原创 2017-06-22 16:08:54 · 443 阅读 · 0 评论 -
如何在移动端设置1px的border
在这里我只介绍下边框的实现:实现原理:伪类+缩放工具:stylus预编译器1、在 stylus文件夹中创建mixin.styl文件,内容如下:(即通过伪类+子绝父相 实现1px的下边框,这只是开始,并没有结束 ) border-1px($color) position: relative &:after display: block ...原创 2017-06-28 14:21:44 · 2353 阅读 · 1 评论 -
如何使用手机预览Vue项目(移动端)
1、在命令行中输入npm run dev ,启动自己的vue项目,例:http://localhost:8081/#/goods,可以在浏览器预览2、那么如何在手机端预览vue项目呢?WIN+R,输入cmd启动命令行工具,输入ipconfig查看本机ip3、本机ip替换localhost,例:http://192.168.1.171:8081/#/goods,预览效果不变4、使用草料二维码,将ht...原创 2017-06-28 13:42:05 · 25060 阅读 · 2 评论 -
Vue-高级讲师之笔记07(结尾)
vue问题:论坛http://bbs.zhinengshe.com------------------------------------------------UI组件别人提供好一堆东西目的: 为了提高开发效率功能原则: 拿过来直接使用vue-cli -> vue-loaderbootstrap:twitter原创 2017-06-22 16:21:24 · 700 阅读 · 0 评论 -
Vue-高级讲师之笔记06
vue动画vue路由--------------------------------------transition 之前 属性.fade-transition{}.fade-enter{}.fade-leave{}--------------------------------------到2.0以后 transition 组件原创 2017-06-22 16:20:22 · 412 阅读 · 0 评论 -
Vue-高级讲师之笔记05
vue2.0:bower info vuehttp://vuejs.org/到了2.0以后,有哪些变化?1. 在每个组件模板,不在支持片段代码组件中模板:之前:我是组件我是加粗标签现在: 必须有根元素,包裹住所有的代码 我是组件 我是加粗标签 2.原创 2017-06-22 16:15:52 · 394 阅读 · 0 评论 -
Vue-高级讲师之笔记04
1、手动配置自己:webpack+vue-loaderwebpack加载模块-------------------------------------2、如何运行此项目?1. npm install或者 cnpm install2. npm run dev-> package.json"scripts":{"dev":"webpack-d原创 2017-06-22 16:13:30 · 540 阅读 · 0 评论 -
Vue-高级讲师之笔记01
1、vue: 读音: v-u-e view vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧 mvc: mvp mvvm mv* mvx 官网:http://cn.vuejs.org/ 手册:http:原创 2017-06-22 15:51:44 · 455 阅读 · 0 评论 -
Vue-高级讲师之笔记02
1、vue-> 1.0vue-resource ajax php服务器环境(node)this.$http.get()/post()/jsonp()this.$http({url:地址data:给后台提交数据,method:'get'/post/jsonpjsonp:'cb' //cbName});-----------------原创 2017-06-22 15:59:51 · 420 阅读 · 0 评论 -
个人总结:vue1.0与2.0中路由的区别
个人github:https://github.com/qiilee 欢迎followvue1.0写法:html: <a v-link="{path:'/home'}">主页</a> 跳转链接 展示内容: <router-view></router-view>js: //1. 准备一个根组件 var...原创 2017-06-05 17:07:06 · 3036 阅读 · 0 评论 -
vue.js如何更改默认端口号8080为指定端口
个人github:https://github.com/qiilee 欢迎followvue.js如何更改默认端口号8080为指定端口执行npm run dev实际是在调用根目录下的package.json打开package.json后可发现有这样一段代码 [html] view plain copy print?"scripts": { "dev": "...转载 2017-06-06 14:28:55 · 4242 阅读 · 0 评论 -
vue.js权威指南-第一章 遇见 vue.js
个人github:https://github.com/qiilee 欢迎follow1.1 mvx模式是什么 MVC框架最早出现在Java领域,然后慢慢在前端开发中也被提到,后来又出现了MVP,以及现在最成熟的MVVM,下面我们来简单介绍一下各种模式。 MVCMVC全名是Model View Controller,是模型(model)-视图(view)-控制器(co...原创 2017-06-06 17:10:48 · 2014 阅读 · 0 评论