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

首先附上vue-element-admin项目的相关介绍链接介绍 | vue-element-admin (gitee.io)一.环境搭建1.安装nodejssudo apt install nodejs安装完成后查看对应的版本号nodejs -v没有问题会输出对应版本号我这里是10.19.0v10.19.02.安装npmsudo apt install npm安装完成查看对应的版本号确认OKnpm -v我这里是版本是6.14.46.14.43.安装cnpmnode版本太低安装了node16后出现了下面的问题node GLIBC_2.28‘ not found (required by node)glibc是linux底层的API库。通常情况下有些环境需要glibc更高的版本才支持比如GLIBC_2.28。解决方案降级nodesudo 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安装cnpmnpm install -g cnpm4.安装Vuesudo cnpm install -g vue-cli同样查看一下版本号确保安装OKvue -V我这里输出是2.9.62.9.6二.小试牛刀试一下vue项目虽然和我们vue-element-admin项目环境有点差异1.创建Vue项目demosudo vue init webpack demo然后提示你输入一些东西看着来就行一般输入no就行了进入项目文件夹内cd demo并安装项目依赖2.安装依赖# 安装依赖 npm install 采用加速镜像安装比较快 npm install --registryhttps://registry.npm.taobao.orgnpm 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 -registryhttps://registry.npmmirror.com3.运行项目npm run dev等一会就可以了然后运行成功会提示我们项目访问地址输入地址就可访问了。4.运行成功三.运行我们的vue-element-admin项目1.拉取代码# 克隆项目 git clone https://github.com/PanJiaChen/vue-element-admin.git # 进入项目目录 cd vue-element-admin2.安装依赖# 安装依赖 npm install 采用加速镜像安装比较快 npm install --registryhttps://registry.npm.taobao.org遇到的问题如果没有安装依赖直接运行会有如下报错我们在执行下面命令安装依赖的时候会发现后面一直卡最后还安装失败了。npm install --registryhttps://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-i18n8 --save缺少依赖npm install pinyinalpha --save最终的运行界面如下vscode查看vue项目代码需要安装如下插件不然代码是灰的VeturVetur是用来识别.vue文件的用来给.vue文件中的代码做语法高亮的。vue-helper用来快捷提示如果使用elementui的话插件不会自动提示安装了它组件、属性都会有提示了如何打包使用npm run build:prod #或 npm run build:stage