关于vue使用的一些小经验

这一年来说,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

 

 

 
 
 
posted @ 2017-12-21 17:41  一只卧沙的雕  阅读(1870)  评论(0编辑  收藏