小白初学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

冰冰粥

3253人浏览 · 2021-08-13 16:19:01

冰冰粥 · 2021-08-13 16:19:01 发布

使用VUE实现登录——基于vue-element-admin-master

需要下载的包
安装依赖
- 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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

冰冰粥

@weixin_42343376

已为社区贡献1条内容