这一年来说,vue的势头很猛,用户量“噌”“噌”“噌”的涨

为了不掉队不落伍、在后台大哥的胁迫下,不得不选择用了它

刚开始很难接受vue的写法,在编辑器里很容易报错,基本上每行都会出现红色的波浪线

这让刚用vue的我很炸毛

然鹅,皇天不负有心人,虽然艰难,但还是成功的把vue拿下了

http://m.mingbiaoi.com

不要失望,虽然我的项目就是简单的几页,但是对于刚接触vue的初学者来说,已经很不容易了

先说说Vue常用命令语句

 
npm install --global vue-cli   全局安装 vue-cli
 
vue init webpack my-project  创建一个基于 webpack 模板的新项目
 
cd my-project  找到创建的项目
 
npm install  安装依赖,走你
 
npm run dev  将项目跑起来
 
以上步骤,在你执行到vue init webpack my-project 这一步的时候,你会遇到一些选项
 

除了刚开始我傻不拉几选了yes导致项目基本进行不下去后,我现在基本都会选no

当然,要视情况而定

Project name demo  你的项目名称是啥就是啥  没啥好犹豫的  赶紧下手走下一步

Project description A Vue.js project  告诉你这个项目是个vuej.js的项目  如果不傻,就回车下一步,不然我干嘛用vue来了

Author JoneTong、Vue build standalone 这些和项目没有太大影响

最主要的就是下面几步

Install vue-router?这是问你要不要用路由,如果你的项目不是单单的一页,有页面间的跳转跳转,就用

Use ESLint to lint your code? 这是说你要不要ESlint的语法去监控你的代码 , 建议不用,因为ESlint的语法太严格,我受不了这么多报错

Set up unit tests、Setup e2e tests with Nightwatch?都是问你要不要走测试的路,这个我觉得无所谓,,因为我每次都是把项目按照要发布的去做的,所以我选no

Should we run `npm install` for you after the project has been created? (recommended) 这句呢,是说项目被创建后,用npm install 来安装依赖,还是选其他的。有一个前辈告诉我yarn比较快,但是我还是决定跟着文档走,所以我选第一个  npm

然后,你的项目就创建了,找到你开始选择的创建vue的地址,我选的e盘,到那你就会看到你创建的vue项目就在那

剩下的几步就是找到项目去自己撒欢玩去吧

如果你是做移动端的项目呢,建议你用minit-ui,如果是pc端的,就用element.ui吧。不要问我响应式怎么办,因为我比你更想知道

接下来说说vue可能用到的插件

vue的插件很多,在https://www.npmjs.com/search?q=vue里面都能找到

1.vue的alert
 
npm install @vuejs-pt/vue-alert    
 
import VueAlert from '@vuejs-pt/vue-alert'
 
用法:this.$alert.clearDefault()
 
2.vue移动端框架(minit-ui)
 
npm install mint-ui -S    
 
import Mint from 'mint-ui'
 
3.图片的懒加载
 
npm install vue-lazyload
 
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

这是我在我的项目里用到的,其他你有需要可以自己去这里https://www.npmjs.com/search?q=vue找找

不知道你们会不会在页面里用到a标签的href为mobile的属性,反正我是用到了

在vue里要这样处理才行

<a :href="'tel:' + mobile">{{ mobile }}</a>

其实就是变量拼接,不懂之前确实很让人头疼

最后就是说vue的axios了

首先说说axios的引入问题了,

