关于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