vue入门之环境搭建

一、前言

        目前java行业不景气，找工作的人多，岗位少，所以岗位对人员的要求越来越高，过去前后端分离，后端程序员只需要管好自己后端那一摊子事情就好了，但是现在远远不够，越来越多的岗位要求全栈，全栈俨然是种趋势，要不向全栈方向进发，要不可能退出这个行业，所以笔者也打算学一学前端向全栈靠近，顺便做点笔记。

二、安装nvm

1、下载nvm：Releases · coreybutler/nvm-windows · GitHub

2、解压安装

3、安装步骤简单，一直下一步就好，遇到需要指定安装目录时，如果有需要自定义一下安装目录即可

4、更改配置文件，添加镜像配置

node_mirror: https://cdn.npmmirror.com/binaries/node/
npm_mirror: https://cdn.npmmirror.com/binaries/npm/

5、安装好之后，使用管理员身份运行cmd，特别注意一定要使用管理员身份运行

5.1、查看目前可以安装的node版本：nvm list available

5.2、安装稍微高一点的版本，我本次安装的是18.18.0，nvm install 18.18.0

5.3、安装好之后，切换到新安装的版本：nvm use 18.18.0，然后查看node版本：node -v

可以看到能正常显示node版本号了

5.4、在nvm安装目录下创建两个文件夹node_cache、node_global

5.5、全局设置

npm config set prefix "e:\nvm\node_global"

npm config set cache "e:\nvm\node_cache"

5.6、配置node_global到环境变量

三、创建vue项目

1、全局安装vue脚手架

打开cmd窗口，执行命令：npm install -g @vue/cli

2、安装成功后，输入vue --version，可以查看到版本说明安装成功

3、创建一个vue项目空文件夹，在该文件夹下使用命令创建一个vue项目

进入项目文件夹，打开cmd窗口执行命令：vue create vue-demo

执行完之后，看到 $ cd vue-demo、$ npm run serve说明创建成功

4、按照窗口提示输入依次输入命令：cd vue-demo、npm run serve启动项目

5、在浏览器打开localhost:8080后出现截图页面，说明新项目创建启动成功