Mac上安装node和使用vue-cli构建vue项目

1、安装node
安装node,可以到Node 官网nodejs.org,或者国内镜像npm.taobao.org/mirrors/node,下载最新版本的安装包。

我使用的国内镜像

Mac上安装node和使用vue-cli构建vue项目_第1张图片
镜像列表

Mac上安装node和使用vue-cli构建vue项目_第2张图片
7.9.0版本镜像列表

下载后点击安装,安装完成后,命令行执行下面的命令,确认是否安装成功。

andedeMacBook-Pro:workspace andewang$ node -v
v7.9.0
andedeMacBook-Pro:workspace andewang$ 

ps:Node 的模块管理器 npm 会一起安装好,不需要另外安装

查看npm的版本

$ npm -v
4.2.0

如果版本太低,小于4.0,请执行下面命令升级(vue-cli需要npm版本大于4.0)

$ npm install -g npm

切换模块仓库到阿里的源(Node 的官方模块仓库网速太慢)

$ npm config set registry https://registry.npm.taobao.org/

执行下面的命令,确认是否切换成功

$ npm config get registry
https://registry.npm.taobao.org/

2、安装 vue-cli
选择全局安装

$ npm install -g vue-cli

安装成功后,vue命令查看

Mac上安装node和使用vue-cli构建vue项目_第3张图片

使用vue list查看vue的模板

Mac上安装node和使用vue-cli构建vue项目_第4张图片

3、生成项目
使用webpack 模板生成一个vue的项目

Mac上安装node和使用vue-cli构建vue项目_第5张图片

过程总需要填写一些信息,项目名称、项目描述、是否需要安装vue-router、由于只是测试项目,unit test单元测试和ese tests 我选了no

4.进入项目和安装依赖

$cd test-vue

查看当前目录结构

Mac上安装node和使用vue-cli构建vue项目_第6张图片

安装依赖

$npm install

安装成功后,可以发现多了一个node_modules目录

Mac上安装node和使用vue-cli构建vue项目_第7张图片

5、启动项目

$ npm run dev

> [email protected] dev /Users/andewang/workspace/test-vue
> node build/dev-server.js

> Starting dev server...


 DONE  Compiled successfully in 3041ms                                                                                   11:34:32

> Listening at http://localhost:8080

浏览器查看效果


Mac上安装node和使用vue-cli构建vue项目_第8张图片

你可能感兴趣的:(Mac上安装node和使用vue-cli构建vue项目)