eagles
1.0.0
| عنوان | تاريخ | العلامات |
|---|---|---|
الطريق إلى تسلق حفرة مشروع نسور vue2 - تعبئة المكونات المختلفة | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n element-ui axios سمة مخصصة Hightopo echars vue-awesome koa2 |
العرض التوضيحي عبر الإنترنت
العرض التوضيحي عبر الإنترنت 2
بعد أكثر من أسبوعين من التطوير والتنظيم، وبعد مدونتي الأصلية الأولى "الطريق من C/C++ إلى تحويل الواجهة الأمامية"، تم إطلاق مشروع Eagles أخيرًا، لماذا تم تسميته بـ Eagles؟ النسور تعني النسر، تمامًا مثل شقيق النسر الذي ينشر جناحيه لهزيمة الثعبان في أسطورة أبطال الكوندور. يستخدم هذا المشروع تقنية vue+axios+elementui، ويدمج إدارة حالة vuex، ومكتبة أيقونات الخط vue-awesome، وتدويل vue-i18n، وتقديم بيانات واجهة برمجة التطبيقات لمحاكاة mockjs، ويدعم تجميع نمط sass. لقد قمنا بتطوير مكونات منخفضة الاقتران مناسبة جدًا للمشاريع، مثل الجداول الشجرية ومخططات الهيكل والجداول والمخططات وما إلى ذلك، بالإضافة إلى وحدات المشروع العامة الإضافية مثل إدارة القائمة وإدارة أذونات الأدوار وإدارة المستخدم.
تستخدم مكدس تقنية الخلفية مؤقتًا mockjs لمحاكاة إرسال بيانات Ajax، وسأستخدم لاحقًا تقنية Spring Boot + Mybatis لشرح ذلك للجميع. في الآونة الأخيرة، كنت أدرس أيضًا التنفيذ العملي لبنية Spring Cloud وDocker Microservice، وستكون هناك مقالات مقابلة لمشاركتها معك لاحقًا، حتى نتمكن من إحراز تقدم معًا!
لتسهيل التواصل، تم فتح مجموعة 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، الأصولPublicPath مختلفة أيضًا.
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 هو معرف الوصول إلى خدمة الخلفية في وضع الإنتاج.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; عنوان المشروع
العرض التوضيحي عبر الإنترنت
العرض التوضيحي عبر الإنترنت 2
مدونة شخصية
مجموعة QQ: 1063679722
