引用Vue大屏框架步骤

在接触vue大屏之前其他人都说直接拿框架来套就行了，但是对于我这种非计算机专业的小白菜来说， 即使拿到现成的框架，让这个框架成功得在网页中显示出来也是一大困难，于是在我尝试几次之后终于将框架运行成功。

前提条件：需要有vue的开发环境，如果你是之前已经跟着一些教程尝试过一些vue项目的开发（意思是你已经具备了vue环境），那么可以接着使用这篇教程。如果完全从0开始，但是想直接使用一些现成的vue大屏框架，那么先配置好node.js环境，npm淘宝镜像，vue.x，vue-cli等。

一.下载vue框架包

浏览器搜索一般都可以找到一些大佬制作的框架包（vue程序本质上讲就是一些功能文件存在文件夹中，其他人用时候也是只需要把这个文件夹拷贝走就行，其次他的电脑上需要配置相关的运行环境，以及在vue文件夹中下载所使用的组件库包。）

我是在这里找的：上面会挂载压缩包，有一些简单的介绍。

Gitee - 基于 Git 的代码托管和研发协作平台

二.配置运行环境

用Visual Studio Code打开（我是插件用Visual Studio 编译，Web用Visual Studio Code，应该可以串着用，毕竟都是编译器，只是有是否更加适配的区别）。

1.看是否有node_modules文件。

（1）（没试过，待验证）有node_modules文件，则代表组件库都安装好了，直接在终端启动

npm run serve（vue3）或者 npm run dev（vue2）.

但是可能会报错，和（2）第二个错，报一样的错。这个我没试过，建议下载的框架包中“有node_modules”的话，直接删掉，按照（2）来。

参考这位大佬vue-cli-service不是内部或外部命令,也不是可运行的程序-CSDN博客

（2）没有node_modules文件，在终端启动

步骤1.npm run serve（vue3）或者 npm run dev（vue2），提示报错：

说明此程序没有安装npm，使用npm install命令

安装后，node_modules文件就被下载到此程序目录下了。

但是有时候，npm install命令下载会失败，

参考着这篇文章npm报错：request to https://registry.npm.taobao.org failed, reason certificate has expired-CSDN博客

但是，npm cache clean --force命令失败了，于是就换成npm cache verify，就清除缓存成功了（意思是把npm的缓存清空，但是你电脑的npm还是在的），

参考的是这npm cache clean --force 后报npm WARN using --force Recommended protections disabled_npm npm cache clean --force npm warn using --force-CSDN博客

接着使用命令npm config set registry https://registry.npmmirror.com把修改镜像，

接着再次使用npm install，还是出错了。

通过请教别人，告诉我这个系统用的是node.14版本，让我把之前的18版本换成14版，我不想直接把好不容易装好的版本卸载掉，于是安装一个nvm管理器（专门用于管理node），使得可以在不同的版本之间切换。安装nvm时，最好先把之前安装的node18卸载掉，虽然有些教程说nvm安装时会有选项“是否管理现有node”，我选择了，但是后来用nvm出现了问题

A、在18和14之间切换，cmd提示切换成功，但是完全没效果，node版本前也没带*号；

B、并且node -v，npm -v也提示无效命令。

所以我又只能把nvm卸载了，node18也卸载了，重新安装nvm，node切换成14。

接着重新打开项目npm install，提示如下错误：

貌似是网络，淘宝镜像的问题，看了这篇如何解决npm install 的报错npm ERR! network request to http://registry.cnpmjs.org/vue-cli failed_npm err network-CSDN博客

于是我npm cache clean --force清缓存，又设置代理淘宝镜像，但是出现了以下错误。

这就是红框里的错误。

npm ERR! code CERT_HAS_EXPIRED 
npm ERR! errno CERT_HAS_EXPIRED 
npm ERR! request to https://registry.npm.taobao.org/vue-loader failed, reason: certificate has expired  
npm ERR! A complete log of this run can be found in: 
npm ERR!     C:\Users\DELL\App

看了这篇文章的评论区，按照以下命令就解决了。npm ERR! code CERT_HAS_EXPIRED：解决证书过期问题的详细步骤-CSDN博客

所以npm install之前还是先确定所用的node版本，必要时进行切换。

步骤2.再启动npm run serve（vue3），还是出现了报错，

意思是你电脑的node.js版本与该文件不匹配，需要换成与之匹配的版本，这太麻烦了，好不容易安装的node.js现在重新卸载再安装，而且可能会导致之前的项目报错。

打开package.json文件，（Windows系统）添加代码

set NODE_OPTIONS=--openssl-legacy-provider 

"scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
  },

参考这位大佬 终极解决：Error: error:0308010C:digital envelope routines::unsupported_藏蓝色攻城狮的博客-CSDN博客

步骤3.再次运行

三.补充 

步骤二时，还会出现一种报错，之前有些过，有时间我会把它整理到这篇文章上来。