环境 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/看到热更新效果了。