npm安装vue.js

一、npm 版本查看及升级

// 查看版本
npm -v
// 升级版本
npm install -g npm

注：若npm install 报错 permission denied，使用sudo npm install -g npm

二、安装vue相关工具

1. 安装vue

// 最新稳定版
npm install vue
// 安装vue-cli脚手架构建工具
npm install --global vue-cli

安装完成，输入vue -V，如果出现相应的版本号，则说明安装成功。如图：

sybil052-20190108-105855.png

注：Mac 使用安装vue-cli脚手架的时候报错，
解决方法：
1.切换到/usr/local/lib/node_modules/目录
cd /usr/local/lib/node_modules/
2.删除vue-cli文件夹
open /usr/local/lib/node_modules/
3.重新安装vue-cli
npm install --global vue-cli

2. 安装webpack

npm install --global webpack
npm install --global webpack-cli

安装完成，输入webpack -v，如果出现相应的版本号，则说明安装成功。如图：

sybil052-20190108-111334.png

三、新建项目

1. 创建新项目

// 创建一个基于 webpack 模板的新项目
vue init webpack my-project
// 这里需要进行一些配置，默认回车即可

sybil052-20190108-112831.png

2. 运行项目

cd my-project
npm run dev

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

sybil052-20190108-113210.png