html里用npm安装,如何用npm安装vue.js?

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,本文只介绍如何通过NPM进行安装Vue.js。

5e1d699a071eb239.jpg

安装node环境

NodeJS官方下载地址:http://nodejs.cn/download/

通过官网下载并安装NodeJS即可在cmd执行npm指令

检查是否安装成功:如果输出版本号,说明我们安装node环境成功

1578982954484339.png

npm 版本查看及升级// 查看版本

npm -v

// 升级版本

npm install -g npm

注:若npm install 报错 permission denied,使用sudo npm install -g npm

如何用npm安装vue.js

1、安装vue// 最新稳定版

npm install vue

// 安装vue-cli脚手架构建工具

npm install --global vue-cli

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

1578985420453282.jpg注: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、安装webpacknpm install --global webpack

npm install --global webpack-cli

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

1578985468806924.jpg

新建项目

1. 创建新项目// 创建一个基于 webpack 模板的新项目

vue init webpack my-project

// 这里需要进行一些配置,默认回车即可

1578985500951164.jpg

2. 运行项目cd my-project

npm run dev

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

1578985521594619.jpg

更多vue.js相关知识,可访问 Vue.js答疑 栏目!!