windows系统下,node.js安装成功后,在idea或webstorm里直接输入命令即可。
一、安装node.js
node.js下载地址https://nodejs.org/en/
选择安装路径后进行安装。安装过程很简单。
安装完后查看npm版本,如果小于3.0,要进行升级
# 查看npm版本和nodejs版本
$ npm -v
$ node -v
#升级npm版本
$ npm install npm -g
二、将npm替换成淘宝镜像
由于国内使用npm会很慢,推荐用淘宝npm镜像配置npm的registray地址
1.查看原本地址:
$ npm get registry
2.配置npm的registray地址,用淘宝镜像的npm
# 1、临时配置
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
# 2、永久配置npm的registray地址
$ npm config set registry http://registry.npm.taobao.org
# 3、换回原来的npm
$ npm config set registry https://registry.npmjs.org
# 4、查看是否配置成功
$ npm config get registry
# 这里输出淘宝镜像的地址registry.npm.taobao.org
# 如果是原来的,输出的是registry.npmjs.org
# 或用如下命令查看是否成功
$ npm info express
三、安装vue
# 使用淘宝镜像npm安装vue,在idea里直接用npm命令,后台走的还是淘宝镜像。之后使用也一直都是用npm命令而不用cnpm命令。
$ npm install vue
# 查看vue版本,这里的V大写
$ vue -V
# 安装vue-cli
$ npm install --global vue-cli
安装完脚手架之后vue的环境就搭建好了
四、创建项目
1、输入vue可以查看vue带的命令。vue有选项时,证明安装vue成功
$ vue
2、创建基于webpack的工程
$ vue init webpack my-project
# 会弹出一些配置
? Project name my-project 项目名字——回车
? Project description A Vue.js project 项目描述——回车
? Author xxx <xxx@xxxx.com> 作者——回车
? Vue build standalone 如何构建项目——第一个或回车就行
? Install vue-router? Yes 是否使用路由,有就yes,没有就no
? Use ESLint to lint your code? Yes 是否使用eslint规范代码
? Pick an ESLint preset Standard 使用标准的语法检测
? Setup unit tests No 测试工具,不需要就no
? Setup e2e tests No 测试工具
? Should we run 'npm install' for you after the project has been created(recommended)
Yes,use NPM
项目的安装,包、依赖的安装采用什么形式进行安装,——我们使用npm进行安装。
安装成功会提示:project initialization finished!
接着可以运行以下命令启动项目
$ npm run dev
项目启动后会告诉你,项目启动在 http://localhost:8080 上,打开如下证明成功。