eagles
1.0.0
| title | date | tags |
|---|---|---|
vue2 eagles專案爬坑之路— 各種組件封裝 | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n element-ui axios custom-theme hightopo echars vue-awesome koa2 |
線上示範
線上示範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版本會發生和element相容性問題，導致原聲的element無法翻譯 和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，在路由中，只能使用import載入元件
部署到Nginx後，所有靜態資源存取出現404（存取失敗） 原因：vue中src目錄下所有的資源檔案都要進行編譯轉碼，原先用引用的靜態檔案將會出錯，如img標籤引用的靜態圖片文件解決方法：將靜態資源放入到和src同級的static目錄，並引用此目錄下文件，但重要的一點是：開發模式和生產模式引用的static路徑會有不同，於是在設定檔中加入如下程式碼，來區分開發模式和生產模式：
export const STATIC_IMAGEPATH = ( process . env . NODE_ENV === 'production' ) ? "./static/img/" : "/static/img/" ;另外, config/index.js下，assetsPublicPath也是不同
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為生產模式下的後台服務存取標識
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ; 項目地址
線上示範
線上示範2
個人部落格
QQ群： 1063679722
