初次尝试在Mac使用vue-cli快速构建vue项目--踩坑记

初次尝试在Mac使用vue-cli快速构建vue项目–踩坑记

首先介绍一下Vue-cli是Vue官方提供的脚手架工具，默认已经配置好了一套基于webpack管理的Vue项目结构。
官网： https://cli.vuejs.org/zh

由于是踩坑记，这里主要讲的是在搭建过程的踩坑，正常构建可能就不是重点了哈。

1 搭建环境

npm install -g @vue/cli   //下载并安装vue-cli
vue list // 检测是否安装成功，注意这里不用vue -v来检测

正常的在检测是否成功安装，这里应该输出以下内容：

但是呢，我在执行npm install -g @vue/cli时遇到一些问题，如果没有遇到一些问题的话，这里应该就不会出现但是了。嘿嘿～

我在执行npm install -g @vue/cli时，报错了。。对，就是报错了（由于截图有限，只放了err部分）。

不死心的我，又重新执行了一遍命令，这个时候又报了一个错（忘了截图，大致意思是，重复安装了，需要先下载再安装）。

在百度上搜了相关错误，被告知是由于没有管理员权限操作导致的。于是我在执行命令前加了sudo，sudo npm install -g @vue/cli，这时还是报错。看来并不是没有管理员权限问题。

2 快速创建项目

下面我们来构建一个名为share的项目

vue create share

3 项目目录

注意点：
如果router中有history模式，那么在项目打包之前，最好能确认一下，是否已经做了相关设置，否则可能会有一些小的问题，比如空白页之类的。

4 axios的引入

上述项目创建完毕之后，还需要将axios引入。一个正常的项目，必然会涉及到与服务端进行数据交互。Vue中，建议使用axios.

Asiox是一个基于promise的HTTP库，可以用在各种浏览器及node.js中。
官网：http://www.axios-js.com/zh-cn/docs

npm install axios
//或
cnpm install axios -S  // 不加-S 可能package.json 文件内部不出现相关内容

axios的封装方式这里暂不说，网上有很多种方式，我会在另一篇文章中说明我的方法。

5 vue的config.js的配置

6 总结