vue安装及配置并创建项目

本文章面向群体为入门级学者，文章产生于作者大学课程学习期间，参考网上其他博主教程，总结归纳所得。

1 nodejs下载

网址：https://nodejs.org/en/download/

LTS 是长久稳定版本

2 nodejs安装

3 nodejs安装验证

win + r 输入 cmd 打开命令行，输入下列命令：

node -v

npm -v

输出相关版本信息则表示安装成功，如图：

4 nodejs配置

4.1 创建文件夹

在 vue 安装目录下，创建名为 node_cache 和 node_global 的两个文件夹，分别作为缓存日志目录和全局安装目录，如图

4.2 配置文件夹

将 npm 的全局模块目录和缓存目录配置到刚创建的两个目录，命令如下：

npm config set prefix "改为你的安装目录\node_global"

npm config set cache "改为你的安装目录\node_cache"

执行如图：

4.3 配置镜像

我选择淘宝镜像，为了以后下载包快速，并且这里配置后，后续就不需要安装 cnpm 了，因为 cnpm 就是 Node.js 淘宝镜像加速器，命令如下：

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

执行如图：

4.4 验证 npm 配置是否成功

命令如下：

npm config list

执行如图：

这时，默认路径中就多了一个文件，这个文件不能删，里面记录了刚刚进行的配置修改信息，删了就等于恢复最初状态，也就是说白配了，如图：

4.5 配置环境变量

安装过程中，自动配置了两个环境变量，接下来依次修改。

4.5.1 修改1

用户环境变量中，修改 C:\Users\你的用户名\AppData\Roaming\npm 为 你的安装目录\node_global，如图：

4.5.2 修改2

系统环境变量中，新建系统变量，如图：

变量名：NODE_PATH

变量值：修改为你的安装目录\node_global\node_modules

这里的 node_global 目录下的 node_modules 文件夹暂时不存在，等模块安装到全局目录下时就会自动生成这个文件夹。

在系统变量的 Path 中添加 %NODE_PATH% ，如图：

5 vue安装

5.1 vue.js下载

命令如下：

-g 表示全局安装，指安装到 global全局目录去，如果不加 -g，模块就会安装到当前路径下的 node_modules文件夹下，没有目录则自动创建。

这里要用管理员模式下的命令行运行！！

npm install vue -g

执行如图：

5.2 webpack模板安装

命令如下：

第二句命令是因为在 webpack 4x 以上，webpack 将命令相关的内容都放到了 webpack-cli，所以还需要安装 webpack-cli。

npm install webpack -g

npm install webpack-cli -g

执行如图：

5.3 webpack模板安装验证

命令如下：

输出版本号就说明都安装成功。

webpack -v

执行如图：

5.4 vue-cli 脚手架安装

命令如下：

npm install vue-cli -g

执行如图：

5.5 vue-cli 脚手架安装验证

命令如下：

输出版本号就说明安装成功。

vue --version

执行如图：

5.6 vue-router 安装

命令如下：

npm install vue-router -g

执行如图：

5.7 查看上述下载的模块

都存放到了之前设置的目录，如图：

6 在 IDEA 创建一个 VUE 项目

6.1 下载插件

6.2 新建vue项目

前端项目要放在了后端项目的一个文件夹中，所以创建时，需要切换目录到相应位置。

我这里是在BigData文件夹下创建一个vue项目，vue项目名为web（到时候项目创建成功就会自动创建以项目名命名的文件夹），创建vue项目命令如下：

vue create 【项目名】

创建时会要你选择一些选项，如图：

创建成功就会生成项目文件夹，如图：

6.3 运行项目

命令如下：

npm run dev    (vue2使用这个)
npm run serve  (vue3用这个)

如图：

6.3 插件安装

6.3.1 axios

Axios 是一个基于Promise的Http库，用于http请求。

有些项目创建后是没有安装 axios 插件的，可以到package.json文件中的dependencies中查看你是否有 axios 插件的项，没有就需要安装，命令如下：

npm add axios

6.3.2 echarts

图形插件，echarts提供各种图形，安装命令如下：

npm add echarts

6.3.3 vue-router

命令如下：

npm install vue-router

6.4 创建一个新页面

在文件夹 components 下创建一个 vue 组件，取个名字，我这里叫 WordCloud 如图：

6.5 引用其他页面

在主页面引用刚刚创建的页面，如图：

6.6 使用 echarts

6.7 使用 vue-router

注意：前面都是用的vue2演示，后面我更新了版本，从现在开始是使用的vue3，如果你是按照我的文章安装的vue，那么可以去那篇文章里查看怎么更新版本

在src目录下新建文件夹，命名为router，在router文件夹下新建index.js用于定义路由，如图：

编辑router/index.js基本框架，如图：

在main.js中使用router，如图：

创建两个页面进行测试，如图：

补充router/index.js中路由信息，如图：

在App.vue中使用路由，如图：

报错了，因为我刚刚创建的两个页面命名不规范，没有使用驼峰命名法或下划线命名法，如图：

为了冻结这条规则，只需在package.json文件中的rules下添加一条命令，命令如下：

"vue/multi-word-component-names": "off"

如图：

最后运行结果，如图：

6.8 使用 axios

axios 用来向后端发送请求获得接口数据，首先开发好后端接口，如图：

新创建一个页面，利用 axios 访问后端接口，如图：

在 App.vue 中使用页面，如图：

运行项目，在前端控制台可以看到正确获取到了数据，如图：