eagles
1.0.0
| ชื่อ | วันที่ | แท็ก |
|---|---|---|
เส้นทางปีนหลุม โครงการ vue2 eagles - บรรจุภัณฑ์ส่วนประกอบต่างๆ | 13-05-2017 10:43:03 -0700 | vue2 vue-i18n element-ui axios ธีมที่กำหนดเอง hightopo echars vue-awesome koa2 |
การสาธิตออนไลน์
การสาธิตออนไลน์ 2
หลังจากใช้เวลากว่าสองสัปดาห์ของการพัฒนาและการจัดองค์กร ตามบล็อกแรกของฉัน "The Road from C/C++ to Front-end Transformation" ในที่สุดโครงการ Eagles ก็ได้เปิดตัว เหตุใดจึงตั้งชื่อว่า Eagles Eagles แปลว่า นกอินทรี เช่นเดียวกับพี่นกอินทรีที่กางปีกเพื่อเอาชนะงูเหลือมใน The Legend of the Condor Heroes โปรเจ็กต์นี้ใช้เทคโนโลยี vue+axios+elementui ผสานการจัดการสถานะ vuex ไลบรารีไอคอนฟอนต์ vue-awesome การทำให้เป็นสากลของ vue-i18n การส่งข้อมูล API การจำลอง mockjs และรองรับการคอมไพล์สไตล์ sass เราได้พัฒนาส่วนประกอบแบบ low-coupling ที่เหมาะสมมากสำหรับโปรเจ็กต์ เช่น ตารางแผนผัง ไดอะแกรมโทโพโลยี ตาราง แผนภูมิ ฯลฯ รวมถึงโมดูลโปรเจ็กต์ทั่วไปเพิ่มเติม เช่น การจัดการเมนู การจัดการสิทธิ์ของบทบาท และการจัดการผู้ใช้
สแต็กเทคโนโลยีพื้นหลังใช้ mockjs ชั่วคราวเพื่อจำลองการส่งข้อมูล Ajax หลังจากนั้นฉันจะใช้เทคโนโลยี spring boot+mybatis เพื่ออธิบายให้ทุกคนฟัง เมื่อเร็วๆ นี้ ฉันได้ศึกษาการใช้งานจริงของ Spring Cloud และสถาปัตยกรรมไมโครเซอร์วิส Docker ด้วย จะมีบทความที่เกี่ยวข้องมาแบ่งปันกับคุณในภายหลัง เพื่อให้เราก้าวหน้าไปด้วยกัน!
เพื่ออำนวยความสะดวกในการสื่อสารจึงได้เปิดกลุ่ม QQ ขึ้น 613176270 ยินดีต้อนรับทุกคนในการพูดคุยอย่างอิสระ คำเตือนที่อบอุ่น: มีผู้หญิงอยู่ในกลุ่ม!
# 克隆项目
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 # 图片目录
เพิ่ม jquery ลงใน package.json
"jquery" : "^1.11.1"เพิ่มโค้ดต่อไปนี้หลัง webpack.base.conf.js และแนะนำ webpack ก่อน
var webpack = require ( "webpack" )
plugins: [
new webpack . optimize . CommonsChunkPlugin ( 'common.js' ) ,
new webpack . ProvidePlugin ( {
jQuery : "jquery" ,
$ : "jquery"
} )
]แนะนำ jquery ใน main.js
import $ from 'jquery' การทำให้เป็นสากลใช้ vue-i18n แต่สามารถใช้ได้เฉพาะเวอร์ชัน 5.x เท่านั้น การใช้เวอร์ชัน 6.x จะทำให้เกิดปัญหาความเข้ากันได้กับองค์ประกอบ ส่งผลให้องค์ประกอบดั้งเดิมไม่สามารถแปลได้ ซึ่งเข้ากันได้กับ Element และถูกนำมาใช้เพื่อทำให้เป็นสากล
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 จะทำให้เกิดปัญหาที่ไม่สามารถสลับส่วนประกอบได้หลังจากปรับใช้กับ Nginx (การสลับล้มเหลว) ดังนั้น หากปรับใช้กับ Nginx ในการกำหนดเส้นทาง คุณสามารถใช้การนำเข้าเพื่อโหลดส่วนประกอบเท่านั้น
หลังจากปรับใช้กับ Nginx แล้ว 404 (การเข้าถึงล้มเหลว) เกิดขึ้นเมื่อเข้าถึงทรัพยากรแบบคงที่ทั้งหมด เหตุผล: ไฟล์ทรัพยากรทั้งหมดในไดเร็กทอรี src ใน Vue จะต้องได้รับการคอมไพล์และแปลงรหัส ไฟล์แบบคงที่ที่อ้างอิงในตอนแรกจะทำให้เกิดข้อผิดพลาด เช่น รูปภาพแบบคงที่ที่อ้างอิงโดย แท็ก img วิธีแก้ไข: วางทรัพยากรแบบคงที่ลงในไดเรกทอรีแบบคงที่ในระดับเดียวกับ src และอ้างอิงไฟล์ในไดเรกทอรีนี้ แต่จุดสำคัญคือ: เส้นทางแบบคงที่ที่อ้างอิงในโหมดการพัฒนาและโหมดการใช้งานจริงจะแตกต่างกัน ดังนั้นให้เพิ่มสิ่งต่อไปนี้ รหัสไฟล์การกำหนดค่าเพื่อแยกแยะโหมดการพัฒนาและโหมดการผลิต:
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;นอกจากนี้ ภายใต้ config/index.js นั้น AssetPublicPath จะแตกต่างออกไปด้วย
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' กำหนดค่า proxyTable ใน 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 ) {
}
}
} ,เพิ่มสิ่งต่อไปนี้เพื่อกำหนดค่า โดยที่ eagles-service เป็นรหัสการเข้าถึงบริการพื้นหลังในโหมดการใช้งานจริง
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; ที่อยู่โครงการ
การสาธิตออนไลน์
การสาธิตออนไลน์ 2
บล็อกส่วนตัว
กลุ่ม QQ: 1063679722
