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

首先附上vue-element-admin项目的相关介绍链接

介绍 | vue-element-admin (gitee.io)

一.环境搭建

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.安装cnpm

node版本太低，安装了node16后出现了下面的问题

node `GLIBC_2.28‘ not found (required by node)

glibc是linux底层的API库。通常情况下，有些环境需要glibc更高的版本才支持，比如GLIBC_2.28。

解决方案：降级node

sudo apt install curl 
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
source ~/.profile
nvm i 16
 
 
 
sudo apt-get install nodejs
sudo apt-get install npm

安装cnpm

npm install -g cnpm

4.安装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

npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED

意思是当你尝试连接到npm仓库时，遇到了SSL证书过期的问题，
旧的域名 https://npm.taobao.org 和 https://registry.npm.taobao.org 已经在 2022 年 5 月 31 日停止服务。
淘宝 NPM 镜像的新域名是https://registry.npmmirror.com/ ，

正确应该是 

npm install -g cnpm -registry=https://registry.npmmirror.com

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

这样直接运行的话，界面是英文的，我们需要去拉取中文的版本。

遇到的问题如下：

i18n版本太高npm install vue-i18n@8 --save

缺少依赖npm install pinyin@alpha --save

最终的运行界面如下：

vscode查看vue项目代码，需要安装如下插件，不然代码是灰的

Vetur

Vetur是用来识别.vue文件的，用来给.vue文件中的代码做语法高亮的。

vue-helper

用来快捷提示，如果使用elementui的话，插件不会自动提示，安装了它，组件、属性都会有提示了

如何打包？

使用

npm run build:prod
#或
npm run build:stage