Mac上安装Vue那点事

相关文档：

1. vue 官方下载指南
2. node.js 官方下载文档
3. webpack 官方下载文档
4. 获取root参考链接

安装步骤

1. 安装node
   首先，在 node.js 官方下载文 下载最新的Mac installer

下载node.js

然后，双击下载的安装包开始安装node，安装完毕后，打开terminal（终端），查看安装的node版本，在窗口内输入

$ node -v

node版本

查看npm版本：

$ npm -v
4.2.0

2. 安装webpack

因为在mac下依赖包要写入系统重要文件夹里，需要先获取root权限所以现在terminal（终端）内输入

$ sudo -s

窗口内出现🔑图标，输入电脑管理员密码（此时不会有任何反馈）并点击回车，就获取root了。

获取到root

获取到root后，就可以通过npm在全局安装webpack了。在terminal（终端）内输入以下代码即可开始安装webpack：

$ npm install webpack -g

安装成功样式：

webpack安装成功

3. 安装vue-cli
   在terminal（终端）内继续输入以下代码即可开始安装。

$ npm install webpack -g vue-cli

安装成功样式：

vue-cli安装成功

安装成功后，查看vue基本信息

查看vue基本信息

使用vue list查看vue的模板了，在terminal（终端）内继续输入以下代码，即可查看vue list

$ vue list

vue list 详情

4. 生成项目
   在terminal（终端）内继续输入以下代码，即可使用webpack 模板生成一个vue的项目。

$ vue list

按照 vue list 中提示的方式，创建名称为《testicy》的vue项目

$ vue init webpack testicy

生成vue项目

生成过程需要填写一些基本信息，如项目名称、项目描述、是否需要安装vue-router、unit test单元测试和ese tests。

5. 进入项目和安装依赖

$ cd testicy

进入项目目录，查看当前目录结构。

$ npm install

安装成功后，会发现多了一个node_modules目录。如果安装报错，就试试加上sudo

$ sudo npm install

6. 启动项目

$ npm run dev

项目启动成功后，终端弹窗内会开启listening模式，系统会自动在浏览器中打开localhost：8080，查看页面效果。

终端内开启成功 浏览器中的效果