简单搭建基于Webpack +Vue.js的开发环境

1、安装node.js 环境

node.js下载地址：https://nodejs.org/dist/v12.4...

2、安装node 版本管理器【NVM】

下载nvm
到github上下载最新版本 https://github.com/coreybutle... 的安装包 nvm-setup.zip ，然后按提示安装即可。

nvm常用命令

nvm install ## 安装指定版本，可模糊安装，如：安装v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2

nvm uninstall ## 删除已安装的指定版本，语法与install类似

nvm use ## 切换使用指定的版本node

nvm ls ## 列出所有安装的版本

nvm ls-remote ## 列出所以远程服务器的版本（官方node version list）

nvm current ## 显示当前的版本

nvm alias ## 给不同的版本号添加别名

nvm unalias ## 删除已定义的别名

nvm reinstall-packages ## 在当前版本node环境下，重新全局安装指定版本号的npm包

查看可安装版本列表

nvm list available

列出本地已安装版本列表：

nvm list

安装node，比如安装 12.3.1 版本的node

nvm install 12.3.1

使用指定node 版本，比如：

nvm use 10.13.0

3、安装npm的镜像源管理器（NRM）

npm 的下载包地址： https://registry.npmjs.org/ ，国外的。nrm(npm registry manager )是npm的镜像源管理工具（地址：https://github.com/Pana/nrm），有时候国外资源太慢，那么我们可以用这个来切换镜像源。

全局安装NRM 命令：

npm install -g nrm

查看源镜像的命令：

nrm ls

以上都是镜像地址。镜像地址前面的 表示当前使用该地址下包。若修改 的位置 ，输入： nrm use cnpm (表示使用该镜像) 。

使用源，比如使用国内淘宝的源：

nrm use taobao

测试 npm源的速度命令：

nrm test npm

测试所有源的速度命令：

nrm test

NRM的作用：
只是单纯的提供了几个常用的下载包的地址，并能够让我们在这几个地址间
进行切换，但我们每次装包的时候 使用的装包工具 ，都是 npm 。

4、vue.js 命令行工具 CLI

安装 @vue/cli ：（全局）

npm install -g @vue/cli

若想要使用旧的 vue-li 还要安装 @vue/cli-init ：

npm install -g @vue/cli-init

vue-cli 文档：https://github.com/vuejs/vue-...

5、安装 Vue Devtools 调试器

在浏览器上安装 Vue Devtools。它允许你在使用 Vue 时，能够有一个更友好的界面来审查和调试 Vue 应用。

至此，webpack+vue.js 开发环境搭建完毕。

6、创建一个vue 项目demo

打开cmd 命令窗口，进入一个文件夹，敲入以下命令，生成一个vue项目：

vue init webpack demo5

填写相应参数

创建完成后，敲入命令

cd demo5

进入项目文件夹后，敲入命令

npm install

安装相关依赖的包，然后敲入命令执行项目。

npm run dev

在浏览器打开http://localhost:8081