eagles
1.0.0
| 제목 | 날짜 | 태그 |
|---|---|---|
vue2 Eagles 프로젝트의 핏을 오르는 길 - 다양한 컴포넌트 패키징 | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n element-ui axios 사용자 정의 테마 hightopo echars vue-awesome koa2 |
온라인 데모
온라인 데모 2
2주가 넘는 개발 및 구성 끝에 나의 첫 번째 블로그인 "C/C++에서 프런트엔드 변환으로의 길"에 이어 마침내 Eagles 프로젝트가 출시되었습니다. 이름은 왜 Eagles입니까? Eagles는 독수리를 의미합니다. 마치 콘도르 영웅전설에서 독수리 형제가 비단뱀을 물리치기 위해 날개를 펼치는 것과 같습니다. 이 프로젝트는 vue+axios+elementui 기술을 사용하고, vuex 상태 관리, vue-awesome 글꼴 아이콘 라이브러리, vue-i18n 국제화, mockjs 시뮬레이션 API 데이터 제출을 통합하고 Sass 스타일 컴파일을 지원합니다. 트리 테이블, 토폴로지 다이어그램, 테이블, 차트 등과 같은 프로젝트에 매우 적합한 낮은 결합 구성 요소는 물론 메뉴 관리, 역할 권한 관리, 사용자 관리와 같은 추가 일반 프로젝트 모듈을 개발했습니다.
백그라운드 기술 스택은 일시적으로 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 # 图片目录
package.json에 jquery 추가
"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"
} )
]main.js에 jquery를 도입하세요.
import $ from 'jquery' 국제화는 vue-i18n을 사용하지만 버전 5.x만 사용할 수 있습니다. 버전 6.x를 사용하면 요소와의 호환성 문제가 발생하여 원래 요소를 번역할 수 없게 됩니다. 요소와 호환되며 국제화를 위해 도입되었습니다.
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(액세스 실패)가 발생합니다. 이유: Vue의 src 디렉터리에 있는 모든 리소스 파일을 컴파일하고 트랜스코딩해야 합니다. img 태그입니다. 해결 방법: 정적 리소스를 src와 동일한 수준의 정적 디렉터리에 넣고 이 디렉터리의 파일을 참조합니다. 그러나 중요한 점은 개발 모드와 프로덕션 모드에서 참조되는 정적 경로가 다르기 때문에 다음을 추가합니다. 개발 모드와 프로덕션 모드를 구별하는 구성 파일 코드:
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;또한 config/index.js에서는 자산PublicPath도 다릅니다.
assetsPublicPath : './' , //生产环境assetsPublicPath: '/' config/index.js에서 ProxyTable 구성
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 ) {
}
}
} ,config에 다음을 추가합니다. 여기서 Eagles-service는 프로덕션 모드의 백그라운드 서비스 액세스 ID입니다.
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; 프로젝트 주소
온라인 데모
온라인 데모 2
개인 블로그
QQ 그룹: 1063679722
