Vue UI 步骤
环境 win10
一、下载安装nvm
1 从 https://github.com/coreybutler/nvm-windows/releases nvm-noinstall.zip
2 解压到一个地方，比如: C:\dev\nvm
3 双击 install.cmd,直接回车，成功后，会在C盘的根目录生成一个settings.txt的文本文件，把这个文件剪切到C:\dev\nvm目录中，然后我们把它的内容修改成这样：
4 然后我们开始配置环境变量了，因为刚刚点击了install.cmd的文件，那么会在环境变量的系统变量中，生成两个环境变量：NVM_HOME 和 NVM_SYMLINK 我们开始修改这两个变量名的变量值：NVM_HOME的变量值为：C:\dev\nvm； NVM_SYMLINK的变量值为：C:\dev\nodejs
5 我们还会发现，在Path中也会自动添加上C:\dev\nvm;或者是C:\dev\nodejs，如果有的话，把他们删掉，没有的话更好，我们自己来配置，在Path的最前面输入： ;%NVM_HOME%;%NVM_SYMLINK%;
6 打开一个cmd窗口输入命令：nvm v ，那么我们会看到当前nvm的版本信息。然后我们可以安装nodejs了。
7 继续输入命令：nvm install latest 如果网络畅通，我们会看到正在下载的提示，下载完成后 会让你use那个最新的node版本。.
8 如果你是第一次下载，在use之前，C:\dev目录下是没有nodejs这个文件夹的，在输入比如： nvm use 14 之后，你会发现，C:\dev目录下多了一个nodejs文件夹，这个文件夹不是单纯的文件夹，它是一个快捷方式，指向了 C:\dev\nvm 里的 v14.0.0 文件夹。
-
同样的咱们可以下载其他版本的nodejs，这样通过命令:
nvm use 版本号比如：nvm use 5.11.0就可以轻松实现版本切换了。 -
备注： 如果你的电脑系统是32 位的，那么在下载nodejs版本的时候，一定要指明 32 如：
nvm install 5.11.0 32这样在32位的电脑系统中，才可以使用，默认是64位的。
二 npm的安装
在每个版本的nodejs中，都会自带npm，为了统一起见，我们安装一个全局的npm工具，这个操作很有必要，因为我们需要安装一些全局的其他包，不会因为切换node版本造成原来下载过的包不可用。
1 首先我们进入命令模式，输入 npm config set prefix "C:\dev\nvm\npm" 回车，这是在配置npm的全局安装路径，然后在用户文件夹下会生成一个.npmrc的文件，用记事本打开后可以看到如下内容（第一行可以自己加上）：
registry=https://registry.npm.taobao.org/ prefix=C:\dev\nvm\npm
然后继续在命令中输入： npm install npm -g 回车后会发现正在下载npm包，在C:\dev\nvm\npm目录中可以看到下载中的文件，以后我们只要用npm安装包的时候加上 -g 就可以把包安装在我们刚刚配置的全局路径下了。
-
我们为这个npm配置环境变量： 变量名为：NPM_HOME，变量值为 ：
C:\dev\nvm\npm -
在Path的最前面添加
;%NPM_HOME%，注意了，这个一定要添加在%NVM_SYMLINK%之前，所以我们直接把它放到Path的最前面 -
最后我们新打开一个命令窗口，输入
npm -v,此时我们使用的就是我们统一下载的npm包了
三、安装脚手架（vue-cli）
npm install @vue/cli -g //全局安装最新的脚手架
竟然还要配置vue的环境变量！于是在PATH最后增加 ;%NVM_HOME%\npm;
为了初始化你的Vue UI，在一个干净的目录下输入： vue ui 然后按提示创建一个名为hello的项目
通过cli 4.x 新建的项目的结构较之前简单，只有 public 和 src 两个文件夹
四、打开项目仪表盘
访问http://localhost:8000/ ， 在任务中可以 build - 运行 - 启动app，打开了http://localhost:8080/
五、我想，之后就是如何用项目仪表盘，去改变http://localhost:8080/的问题
1、最简单的效果：在hello项目部，用win10画图，修改hello\src\assets\logo.png的颜色。只要保存修改的logo，就可在http://localhost:8080/看到热更新效果。
2、在局域中我的ip是192.168.2.23，那么用 http://192.168.2.23:8000无法访问，同时http://192.168.2.23:8080是可访问的。
六、用element-ui看更明显的效果
1、从 插件 安装 element-ui. 在依赖 中，点element-ui右侧的 查看详情，会打开 element-ui官网，并提示跳转至中国大陆站点
2、在网页上，找到DatePicker 日期选择器 可显示出对应的代码。
3、在 项目hello\src\components下新建一个mydate.vue文件,将DatePicker 日期选择器代码复制进去。包括template和script部分(template中只允许有一个根元素，可以用一个div将多个元素包裹起来)
4、在App.vue文件里添加如下代码：（你可以将下面几处First统一改成FirstX之类任意名称）
a. 在<div id="app">内，加上 <First></First>
b. 在<script>内，加上 import First from "./components/MyDate"
c.在 components: 中，加上First ，并注意用逗号分隔
保存后就可以在在http://localhost:8080/看到热更新效果了。
参考：https://blog.csdn.net/jingtian678/article/details/78422760
https://www.jianshu.com/p/d4b12d597c6c
https://www.jianshu.com/p/e64004e7ca6a
https://blog.csdn.net/weixin_30617737/article/details/96826640
