eagles
1.0.0
| judul | tanggal | tag |
|---|---|---|
Jalan menuju proyek pit of vue2 eagles - berbagai pengemasan komponen | 13-05-2017 10:43:03 -0700 | vue2 vue-i18n elemen-ui axios tema khusus hightopo echars vue-awesome koa2 |
Demo daring
Demo daring 2
Setelah lebih dari dua minggu pengembangan dan pengorganisasian, mengikuti blog asli pertama saya "Jalan dari C/C++ ke Transformasi Front-end", proyek Eagles akhirnya diluncurkan. Mengapa dinamai Eagles? Eagles artinya elang, sama seperti saudara elang yang melebarkan sayapnya untuk mengalahkan ular piton di The Legend of the Condor Heroes. Proyek ini menggunakan teknologi vue+axios+elementui, mengintegrasikan manajemen status vuex, pustaka ikon font vue-awesome, internasionalisasi vue-i18n, pengiriman data api simulasi mockjs, dan mendukung kompilasi gaya sass. Kami telah mengembangkan komponen kopling rendah yang sangat cocok untuk proyek, seperti tabel pohon, diagram topologi, tabel, bagan, dll., serta modul proyek umum tambahan seperti manajemen menu, manajemen izin peran, dan manajemen pengguna.
Tumpukan teknologi latar belakang untuk sementara menggunakan mockjs untuk mensimulasikan pengiriman data Ajax. Nanti, saya akan menggunakan teknologi spring boot+mybatis untuk menjelaskannya kepada semua orang. Baru-baru ini, saya juga telah mempelajari implementasi praktis arsitektur layanan mikro spring cloud dan docker. Akan ada artikel terkait untuk dibagikan kepada Anda nanti, sehingga kita dapat membuat kemajuan bersama!
Untuk memudahkan komunikasi, telah dibuka grup QQ, 613176270. Setiap orang dipersilakan untuk berbicara dengan bebas. Pengingat hangat: Ada perempuan di grup!
# 克隆项目
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 # 图片目录
Tambahkan jquery ke package.json
"jquery" : "^1.11.1"Tambahkan kode berikut setelah webpack.base.conf.js, dan perkenalkan webpack sebelumnya
var webpack = require ( "webpack" )
plugins: [
new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
new webpack . ProvidePlugin ( {
jQuery : "jquery" ,
$ : "jquery"
} )
]Perkenalkan jquery ke main.js
import $ from 'jquery' Internasionalisasi menggunakan vue-i18n, tetapi hanya versi 5.x yang dapat digunakan. Menggunakan versi 6.x akan menyebabkan masalah kompatibilitas dengan elemen, mengakibatkan elemen asli tidak dapat diterjemahkan. Ini kompatibel dengan Element dan diperkenalkan untuk internasionalisasi.
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 )
} Perutean Vue komponen pemuatan panas akan menyebabkan masalah bahwa komponen tidak dapat dialihkan setelah diterapkan ke Nginx (kegagalan peralihan). Oleh karena itu, jika diterapkan ke Nginx, dalam perutean, Anda hanya dapat menggunakan impor untuk memuat komponen.
Setelah diterapkan ke Nginx, 404 (kegagalan akses) terjadi ketika mengakses semua sumber daya statis. Alasan: Semua file sumber daya di direktori src di Vue harus dikompilasi dan ditranskode. File statis yang awalnya direferensikan akan menyebabkan kesalahan, seperti gambar statis yang direferensikan oleh tag img Solusi: Masukkan sumber daya statis ke dalam direktori statis pada level yang sama dengan src, dan referensikan file di direktori ini. Namun yang penting adalah: jalur statis yang direferensikan dalam mode pengembangan dan mode produksi akan berbeda, jadi tambahkan yang berikut ini ke file konfigurasi Kode untuk membedakan mode pengembangan dan mode produksi:
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;Selain itu, di bawah config/index.js, assetsPublicPath juga berbeda.
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' Konfigurasikan proxyTable di 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 ) {
}
}
} ,Tambahkan yang berikut ke config, di mana eagles-service adalah ID akses layanan latar belakang dalam mode produksi.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; Alamat proyek
Demo daring
Demo daring 2
Blog pribadi
Grup QQ: 1063679722
