eagles
1.0.0
| titre | date | balises |
|---|---|---|
La route pour gravir la fosse du projet vue2 eagles - emballage de divers composants | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n element-ui axios thème personnalisé hightopo echars vue-awesome koa2 |
Démo en ligne
Démo en ligne 2
Après plus de deux semaines de développement et d'organisation, suite à mon premier blog original "The Road from C/C++ to Front-end Transformation", le projet Eagles a enfin été lancé. Pourquoi s'appelle-t-il Eagles ? Eagles signifie aigle, tout comme le frère aigle déployant ses ailes pour vaincre le python dans La Légende des Héros Condor. Ce projet utilise la technologie vue+axios+elementui, intègre la gestion de l'état vuex, la bibliothèque d'icônes de police vue-awesome, l'internationalisation vue-i18n, la soumission de données de l'API de simulation mockjs et prend en charge la compilation de style sass. Nous avons développé des composants à faible couplage très adaptés aux projets, tels que des tables arborescentes, des diagrammes de topologie, des tableaux, des graphiques, etc., ainsi que des modules de projet généraux supplémentaires tels que la gestion des menus, la gestion des autorisations de rôle et la gestion des utilisateurs.
La pile technologique d'arrière-plan utilise temporairement mockjs pour simuler la soumission de données Ajax. Plus tard, j'utiliserai la technologie Spring Boot+mybatis pour l'expliquer à tout le monde. Récemment, j'ai également étudié la mise en œuvre pratique de l'architecture des microservices Spring Cloud et Docker. Il y aura des articles correspondants à partager avec vous plus tard, afin que nous puissions progresser ensemble !
Pour faciliter la communication, un groupe QQ a été ouvert, 613176270. Tout le monde est invité à s'exprimer librement. Rappel chaleureux : il y a des filles dans le groupe !
# 克隆项目
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 # 图片目录
Ajouter jquery à package.json
"jquery" : "^1.11.1"Ajoutez le code suivant après webpack.base.conf.js et introduisez webpack avant
var webpack = require ( "webpack" )
plugins: [
new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
new webpack . ProvidePlugin ( {
jQuery : "jquery" ,
$ : "jquery"
} )
]Introduire jquery dans main.js
import $ from 'jquery' L'internationalisation utilise vue-i18n, mais seule la version 5.x peut être utilisée. L'utilisation de la version 6.x entraînera des problèmes de compatibilité avec l'élément, ce qui empêchera la traduction de l'élément d'origine. Il est compatible avec Element et est introduit pour l'internationalisation.
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 )
} Le chargement à chaud des composants de routage Vue entraînera le problème que les composants ne peuvent pas être commutés après avoir été déployés sur Nginx (échec de commutation). Par conséquent, s'ils sont déployés sur Nginx, dans le routage, vous ne pouvez utiliser l'importation que pour charger les composants.
Après le déploiement sur Nginx, 404 (échec d'accès) se produit lors de l'accès à toutes les ressources statiques. Raison : tous les fichiers de ressources du répertoire src dans Vue doivent être compilés et transcodés. Les fichiers statiques initialement référencés provoqueront des erreurs, telles que les images statiques référencées par le. balise img. Solution : placez les ressources statiques dans le répertoire statique au même niveau que src et référencez les fichiers dans ce répertoire. Mais le point important est : les chemins statiques référencés en mode développement et en mode production seront différents, ajoutez donc ce qui suit. le fichier de configuration Code pour distinguer le mode développement et le mode production :
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;De plus, sous config/index.js, assetsPublicPath est également différent.
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' Configurer proxyTable dans 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 ) {
}
}
} ,Ajoutez ce qui suit à la configuration, où eagles-service est l'ID d'accès au service en arrière-plan en mode production.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; Adresse du projet
Démo en ligne
Démo en ligne 2
Blog personnel
Groupe QQ : 1063679722
