美文网首页前端杂货铺Web前端之路程序员
Mac上安装node和使用vue-cli构建vue项目

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

作者: 翼动晴空 | 来源:发表于2017-04-27 11:43 被阅读686次

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

我使用的国内镜像

镜像列表 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命令查看

使用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

浏览器查看效果


相关文章

网友评论

  • EWL:你好,我在初始化项目的时候出现了一个问题,C:\Users\i\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60
    let template = program.args[0]
    ^^^ 请问这是不是跟node和npm的版本太低有关

本文标题:Mac上安装node和使用vue-cli构建vue项目

本文链接:https://www.haomeiwen.com/subject/lyygzttx.html