Mac上安装node和使用vue-cli构建vue项目
2017-04-27 本文已影响686人
翼动晴空
1、安装node
安装node,可以到Node 官网nodejs.org,或者国内镜像npm.taobao.org/mirrors/node,下载最新版本的安装包。
我使用的国内镜像


下载后点击安装,安装完成后,命令行执行下面的命令,确认是否安装成功。
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命令查看

使用vue list查看vue的模板

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

过程总需要填写一些信息,项目名称、项目描述、是否需要安装vue-router、由于只是测试项目,unit test单元测试和ese tests 我选了no
4.进入项目和安装依赖
$cd test-vue
查看当前目录结构

安装依赖
$npm install
安装成功后,可以发现多了一个node_modules目录

5、启动项目
$ npm run dev
> test-vue@1.0.0 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
浏览器查看效果
