通过npm安装vuejs的坑及项目的创建

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 上，打开如下证明成功。