eagles
1.0.0
| título | data | etiquetas |
|---|---|---|
O caminho para escalar o poço do projeto vue2 eagles - embalagens de vários componentes | 13/05/2017 10:43:03 -0700 | vue2 vue-i18n elemento-ui axios tema personalizado hightopo echars vue-awesome koa2 |
Demonstração on-line
Demonstração on-line 2
Depois de mais de duas semanas de desenvolvimento e organização, seguindo meu primeiro blog original "The Road from C/C++ to Front-end Transformation", o projeto Eagles foi finalmente lançado. Por que se chama Eagles? Águias significa águia, assim como o irmão águia abrindo suas asas para derrotar a píton em A Lenda dos Heróis Condor. Este projeto usa tecnologia vue + axios + elementui, integra gerenciamento de estado vuex, biblioteca de ícones de fontes incríveis vue, internacionalização vue-i18n, envio de dados de API de simulação mockjs e suporta compilação de estilo sass. Desenvolvemos componentes de baixo acoplamento que são muito adequados para projetos, como tabelas de árvore, diagramas de topologia, tabelas, gráficos, etc., bem como módulos adicionais de projetos gerais, como gerenciamento de menus, gerenciamento de permissões de funções e gerenciamento de usuários.
A pilha de tecnologia de fundo usa temporariamente mockjs para simular o envio de dados Ajax. Mais tarde, usarei a tecnologia spring boot + mybatis para explicá-la a todos. Recentemente, também tenho estudado a implementação prática da arquitetura de microsserviços Spring Cloud e Docker. Haverá artigos correspondentes para compartilhar com vocês mais tarde, para que possamos progredir juntos!
Para facilitar a comunicação, foi aberto um grupo QQ, 613176270. Todos podem falar livremente. Lembrete caloroso: Há meninas no 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 # 图片目录
Adicione jquery ao package.json
"jquery" : "^1.11.1"Adicione o seguinte código após webpack.base.conf.js e introduza o webpack antes
var webpack = require ( "webpack" )
plugins: [
new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
new webpack . ProvidePlugin ( {
jQuery : "jquery" ,
$ : "jquery"
} )
]Introduzir jquery em main.js
import $ from 'jquery' A internacionalização usa vue-i18n, mas apenas a versão 5.x pode ser usada. O uso da versão 6.x causará problemas de compatibilidade com o elemento, resultando na impossibilidade de tradução do elemento original.
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 )
} Os componentes de carregamento a quente do roteamento Vue causarão o problema de que os componentes não podem ser alternados após serem implantados no Nginx (falha de comutação). Portanto, se implantado no Nginx, no roteamento, você só pode usar a importação para carregar componentes.
Após a implantação no Nginx, ocorre 404 (falha de acesso) ao acessar todos os recursos estáticos. Motivo: todos os arquivos de recursos no diretório src no Vue devem ser compilados e transcodificados. Os arquivos estáticos originalmente referenciados causarão erros, como imagens estáticas referenciadas pelo. etiqueta img. Solução: coloque os recursos estáticos no diretório estático no mesmo nível que src e faça referência aos arquivos neste diretório. Mas o ponto importante é: os caminhos estáticos referenciados no modo de desenvolvimento e no modo de produção serão diferentes, então adicione o seguinte a. o código do arquivo de configuração para distinguir o modo de desenvolvimento e o modo de produção:
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;Além disso, em config/index.js, assetsPublicPath também é diferente.
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' Configure proxyTable em 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 ) {
}
}
} ,Adicione o seguinte à configuração, onde eagles-service é o ID de acesso ao serviço em segundo plano no modo de produção.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; Endereço do projeto
Demonstração on-line
Demonstração on-line 2
Blog pessoal
Grupo QQ: 1063679722
