Vue2开发前的配置

1、安装 nvm（node version manager）由于 Vue和 node 有不同的版本对应，故可能需要多个版本node来进行对应，此时使用 nvm 来管理不同版本的node。

通过nvm安装node.js注意事项：

       1. 要卸载掉现有的 nodejs
        2. 提示选择 nvm 和 nodejs 目录时，一定要避免目录中出现空格
        3. 选用【以管理员身份运行】cmd 程序来执行 nvm 命令
        4. 首次运行前设置好国内镜像地址

        nvm node_mirror http://npm.taobao.org/mirrors/node/ -- node的国内镜像
        nvm npm_mirror https://npm.taobao.org/mirrors/npm/ -- nvm的国内镜像

        查看有哪些可用版本命令 nvm list available

        通过nvm下载node命令 例：nvm install 16.16.0 （选择LTS版本，若通过该命令下载不了可以直接下载安装node.js nvm会自动检测环境变量进行管理）

        切换node的命令 例：nvm use 16.16.0

2、检查npm

        1、npm 是 js 的包管理器，就类似于 java 界的 maven，要确保它使用的是国内镜像

        2、检查镜像 :  npm get registry

        3、修改为国内镜像：npm config set registry https://registry.npm.taobao.org/

3、搭建前端服务器

        1、新建一个保存项目的 client 文件夹，进入文件夹执行

        2、下载express骨架：npm install express --save-dev   （-- save-dev表示只是在开发环境进行依赖的管理，打包不会打包依赖）

        3、修改 package.json 文件

        {
                  "type": "module",
                  "devDependencies": {
                    "express": "^4.18.1"
                  }
        }

        4、编写 main.js 代码

        import express from 'express'
        const app = express()

        app.use(express.static('./'))
        app.listen(7070)

        5、执行 js 代码（运行前端服务器）

        node main.js

        6、项目结果层级展示

4、Vue2环境准备

        1、安装脚手架

                npm install -g @vue/cli （-g 参数表示全局安装，这样在任意目录都可以使用 vue 脚本创建项目，其实就是在node目录下创建了一个Vue的脚本）

                若出现无法加载文件 ....\vue.ps1 需要：Windows powershell（管理员中执行set-ExecutionPolicy RemoteSigned 命令）

        2、创建项目

                vue ui （通过页面进行项目的创建  需勾选toure依赖）

                进入项目目录，执行 npm run serve

                修改端口

                        前端服务器默认占用了 8080 端口，需要修改一下（进入网站DevServer | webpack找到devServer-port下按照示例进行配置，配置到vue项目中的vue.config.js配置文件中）

                配置代理

                 进入网站DevServer | webpack找到devServer-proxy下按照最后一条配置示例进行配置，配置到vue项目中的vue.config.js配置文件中

        vue 项目创建完成