eagles
1.0.0
| título | fecha | etiquetas |
|---|---|---|
El camino para escalar el pozo del proyecto vue2 eagles: embalaje de varios componentes | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n elemento-ui axios tema personalizado hightopo echars vue-awesome koa2 |
Demostración en línea
Demostración en línea 2
Después de más de dos semanas de desarrollo y organización, después de mi primer blog original "El camino de C/C++ a la transformación front-end", finalmente se lanzó el proyecto Eagles. ¿Por qué se llama Eagles? Águilas significa águila, al igual que el hermano águila que extiende sus alas para derrotar a la pitón en La leyenda de los héroes del cóndor. Este proyecto utiliza la tecnología vue+axios+elementui, integra la gestión de estado de vuex, la biblioteca de iconos de fuentes vue-awesome, la internacionalización de vue-i18n, el envío de datos de la API de simulación de Mockjs y admite la compilación de estilo sass. Hemos desarrollado componentes de bajo acoplamiento que son muy adecuados para proyectos, como tablas de árbol, diagramas de topología, tablas, gráficos, etc., así como módulos de proyectos generales adicionales como gestión de menús, gestión de permisos de roles y gestión de usuarios.
La pila de tecnología en segundo plano usa temporalmente Mockjs para simular el envío de datos Ajax. Más adelante, usaré la tecnología Spring Boot + Mybatis para explicárselo a todos. Recientemente, también he estado estudiando la implementación práctica de la arquitectura de microservicio Spring Cloud y Docker. Habré artículos correspondientes para compartir con ustedes más adelante, ¡para que podamos progresar juntos!
Para facilitar la comunicación, se ha abierto un grupo QQ, 613176270. Todos pueden hablar libremente. Recordatorio: ¡hay chicas en el grupo!
# 克隆项目
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 # 图片目录
Agregue jquery a paquete.json
"jquery" : "^1.11.1"Agregue el siguiente código después de webpack.base.conf.js e introduzca el paquete web antes
var webpack = require ( "webpack" )
plugins: [
new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
new webpack . ProvidePlugin ( {
jQuery : "jquery" ,
$ : "jquery"
} )
]Introducir jquery en main.js
import $ from 'jquery' La internacionalización usa vue-i18n, pero solo se puede usar la versión 5.x. El uso de la versión 6.x causará problemas de compatibilidad con el elemento, lo que hará que el elemento original no se pueda traducir. Es compatible con Element y se introduce para la internacionalización.
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 )
} Los componentes de carga en caliente del enrutamiento de Vue causarán el problema de que los componentes no se pueden cambiar después de implementarse en Nginx (falla de conmutación). Por lo tanto, si se implementa en Nginx, en el enrutamiento, solo puede usar la importación para cargar componentes.
Después de la implementación en Nginx, se produce 404 (fallo de acceso) al acceder a todos los recursos estáticos. Motivo: todos los archivos de recursos en el directorio src en Vue deben compilarse y transcodificarse. Los archivos estáticos a los que se hace referencia originalmente causarán errores, como las imágenes estáticas a las que hace referencia. etiqueta img. Solución: coloque los recursos estáticos en el directorio estático al mismo nivel que src y haga referencia a los archivos en este directorio. Pero el punto importante es: las rutas estáticas a las que se hace referencia en el modo de desarrollo y en el modo de producción serán diferentes, así que agregue lo siguiente a. El código del archivo de configuración para distinguir el modo de desarrollo y el modo de producción:
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;Además, en config/index.js, activosPublicPath también es diferente.
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' Configurar proxyTable en 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 ) {
}
}
} ,Agregue lo siguiente a la configuración, donde eagles-service es el ID de acceso al servicio en segundo plano en modo de producción.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; Dirección del proyecto
Demostración en línea
Demostración en línea 2
Blog personal
Grupo QQ: 1063679722
