mac运行vue_Mac上安装Vue那点事

安装步骤

安装node

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

下载node.js

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

$ node -v

node版本

查看npm版本：

$ npm -v

4.2.0

安装webpack

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

$ sudo -s

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

获取到root

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

$ npm install webpack -g

安装成功样式：

webpack安装成功

安装vue-cli

在terminal(终端)内继续输入以下代码即可开始安装。

$ npm install webpack -g vue-cli

安装成功样式：

vue-cli安装成功

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

查看vue基本信息

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

$ vue list

vue list 详情

生成项目

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

$ vue list

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

$ vue init webpack testicy

生成vue项目

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

进入项目和安装依赖

$ cd testicy

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

$ npm install

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

$ sudo npm install

启动项目

$ npm run dev

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

终端内开启成功

浏览器中的效果