Vue环境搭建笔记

在部署了Java环境之后，按照记忆将Vue环境安装完，发现创建的前台界面打开不能执行Vue代码，网页插件显示灰色，，于是从头检查环境问题，顺便记录一下常规部署顺序。

1、安装node.js

官方网站下载地址：Node.js (nodejs.org)

这里值得注意的是，如果你要打开的是以前的代码版本，最好到代码的package.json文件里查看一下各个组件对应的版本号，比如我之前遇到过node-sass版本比较旧，node版本比较新导致安装npm执行失败。

安装后检查是否安装成功：

node -v  //显示node.js 版本

npm -v   //显示npm 版本

看到版本号则安装成功。

配置镜像地址：

npm config set registry https://registry.npm.taobao.org

检查镜像地址：

npm config get registry

2、node环境

检查安装目录下是否有文件夹“node_global”和 “node_cache”。

设置全局路径：

npm config set prefix "D:\Program Files\nodejs\node_global" //设置全局安装包的目录路径
npm config set cache "D:\Program Files\nodejs\node_cache" //设置 npm 包的缓存路径

检查环境变量：

npm config list

添加prefix的值D:\Program Files\nodejs\node_global到环境变量的path里：

3、全局安装npm、Vue和Vue cli工具

全局安装npm：

npm install express -g  //-g代表全局安装

安装vue cli：

npm install -g @vue/cli

报了一堆WARN，习惯了(っ ̯ -｡)

检查是否安装成功：

npm list vue -g  //全局查找安装的vue

安装Webpack：

npm install webpack -g

安装Webpack-cli：

npm install --global webpack-cli

（没出警告提示的朋友，蓝色文字部分可以跳过，往下看）

又是一堆WARN(っ ̯ -｡) ，记一下

看了一下提示内容，说我node版本太低了，于是我升级了node.js，再重新执行了一遍：

又提示我npm版本需要升级到10.5.2，于是我又升级了npm：

终于不报错了，(*^▽^*)开心。

在环境变量path里添加webpack的路径：

D:\Program Files\nodejs\node_global\node_modules

检查是否配置成功：

webpack -v

安装Vue-router（实现导航的插件）：

npm install -g vue-router

检查是否添加成功（目录下是否有vue-router文件夹）：

4、创建项目：

因为装好了有点激动全程没截图，记录下过程吧，(ಥ_ಥ)

命令行创建项目，我的项目叫testvue：

vue init webpack testvue

初始化成功后会有几个问题，依次回车即可，直到出现问是否测试的问题（Set up unit tests），这时输入n。一共两个n，之后一直回车。

出现“project initialization finished！”，下面会提示cd到项目位置，执行“npm run dev”的提示。

此时在命令行cd到textvue目录下，执行命令行：

npm run dev

成功了，提示你登录localhost：8080。

OK了，可以到你的开发工具里打开项目试试啦！O(∩_∩)O哈哈~