小白初学vue-element-admin-master及其所有有关环境配置和依赖安装2021-08-13
使用VUE实现登录——基于vue-element-admin-master需要下载的包下载github上的vue-element-admin项目根据项目要求，在电脑中下载node git VSCodeNode.js安装难点：git安装难点：VSCode安装难点：安装依赖vue-element-admin-master项目里的基本内容安装依赖需要下载的包下载github上的vue-element-a
使用VUE实现登录——基于vue-element-admin-master
需要下载的包
下载github上的vue-element-admin项目
github项目文件链接
移动到自己的工作环境中：
根据项目要求，在电脑中下载node git VSCode
(中文版准备介绍：https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md）
要点：
Node.js安装难点：
除完成了node.js的基本安装，即使不进行此步骤的环境变量配置也不影响node.js的使用，但是如果不进行环境变量配置，那么在我们使用命令安装node.js全局模块，例如npm install -g express时，会默认安装到C盘的路径C:\Users\hua\AppData\Roaming\npm中，所以在这边配置全局安装模块以及缓存目录的环境变量；
1.首先在node.js的安装目录新建两个文件夹node_global和node_cache
2.创建完两个文件夹后，在cmd窗口中输入以下命令（两个路径即是两个文件夹的路径）：
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
3.接下来设置电脑环境变量，右键“我的电脑”=》属性=》高级系统设置=》环境变量 进入以下环境变量对话框
4.在【系统变量】新建环境变量 NODE_PATH，值为C:\Program Files\nodejs\node_global\node_modules，其中C:\Program Files\nodejs\node_global是上述创建的全局模块安装路径文件夹
5.修改【用户变量】中的path变量，将C:\Users\hua\AppData\Roaming\npm修改为D:\install\nodejs\node_global
6.点击确定后，配置完成。
7.测试是否配置成功，在cmd窗口中输入以下指定全局安装express模块
npm install -g express # -g表示是全局安装
git安装难点：
第一次安装由于忘记github密码，在重置密码后，出现了Key已经用过的错误，找到的解决方法是删除C:\Users\（你的用户名）.ssh下的known_hosts等所有的文件。
重新进行操作。
- 在cmd中输入：
D:\Git>ssh-keygen -t rsa -b 4096 -C "#####@qq.com" # 在github中注册的邮箱
- 然后一直回车，直到显示如下内容：
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\（你的用户名）/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\（你的用户名）/.ssh/id_rsa.
Your public key has been saved in C:\Users\（你的用户名）/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:##########@qq.com
The key's randomart image is:
+---[RSA 4096]----+
| o=+o.o . . |
|o=Eo . . . . . . |
|++* + = . + o . |
|oo.+ X . o * . |
| o o + S + + |
| . . * + o |
| . o o . . |
| . . o . |
| .oo . |
+----[SHA256]-----+
- 找到key文件
- 将上述
id_rsa.pub文件用记事本打开，将生成的该电脑的key拷贝到github中如图所示的key区，name是为了方便区分你在同一个账号下的不同电脑的key，确定后就成功了。
- cmd下：
ssh -T git@github.com之后输入 yes（y不对，又输入yes后成功）
D:\Git>ssh -T git@github.com
The authenticity of host 'github.com (52.74.223.119)' can't be established.
RSA key fingerprint is SHA256:####.
Are you sure you want to continue connecting (yes/no)? y
Please type 'yes' or 'no': yes
Warning: Permanently added 'github.com,52.74.223.119' (RSA) to the list of known hosts.
Hi CHOUanne! You've successfully authenticated, but GitHub does not provide shell access.
VSCode安装难点：
基本没难点。。。
就是安装后，及时根据项目内容，安装所需要的扩展包
安装依赖
vue-element-admin-master项目里的基本内容
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
安装依赖
- 用VSCode打开项目后，找到
package.json文件，其中标注了
生产依赖dependencies
开发依赖devDependencies
"dependencies": {
"axios": "0.18.1",
"clipboard": "2.0.4",
"codemirror": "5.45.0",
"core-js": "3.6.5",
"driver.js": "0.9.5",
"dropzone": "5.5.1",
"echarts": "4.2.1",
"element-ui": "2.13.2",
"file-saver": "2.0.1",
"fuse.js": "3.4.4",
"js-cookie": "2.2.0",
"jsonlint": "1.6.3",
"jszip": "3.2.1",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"screenfull": "4.2.0",
"script-loader": "0.7.2",
"sortablejs": "1.8.4",
"tui-editor": "1.3.3",
"vue": "2.6.10",
"vue-count-to": "1.0.13",
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",
"vuedraggable": "2.20.0",
"vuex": "3.1.0",
"xlsx": "0.14.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-plugin-unit-jest": "4.4.4",
"@vue/cli-service": "4.4.4",
"@vue/test-utils": "1.0.0-beta.29",
"autoprefixer": "9.5.1",
"babel-eslint": "10.1.0",
"babel-jest": "23.6.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "2.4.2",
"chokidar": "2.1.5",
"connect": "3.6.6",
"eslint": "6.7.2",
"eslint-plugin-vue": "6.2.2",
"html-webpack-plugin": "3.2.0",
"husky": "1.3.1",
"lint-staged": "8.1.5",
"mockjs": "1.0.1-beta3",
"plop": "2.3.0",
"runjs": "4.3.2",
"sass": "1.26.2",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0",
"vue-template-compiler": "2.6.10"
},
- 打开终端，安装依赖
- 使用的一般方式：
E:\vue-element-admin-master\vue-element-admin-master> npm install
但是出现了错误：
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\nodejs\node_cache\_cacache\tmp\8a38e516
npm ERR! errno EPERM
npm ERR! FetchError: Invalid response body while trying to fetch http://registry.npm.taobao.org/@vue%2fcli-plugin-babel: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\8a38e516'
npm ERR! at C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\minipass-fetch\lib\body.js:162:15
npm ERR! at async Arborist.[nodeFromEdge] (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:988:19)
npm ERR! at async Arborist.[buildDepStep] (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:867:11)
npm ERR! at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:203:7)
npm ERR! at async Promise.all (index 1)
npm ERR! at async Arborist.reify (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:141:5)
npm ERR! at async Install.install (C:\Program Files\nodejs\node_global\node_modules\npm\lib\install.js:150:5)
npm ERR! FetchError: Invalid response body while trying to fetch http://registry.npm.taobao.org/@vue%2fcli-plugin-babel: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\8a38e516'
npm ERR! at C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\minipass-fetch\lib\body.js:162:15
npm ERR! at async Arborist.[nodeFromEdge] (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:988:19)
npm ERR! at async Arborist.[buildDepStep] (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:867:11)
npm ERR! at async Arborist.buildIdealTree (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:203:7)
npm ERR! at async Promise.all (index 1)
npm ERR! at async Arborist.reify (C:\Program Files\nodejs\node_global\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\reify.js:141:5)
npm ERR! at async Install.install (C:\Program Files\nodejs\node_global\node_modules\npm\lib\install.js:150:5) {
npm ERR! code: 'EPERM',
npm ERR! errno: 'EPERM',
npm ERR! syscall: 'open',
npm ERR! path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\8a38e516',
npm ERR! type: 'system',
npm ERR! requiredBy: '.'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
查了一下，看到可能是外网链接问题，所以解决办法：
1.通过以下命令配置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.将npm替换成cnpm即可从淘宝镜像中下载模块，指令改为：
cnpm install
等待安装完毕。
最后还是有些问题，再cnpm install一次后出现如下内容：
PS E:\vue-element-admin-master\vue-element-admin-master> cnpm install
√ Installed 54 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 35ms(network 31ms), speed 0B/s, json 0(0B), tarball 0B)
PS E:\vue-element-admin-master\vue-element-admin-master>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)