简单的前端Vue开发环境

目前做到前端，计划用vue做前端，于是必不可少需要搭建开发环境。
我在网上看到的Vue2.0的windows开发环境需要包括Node.js，npm，webpack，vue-cli。
其中Node.js为Javascript运行环境（runtime），npm为Nodejs下的包管理器，webpack用于翻译Vue组件并打包成.js文件，vue-cli用来生成模板的Vue工程（也就是封装了类似的脚手架）。

安装Node.js和npm

Node.js内含npm，Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。
我这里安装的版本比较新，安装过程很简单，安装成功之后可以在命令行中查看Nodejs版本和npm版本：
node --version
v12.13.1
npm -v
6.12.1

npm配置

如果是在国内，网上说直接使用npm的官方镜像非常慢，所以推荐使用taobao的npm镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以直接使用cnpm来安装依赖包了。
而我需要设置代理，直接使用npm官方镜像。
查看当前npm配置：

npm config ls -l

可以在其中看到proxy和registry。
设置代理：

npm config set proxy http://ip:port/

注意不要设置https-proxy，如果手贱，在安装包时会出现下面错误：

npm ERR! network request to https://registry.npmjs.org/*** failed, reason:
lient network socket disconnected before secure TLS connection was established

安装webpack和vue-cli

根据各自情况，使用npm或者cnpm：

# 安装webpack
npm install webpack -g
# 安装vue-cli
npm install vue-cli -g

就此，我认为简单的前端Vue开发环境设置完成。下面就要开始Vue的学习和开发了。

第一个Vue项目

使用vue命令创建一个Vue项目

D:\TestFiles\VUE>vue init webpack-simple vueDemo2

? Project name vuedemo  # 项目名
? Project description A Vue.js project #描述，可省略
? Author zhuow <******> #作者，可省略
? License MIT #默认
? Use sass? No #默认

   vue-cli · Generated "vueDemo2".

   To get started:

     cd vueDemo2
     npm install
     npm run dev

创建成功，可以看到提示，如何运行此Vue项目。

# 进入我们创建的项目
cd vueDemo2
# 自动安装依赖包
npm install

网上说这里一定要使用npm从官方仓库安装，如果使用cnpm从国内仓库安装，会导致后面缺少一些依赖库，我并没有测试，如果有小伙伴测了，请在评论中告诉我。

# 运行第一个Vue项目
D:\TestFiles\VUE\vueDemo2>npm run dev

> [email protected] dev D:\TestFiles\VUE\vueDemo2
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do
not use the open flag.
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

我们可以看到提示，通过http://localhost:8080/即可访问。

Demo完成！