这一年来说,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. Day 22 进程管理2之系统的平均负载

    1.管理进程状态 当程序运行为进程后,如果希望停止进程,怎么办呢? 那么此时我们可以使用linux的kill命令对进程发送关闭信号.当然除了kill.还有killall,pkill 1.使用kill ...

  2. Tcloud 云测平台-多服务框架开源

    技术栈 Python3.7 + Vue前端github地址:https://github.com/bigbaser/Tcloud后端github地址:https://github.com/bigbas ...

  3. [AI] 深度数据 - Data

    Data Engineering Data  Pipeline Outline [DE] How to learn Big Data[了解大数据] [DE] Pipeline for Data Eng ...

  4. wepy框架开发小程序遇到的node-sass问题解决方案

    一.报错图 二.解决方案 主要是windows平台缺少编译环境, 1.先运行: npm install -g node-gyp 2.然后运行cmd:(右键点击:以管理员身份运行) 输入:npm ins ...

  5. 指针生产网络(Pointer-Generator-Network)原理与实战

    0 前言 本文内容主要:介绍Pointer-Generator-Network在文本摘要任务中的背景,模型架构与原理.在中英文数据集上实战效果与评估,最后得出结论.参考的<Get To The ...

  6. 搭建大数据开发环境-Hadoop篇

    前期准备 操作系统 hadoop目前对linux操作系统支持是最好的,可以部署2000个节点的服务器集群:在hadoop2.2以后,开始支持windows操作系统,但是兼容性没有linux好.因此,建 ...

  7. Android Studio [Activity的生命周期]

    package com.xdw.a122; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; imp ...

  8. Spring 梳理-接收请求的输入(原)

    Spring MVC 允许一下方式将客户端的数据传送到控制器的处理方法中 查询参数(Query Parameter) 表单参数(Form  Parameter) 路径变量(Path  Variable ...

  9. JS/Jquery关系

    1. JS / JQuery介绍 Jquery是JS库,何为JS库,即把常用的js方法进行封装,封装到单独的JS文件中,要用的时候直接调用即可: 2. JS / JQuery对象 1. 定义 (1) ...

  10. 3DEarth PPT :一款专为GIS系统研发的三维汇报演示系统

    3DEarth PPT(三维地球汇报演示系统)又称 3DGis PPT,是专为GIS系统研发的三维汇报演示系统.对有3DGis系统的客户它可以作为一个组件(dll)嵌入原系统,对没有3DGis系统的客 ...