前端我这里采用的是vue-element-admin框架。
一、下载地址
1、官方地址
https://panjiachen.github.io/vue-element-admin-site/zh/
2、下载地址
https://github.com/PanJiaChen/vue-element-admin
3、下载方式
a、git工具下载
b、源码直接下载
二、目录结构
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所有请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局 filter
│ ├── icons // 项目所有 svg icons
│ ├── lang // 国际化 language
│ ├── mock // 项目mock 模拟数据
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── vendor // 公用vendor
│ ├── views // view
│ ├── App.vue // 入口页面
│ ├── main.js // 入口 加载组件 初始化等
│ └── permission.js // 权限管理
├── static // 第三方不打包资源
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
三、安装
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git# 进入项目目录
cd front-end-frame# 安装依赖
npm install# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com# 如果遇到bug的情况下,请采用下面命令清理
npm cache clean --force# 启动服务
npm run dev
四、注意事项
1、报错提示
npm ERR! Error while executing:
npm ERR! D:\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git
npm ERR!
npm ERR! fatal: unable to connect to github.com:
npm ERR! github.com[0: 20.205.243.166]: errno=Unknown error
2、处理方案
删除根目录下package.json文件中的tui-editor依赖参数。
3、操作步骤
a、删除根目录下package.json文件中的tui-editor依赖参数。
"dependencies": {"axios": "0.18.1","clipboard": "2.0.4","codemirror": "5.45.0","core-js": "3.6.5","driver.js": "0.9.5","dropzone": "5.5.1","echarts": "4.2.1","element-ui": "2.13.2","file-saver": "2.0.1","fuse.js": "3.4.4","js-cookie": "2.2.0","jsonlint": "1.6.3","jszip": "3.2.1","normalize.css": "7.0.0","nprogress": "0.2.0","path-to-regexp": "2.4.0","screenfull": "4.2.0","script-loader": "0.7.2","sortablejs": "1.8.4","vue": "2.6.10","vue-count-to": "1.0.13","vue-router": "3.0.2","vue-splitpane": "1.0.4","vuedraggable": "2.20.0","vuex": "3.1.0","xlsx": "0.14.1"},
b、安装依赖
npm install --registry=https://registry.npmmirror.com
c、启动服务
npm run dev
d、删除不必要的文件
ERROR Failed to compile with 3 errors 10:20:47These dependencies were not found:* tui-editor in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MarkdownEdit
or/index.vue?vue&type=script&lang=js
* tui-editor/dist/tui-editor-contents.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!
./src/components/MarkdownEditor/index.vue?vue&type=script&lang=js
* tui-editor/dist/tui-editor.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/com
ponents/MarkdownEditor/index.vue?vue&type=script&lang=jsTo install them, you can run: npm install --save tui-editor tui-editor/dist/tui-editor-contents.css tui-editor/dist/tui-editor.css
第一步:找到根目录下src文件夹下的components文件夹下MarkdownEditor文件夹并删除该文件夹;第二步:找到根目录下src文件夹下的views文件夹下components-demo文件夹下markdown.vue文件并删除该文件;第三步:找到根目录下src文件夹下router文件夹下modules文件夹下components.js文件,找到markdown代码;第四步:就是就运行成功;代码如下:
第三步需要删除的代码
{path: 'markdown',component: () => import('@/views/components-demo/markdown'),name: 'MarkdownDemo',meta: { title: 'Markdown' }
},
第四步运行成功的代码
98% after emitting CopyPluginDONE Compiled successfully in 255ms 10:30:09App running at:- Local: http://localhost:9527/- Network: http://192.168.0.4:9527/Note that the development build is not optimized.To create a production build, run npm run build.