搭建vue-cli脚手架（mac环境）SPA单页

这里介绍的是mac环境下安装的步骤，希望能帮助到有需要的小伙伴。

1.首先在电脑上安装brew，如果已经安装了brew，可以打开系统终端 敲命令行brew-v，查看一下brew的版本。

image.png

如果没有安装，敲命令行

image.png

“$(curl–fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

2.然后就是安装node.js
brew install nodejs (安装成功后 输入node –v 查看版本)

3.获取模块安装目录访问权限
sudo chmod –R 777 /usr/local/lib/node_modules/

4.安装淘宝镜像（后面用这个安装项目依赖会快很多）
npm install –g cnpm –registry=https://registry.npm.taobao.org

5.开始安装webpack (全局安装)
cnpm install webpack –g

6. 安装vue脚手架（全局安装，后面就不用单次安装了）
   npm install vue-cli –g

7. 找到一个你要把项目放在的文件夹，这里我就放在桌面上了，终端进入桌面
   cd desktop
   

   image.png

8. 正式创建项目模板
   vue init webpack ldy-vue
   

   image.png

按照提示回车就可以了，后面安装vue-router 写YES, 后面三个都可以no，现在就成功创建了一个vue搭建的模板

image.png

9. 进入所在文件夹安装项目依赖，这里我用cnpm淘宝镜像去安装，会比npm快很多
   cnpm install

（正常如果我们从公司的代码托管处拉下项目代码，一般是没有项目依赖的，这时候我们直接在终端 cnpm install就可以了，然后我们就可以继续开发了）

成功后，会出现一个文件夹；

image.png

10. 最后就可以启动项目咯
    npm run dev

image.png
image.png

11. 用webstorm打开项目看一下项目构造

    
    image.png

红色区域就是我们要添加的组件、路由等等。

这里提一个小问题解决方案，我们用webstrom打开文件的时候，会发现很卡，我这里可以看到没有node_modules文件夹，因为我已经忽略了，具体操作办法：
找到File Types,在右面最下面加上node_modules；就可以了，具体看图吧！

image.png