最近在学前端，主要是基于vue-admin-template框架进行改造，从运行配置到项目搭建，再到图形化处理，感觉遇到挺多问题的，写一下文章记录整个学习历程。

首先我从Gitee上下载了vue-admin-template框架，但下载下来之后还需要把框架跑起来，所以我又回到了Vue的运行环境配置，当然先下载框架还是先配置环境并不冲突，顺序上不影响。

一、运行环境配置

运行Vue框架需要配置Node.js，我是参考这篇文章进行配置的：

配置的时候需要注意以下几点：

1. 由于Node.js版本过高可能会出现一些问题，因此建议可以按教程配置14.17.5版本。

我第一次配置的时候就选择了最新版本的Node.js，然后运行npm run dev是出现了以下问题

this [kHandle] = new _Hash(algorithm, xofLen);

A Error: error:0308e1ec:digital envelope routines: :unsupported

查阅资料后发现这个是由于 Node17以后版本和之前项目相比有较大的改变，网上参考的解决方案也没有解决我的问题，最后迫不得已选择了卸载——降版本后重新配置的方案。

2. Node.js版本14.17.5下载时选择这个版本：node-v14.17.5-x64.msi

（附个下载链接：，毕竟我安装的时候对列表里的若干版本疑惑了，并不是像教程里那样直接就download就好了，所以做一个小小提示）

3. 最后一步环境配置的时候，教程里增加了环境变量NODE_PATH，但是并没有把该变量增加到系统变量的Path当中去，因此运行的时候也可能会出错，所以建议两种方案：

①按教程配置好文件后，在Path中增加一个变量：%NODE_PATH%

②直接将... ode_global ode_modules增加到系统变量的Path中.(这个路径文件在配置前并没有创建，配置之后会自动在node_global中创建该文件夹)

至此，基本的运行环境配置基本完成，在命令行输入 node -v 或者 npm-v 可以查看安装版本号，正常返回则表示安装配置成功。

二、运行vue-admin-template框架

vue-admin-template框架下载网站：

下载之后按照readme.md的指示进行运行配置，唯一注意的点就是需要先以管理员身份运行cmd，再cd进入项目目录，安装依赖后运行即可。

备注：

1. 如果你已经安装了pycharm编译器，前端node.js编译可以直接借助pycharm而不用额外安装别的编译器。

2. 如果用pycharm运行项目时出现不能识别vue代码的情况（全局标红报错），可以进入

File ->Settings -> Plugins ，在搜索框输入Vue.js，点击并下载后Pycharm即可识别vue.

接下来会陆续更新vue-admin框架的基本修改说明，暂时先写到这里吧，文章仅做个人记录，如有任何侵权请联系删除。