eagles
1.0.0
| title | date | tags |
|---|---|---|
The road to climbing the pit of vue2 eagles project - various component packaging | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n element-ui axios custom-theme hightopo echars vue-awesome koa2 |
Online demo
Online demo 2
After more than two weeks of development and organization, following my first original blog "The Road from C/C++ to Front-end Transformation", the Eagles project was finally launched. Why is it named Eagles? Eagles means eagle, just like the eagle brother spreading his wings to defeat the python in The Legend of the Condor Heroes. This project uses vue+axios+elementui technology, integrates vuex state management, vue-awesome font icon library, vue-i18n internationalization, mockjs simulation api data submission, and supports sass style compilation. We have developed low-coupling components that are very suitable for projects, such as tree tables, topology diagrams, tables, charts, etc., as well as additional general project modules such as menu management, role permission management, and user management.
The background technology stack temporarily uses mockjs to simulate Ajax data submission. Later, I will use spring boot+mybatis technology to explain it to everyone. Recently, I have also been studying the practical implementation of spring cloud and docker microservice architecture. There will be corresponding articles to share with you later, so we can make progress together!
To facilitate communication, a QQ group has been opened, 613176270. Everyone is welcome to speak freely. Warm reminder: There are girls in the group!
# 克隆项目
git clone https://github.com/silianpan/eagles.git
# 安装依赖
npm install
# 运行 访问 localhost:8080
npm run dev
# 编译
npm run build
# 待分析报告的编译
npm run build --report | -- build # 编译目录
| -- config # 编译配置目录
| -- index.html # 首页模板
| -- package.json # 依赖库配置
| -- src # 源码目录
| | -- api # api目录
| | -- assets # 资源目录
| | | -- css # 样式目录
| | | -- img # 图片
| | | -- sass # sass
| | ` -- theme # 自定义主题目录
| |-- common # 公共js库
| | |-- eventHubs.js # 事件中心
| | |-- resTypeEnum.js # 资源类型
| | ` -- topo # 拓扑图
| | -- components # 通用组件
| | | -- Table.vue # 表格
| | | -- topo # 拓扑图
| | ` -- treeTable # 树表组件
| |-- config.js # 全局配置
| |-- i18n # 国际化
| |-- libs # 第三方组件库
| |-- main.js # 入口程序
| |-- mock # 模拟数据目录
| |-- router # 路由
| |-- store # 状态管理目录
| |-- utils # 工具目录
| ` -- views # 业务类型组件
| | -- introduction # 简介
| | -- lang # 语言设置
| | -- layout # 布局：header、菜单
| | -- login # 登录
| | -- table # 表格演示
| | -- topo # 拓扑图演示
| ` -- treeTable # 树表演示
` -- static # 静态资源目录
` -- img # 图片目录
Add jquery to package.json
"jquery" : "^1.11.1"Add the following code after webpack.base.conf.js, and introduce webpack before
var webpack = require ( "webpack" )
plugins: [
new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
new webpack . ProvidePlugin ( {
jQuery : "jquery" ,
$ : "jquery"
} )
]Introduce jquery into main.js
import $ from 'jquery' Internationalization uses vue-i18n, but only version 5.x can be used. Using version 6.x will cause compatibility issues with element, resulting in the original element being unable to be translated. It is compatible with Element and is introduced for internationalization.
import enUS from './en-US.json'
import zhCN from './zh-CN.json'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
export const LANGS = {
'en-US' : $ . extend ( enUS , enLocale ) ,
'zh-CN' : $ . extend ( zhCN , zhLocale )
} Vue routing hot loading components will cause the problem that the components cannot be switched after being deployed to Nginx (switching failure). Therefore, if deployed to Nginx, in routing, you can only use import to load components.
After deploying to Nginx, 404 (access failure) occurs when accessing all static resources. Reason: All resource files in the src directory in Vue must be compiled and transcoded. The static files originally referenced will cause errors, such as static images referenced by the img tag. document Solution: Put the static resources into the static directory at the same level as src, and reference the files in this directory. But the important point is: the static paths referenced in development mode and production mode will be different, so add the following to the configuration file Code to distinguish development mode and production mode:
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;In addition, under config/index.js, assetsPublicPath is also different.
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' Configure proxyTable in config/index.js
proxyTable : {
'/ajax' : {
target : 'http://127.0.0.1:8080' ,
// target: 'http://127.0.0.1:8081',
changeOrigin : true ,
pathRewrite : {
'^/ajax' : '/dirms-service'
} ,
onProxyReq ( proxyReq , req , res ) {
}
}
} ,Add the following to config, where eagles-service is the background service access ID in production mode.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; Project address
Online demo
Online demo 2
Personal blog
QQ group: 1063679722
