文章目录
一 技术选型
技术选型：以vue-element-admin为参考，vue-admin-template为基础的二次开发。
我们可以在官网中看到它的介绍。
admin-element-vue js.v1 (opens new window)是一个后台前端解决方案，它基于 Vue2.x (opens new window)和 element-ui (opens new window)实现。它使用了最新的前端技术栈，动态路由，权限验证，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
也就是说，vue-admin-template是一个后台管理系统的基础脚手架，是在此基础上添加功能做二次开发用的，而vue-element-admin是有很多功能组件的后台管理脚手架，主要功能是做参考。
二 环境准备
准备：vscode nodejs git 两个脚手架代码
在各官网下载就可。
三 安装依赖
接下来给两个脚手架代码安装依赖，文档中给出了建议：
# 建议不要用 cnpm 安装 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
unable to access ’…‘: OpenSSL SSL_read: Connection was aborted
我在安装依赖时出现了问题，git报错如下：
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git
npm ERR!
npm ERR! fatal: unable to access 'https://github.com/nhn/raphael.git/': OpenSSL SSL_read: Connection was aborted, errno 10053
npm ERR!
npm ERR! exited with error code: 128
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-03-03T04_52_24_956Z-debug.log
从fatal错误行看出，改错误与OpenSSL有关，我从百度上找到对应方案。即在命令行输入：
git config --global http.sslBackend "openssl"
git config --global http.sslCAInfo "C:\Program Files\Git\mingw64\ssl\cert.pem"
再次运行安装依赖命令，依赖就安装成功了。
四 启动项目
安装好依赖，项目开始启动了。
$ npm run serve
missing script: serve
这时候报错：
npm ERR! missing script: serve
该错误为未找到对应的命令，打开项目中的package.json文件，在最上面的scripts中查找start命令。
"scripts": {
"dev": "vue-cli-service serve",
"lint": "eslint --ext .js,.vue src",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"new": "plop",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
}
我在这边是没找到start命令的，所以我直接将该行添加上去。
"start": "npm run dev",
注意，这里我使用了dev而不是serve，这是因为在上面的JSON中，"vue-cli-service serve"对应的是dev，所以在实际操作中，该值与服务对应名称一致即可。
再运行npm run dev，服务顺利启动了。 // 有资料显示不配置start也可 主要是run后面的词和serve配置的属性名相同
五 界面效果
根据命令窗口中的地址提示打开对应链接即可。
dev，服务顺利启动了。 // 有资料显示不配置start也可 主要是run后面的词和serve配置的属性名相同
根据命令窗口中的地址提示打开对应链接即可。
