虚拟机Ubuntu下运行vue-element-admin项目

一.环境搭建

1.安装nodejs

复制代码
sudo apt install nodejs

安装完成后,查看对应的版本号

复制代码
nodejs -v

没有问题,会输出对应版本号,我这里是10.19.0

复制代码
v10.19.0

2.安装npm

复制代码
sudo apt install npm

安装完成查看对应的版本号,确认OK

复制代码
npm -v

我这里是版本是6.14.4

复制代码
6.14.4

3.安装Vue

复制代码
sudo cnpm install -g vue-cli

同样查看一下版本号确保安装OK

复制代码
vue -V

我这里输出是2.9.6

复制代码
2.9.6

二.小试牛刀,试一下vue项目,虽然和我们vue-element-admin项目环境有点差异

1.创建Vue项目demo

复制代码
sudo vue init webpack demo

然后提示你输入一些东西,看着来就行,一般输入no就行了

进入项目文件夹内(cd demo),并安装项目依赖

2.安装依赖

复制代码
# 安装依赖
npm install
采用加速镜像安装比较快
npm install --registry=https://registry.npm.taobao.org

3.运行项目

复制代码
npm run dev

等一会就可以了,然后运行成功会提示我们项目访问地址,输入地址就可访问了。

4.运行成功

三.运行我们的vue-element-admin项目

1.拉取代码

复制代码
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

2.安装依赖

复制代码
# 安装依赖
npm install
采用加速镜像安装比较快
npm install --registry=https://registry.npm.taobao.org

遇到的问题

如果没有安装依赖,直接运行,会有如下报错

我们在执行下面命令安装依赖的时候,会发现后面一直卡,最后还安装失败了。

复制代码
npm install --registry=https://registry.npm.taobao.org

后面才知道是tui-editor安装报错

解决方案

因为vue 放弃"tui-editor": "1.3.3",已经更名为toast-ui/editor,需要在package.json中将"tui-editor": "1.3.3" 修改成"@toast-ui/editor": "^3.1.3",重新运行yarn 即可;

同时

进入\src\components\MarkdownEditor\index.vue文件,修改成如下

复制代码
import 'codemirror/lib/codemirror.css' // codemirror
import '@toast-ui/editor/dist/toastui-editor.css'
import Editor from '@toast-ui/editor'
import defaultOptions from './default-options'

/*tui-editor 1.33 已升级 @toast-ui/editor
import 'codemirror/lib/codemirror.css' // codemirror
import 'tui-editor/dist/tui-editor.css' // editor ui
import 'tui-editor/dist/tui-editor-contents.css' // editor content
import Editor from 'tui-editor'
import defaultOptions from './default-options'
*/

3.运行项目

复制代码
npm run dev
相关推荐
洪洪呀42 分钟前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
Rene110043 分钟前
Linux虚拟机无法重启网络
linux·运维·服务器
芷栀夏1 小时前
CasaOS上部署1Panel开源运维面板远程在线访问配置实操指南
linux·服务器·网络
唐青枫2 小时前
Linux whatis 命令使用详解
linux
在河之洲木水7 小时前
现代多核调度器的本质 调度三重奏
linux·服务器·系统架构
程序员JerrySUN8 小时前
驱动开发硬核特训 · Day 22(下篇): # 深入理解 Power-domain 框架:概念、功能与完整代码剖析
linux·开发语言·驱动开发·嵌入式硬件
白总Server8 小时前
多智能体系统的中间件架构
linux·运维·服务器·中间件·ribbon·架构·github
未来会更好yes8 小时前
Centos 7.6安装redis-6.2.6
linux·redis·centos
萌萌哒草头将军8 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
二猛子8 小时前
Linux(Centos版本)中安装Docker
linux·docker·centos