从0开始使用vue-element-admin

本教程经亲测支持最新版4.0.1vue-element-admin

安装node.js及npm

npm官网地址
下载node 8.12.0,安装很简单一直下一步就可以了。
win+R 输入cmd进入命令行 输入

node -v
npm -v

在这里插入图片描述

出现以上信息说明node.js及npm安装成功

安装nrm

nrm是一个方便的npm的镜像仓库管理工具,可以便捷的在各个镜像仓库之间切换。

npm install -g nrm --registry=https://registry.npm.taobao.org
//从淘宝镜像下全局安装nrm

在这里插入图片描述
输入

nrm ls   
//展示nrm镜像
nrm use taobao
//使用淘宝镜像
nrm ls
//展示nrm镜像

在这里插入图片描述
nrm安装及切换镜像成功。

安装vscode

vscode官网
选择自己对应的版本下载,这里使用的是64bit的zip包
在这里插入图片描述
如果出现连接超时的情况,可能是由于公司内网的拦截,使用热点就可以下载。
将压缩包直接解压,文件夹下有一个code文件,直接运行就可以使用vscode了。
在这里插入图片描述

汉化

打开vscode后
Windows、Linux 快捷键是:ctrl+shift+p

macOS 快捷键是:command + shift + p
搜索 Configure Language,选择下图第一个选项。
在这里插入图片描述
将"locale":“en” 修改为 “locale”:“zh-CN” ,保存文件。
选择左侧左下方的扩展按钮,搜索chinese 安装下图的插件
在这里插入图片描述
安装成功以后重启vscode,语言就改成中文了。
在这里插入图片描述

推荐安装一些好用的扩展

Auto Close Tag 自动闭合HTML标签
Auto Rename Tag 修改HTML标签时,自动修改匹配的标签
Beautify 代码美化
ESLint ESLint插件,高亮提示
File Peek 根据路径字符串,快速定位到文件
HTML CSS Support css提示(支持vue)
HTMLHint HTML格式提示
JavaScript (ES6) code snippets ES6语法代码段
Vetur Vue代码高亮及补全
VS Color Picker vs颜色选择器
Vue 2 Snippets Vue2代码补全

安装vue-element-admin

github地址
将项目下载到本地解压后,cmd进入到对应解压文件夹下

同时vscode打开项目文件夹,将package.json文件中dependencies下的"echarts": “^4.1.0” 删除并保存。
此处是由于我在安装过程中发现echart在淘宝镜像下安装会出错,先安装其它模块,最后单独使用cpnm安装echart
在这里插入图片描述

ctrl+`打开终端,请先确认nrm在淘宝镜像下

nrm ls //查看nrm使用的镜像

在这里插入图片描述
可以看到*在taobao的那一列,表示正在使用taobao镜像,不在则输入

nrm use taobao //使用淘宝镜像

开始安装依赖

npm i 
//安装依赖

依赖安装完成后,还需要将Npm切换为cnpm单独安装echarts

nrm ls
nrm use cnpm
npm install echarts@4.1.0 -S   单独从cnpm安装echarts依赖

我发起的echarts安装问题

如果有报错,请先阅读项目github 中的issues和wike及文档看看是否有类似问题。

我在安装过程中碰到的问题

  • 安装过程中报错没有权限,可以尝试使用管理员身份运行命令行,并将npm升级到最新版本。

npm cache clean --force 清除Npm缓存
npm install -g npm@latest --force 升级npm到最新
npm cache clean --force 清除Npm缓存

  • 如果在echarts.js处安装报错,请按照上面的步骤先删除echarts模块,先将其他模块安装完成后,最后使用cnpm单独安装echarts。

安装成功后使用
npm run dev
就可以在本地启动项目了
需要注意的是,此项目不支持低版本浏览器(如IE),可以使用谷歌,搜狗等浏览器打开。
运行成功后本地访问地址
vue-element-admin作者展示的在线网站

框架登陆原理简单分析

框架登陆原理简单分析

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值