群控系统服务端开发模式-应用开发-前端框架
前端我这里采用的是vue-element-admin框架。
一、下载地址
1、官方地址
https://panjiachen.github.io/vue-element-admin-site/zh/2、下载地址
https://github.com/PanJiaChen/vue-element-admin3、下载方式
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 error2、处理方案
删除根目录下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.comc、启动服务
npm run devd、删除不必要的文件
ERROR Failed to compile with 3 errors 10:20:47
These 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=js
To 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 CopyPlugin
DONE Compiled successfully in 255ms 10:30:09
App 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.