刚开始在网上搜了一堆,但是没有一个能解决我的问题的,谁叫我不是属于你的小仙女呢

  import axios from 'axios'
 
  var $axios = axios.create({  });
    
  Vue.prototype.$axios = $axios;(// 挂载到vue的原型,也为了在其他页面也可以fined到axios)
 
就是这样,axios成功的被引入了
 
如果你想看例子,我可以给你截两张图,实在不想打字,太累了
 

一个是get的、一个是post的

你可能会遇到跨域的问题,找你们后台大哥吧,我的就是后台在server端处理的,如果类型是post,你加一行我画红框框标出来的那一行就行了

到这里,我已经写累了,所以,即使没有帮到你,你也不要怪我

你可以来找我,虽然有可能我的技术还不如你

哈哈哈

扣扣:1375752423

 
 
 

关于vue使用的一些小经验的更多相关文章

  1. 你应该知道的那些Android小经验

    原文出处:http://jayfeng.com/ 做Android久了,就会踩很多坑,被坑的多了就有经验了,闲暇之余整理了部分,现挑选一些重要或者偏门的“小”经验做个记录. 查看SQLite日志 ad ...

  2. 像VUE一样写微信小程序-深入研究wepy框架

    像VUE一样写微信小程序-深入研究wepy框架 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发. 小程序于M页比相比,有以下优势: 1.小程序拥有更多 ...

  3. 用Vue.js开发微信小程序:开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  4. Vue Mixin 与微信小程序 Mixins 应用

    什么是Mixin(混入) Mixin是一种思想,用来实现代码高度可复用性,可以针对属性复制实现代码复用的想法进行一个扩展,就是混入(mixin).混入并不是复制一个完整的对象,而是从多个对象中复制出任 ...

  5. vue教学视频(小程序教学视频)

    写在前面 最近通过了解众多面试者的面试情况 总结出以下几点: 对框架的要求越来越高特别是vue和小程序 不会vue和小程序连面试机会都没有 会vue的比不会vue的薪资高4-5k 小程序有发展的趋势 ...

  6. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  7. Android开发的16条小经验总结

    Android开发的16条小经验总结,希望对各位搞Android开发的朋友有所帮助. 1. TextView中的getTextSize返回值是以像素(px)为单位的, 而setTextSize()是以 ...

  8. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  9. Android小经验

    转载自:http://mp.weixin.qq.com/s?__biz=MzA4MjU5NTY0NA==&mid=404388098&idx=1&sn=8bbbba7692dc ...

随机推荐

  1. 阿里云CentOS7.3服务器通过Docker安装Nginx

    前言 小编环境: 阿里云CentOS7.3服务器 docker 下面分享一次小编在自己的阿里云CentOS7.3服务器上使用Docker来安装Nginx的一次全过程 温馨小提示: 如果只是希望单纯使用 ...

  2. RDD基本操作之Action

    Action介绍 在RDD上计算出来一个结果 把结果返回给driver program或保存在文件系统,count(),save 常用的Action reduce() 接收一个函数,作用在RDD两个类 ...

  3. elasticsearch集群扩容和容灾

    elasticsearch专栏:https://www.cnblogs.com/hello-shf/category/1550315.html 一.集群健康 Elasticsearch 的集群监控信息 ...

  4. hibernate保存中文mysql

    最近自己做测试的时候,发现中文入库成?号了,不由得想到是否某处编码设置问题. 1.检查数据库是否为utf8 2.检查配置文件,数据库链接地址是否指定编码,经检查本地配置文件 jdbc.url=jdbc ...

  5. 品Spring:SpringBoot轻松取胜bean定义注册的“第一阶段”

    上一篇文章强调了bean定义注册占Spring应用的半壁江山.而且详细介绍了两个重量级的注册bean定义的类. 今天就以SpringBoot为例,来看看整个SpringBoot应用的bean定义是如何 ...

  6. 整理总结 python 中时间日期类数据处理与类型转换(含 pandas)

    我自学 python 编程并付诸实战,迄今三个月. pandas可能是我最高频使用的库,基于它的易学.实用,我也非常建议朋友们去尝试它.--尤其当你本身不是程序员,但多少跟表格或数据打点交道时,pan ...

  7. 品Spring:注解之王@Configuration和它的一众“小弟们”

    其实对Spring的了解达到一定程度后,你就会发现,无论是使用Spring框架开发的应用,还是Spring框架本身的开发都是围绕着注解构建起来的. 空口无凭,那就说个最普通的例子吧. 在Spring中 ...

  8. Nginx负载均衡配置实例

    面对高并发的问题,企业往往会从两个方面来解决.其一,从硬件上面,提升硬件的配置,增加服务器的性能:另外,就是从软件上,将数据库和WEB服务器分离,使数据库和WEB服务器都能够充分发挥各自的性能,并且二 ...

  9. 如何将腾讯视频的qlv格式转换为mp4格式

    基本上每个视频app都会有自己固有的视频播放格式,比如优酷的KUX.爱奇艺的QSV和腾讯的QLV等.而今天我们重点介绍腾讯的QLV格式如何转换为MP4格式,小便也是经过多次的摸索多次的软件试用,发现的 ...

  10. Redis优雅实现分布式锁

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 在实际项目开发中经常会遇到这样一个业务场景:如果同一台机器有多个线程抢夺同一个共享资源,同一个线程多次执行会出 ...