タイトル | 日付 | タグ |
---|---|---|
vue2 eagles プロジェクトのピットを登るまでの道 - さまざまなコンポーネントのパッケージ化 | 2017-05-13 10:43:03 -0700 | vue2 vue-i18n element-ui axios カスタムテーマ hightopo echars vue-awesome koa2 |
オンラインデモ
オンラインデモ2
私の最初のオリジナル ブログ「C/C++ からフロントエンド変革への道」に続き、2 週間以上の開発と編成を経て、ついに Eagles プロジェクトが開始されました。なぜ Eagles という名前なのでしょうか。イーグルスとは鷲の意味で、『コンドル英雄伝説』でニシキヘビを倒すために翼を広げたワシの兄弟のように。このプロジェクトは vue+axios+elementui テクノロジーを使用し、vuex 状態管理、vue-awesome フォント アイコン ライブラリ、vue-i18n 国際化、mockjs シミュレーション API データ送信を統合し、sass スタイルのコンパイルをサポートします。私たちは、ツリー テーブル、トポロジ ダイアグラム、テーブル、チャートなどのプロジェクトに非常に適した低結合コンポーネントと、メニュー管理、ロール権限管理、ユーザー管理などの追加の一般的なプロジェクト モジュールを開発しました。
バックグラウンド技術スタックは、Ajax データ送信をシミュレートするために一時的に mockjs を使用します。後で、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 を使用しますが、バージョン 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 (アクセス失敗) が発生します。 理由: Vue の src ディレクトリ内のすべてのリソース ファイルをコンパイルしてトランスコードする必要があります。 img ドキュメント。解決策: 静的リソースを src と同じレベルの静的ディレクトリに配置し、このディレクトリ内のファイルを参照します。ただし、重要な点は、開発モードと運用モードで参照される静的パスが異なるため、次の行を追加します。設定ファイル 開発モードと運用モードを区別するコード:
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 は実稼働モードのバックグラウンド サービス アクセス ID です。
export const API_BASEURL = ( process . env . NODE_ENV === 'production' ) ? "/eagles-service" : "/ajax" ;
プロジェクトアドレス
オンラインデモ
オンラインデモ2
個人ブログ
QQグループ: 1063679722