从0开始使用vue-element-admin

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

安装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 Class Completion CSS class提示

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将npm镜像仓库设置为淘宝仓库，直接

npm i 
//安装依赖

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

nrm ls
nrm use cnpm
npm install [email protected] -S   单独从cnpm安装echarts依赖

我发起的echarts安装问题

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

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

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

npm cache clean --force 清除Npm缓存

npm install -g [email protected] --force 升级npm到最新

npm cache clean --force 清除Npm缓存

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

安装成功后使用 npm run dev就可以在本地启动项目了
运行成功后本地访问地址
vue-element-admin作者展示的在线网站

以上是 从0开始使用vue-element-admin 的全部内容， 来源链接： utcz.com/z/377931.html

回到顶部