Vue-CLI-2.xファミリーバケツアーキテクチャ、パッケージ化後のサーバ構築事例の自動導入をサポート
18020 ワード
今日は普段自分で開発したいくつかの構築構成を共有する時間があります.私たちはVue-CLI-2です.xは開発環境を構築する.はい、まず私たちがどんな仕事をするか見てみましょう.
ソースアドレスを添付します.com/749264345/V…
1.Vue,Vuex,vue-router,axiosはCDNを介して導入される.パッケージング後のファイルが大きすぎる問題の最適化
2.開発環境区分開発、テスト、生産;開発効率の向上
3.梱包区分テストと生産
4.プロジェクトのパッケージングを実現した後、自動的にリモートサーバーに配置する
5.モジュール化構築vuex状態管理
6.梱包後に自動的にconsoleをクリアする.log()
7.プロジェクトのデフォルトはElement-uiに基づいて、関連するコンポーネントを二次的にカプセル化する
8.モジュール化axios要求応答ブロックの構築
一寸の光陰一寸の金、寸の金は寸の光陰を買うのが難しい~くだらないことは多く言わないで、直接袖を引っ張ってやるのはやることだ~~
従来、npmまたはcnpmのインストール依存性を使用することに慣れていました.この操作は非常に便利ですが、有利には弊害があります.一部のパートナーは、プロジェクトをパッケージ化すると、パッケージ化されたjsファイルが非常に膨大で、数兆に達していることがわかります.そのため、最終的にはアプリケーションが開いたときに最初の画面のロードが非常に遅いため、従来の導入方法、つまりCDN導入を使用することができます.Vue,Vuex,vue-router,axios,これらはすべて静的リソースで、私たちはそれらの公式サイトから適切なバージョンをダウンロードしてプロジェクトのルートディレクトリ【static】フォルダに入れて、それからいくつかの場所を修正します:まず、index.html
その後、変更します.build/webpack.base.conf.js
ここまでの基本構成は完了しており、最後のステップはmainで行う必要がある.jsでは、これらのモジュールに対するimport操作を削除すればよい.これでプロジェクトをパッケージすると、ページが非常に滑らかで、ほぼ秒で開いていることがわかります.
インタフェースをデバッグしたり、debugをデバッグしたりするときに環境を切り替えたり、パッケージ化するときに生産的なインタフェースに変更したりするのは効率的ではないので、次のような構成ができます.config/dev.env.jsファイルでは、
我々はプロセスからenv.npm_lifecycle_eventでは、プロジェクトの実行環境を区別するために現在のnodeが実行している環境を取得します.これにより、インタフェース環境を区別するために使用できるので、関連命令を追加します.ルートディレクトリpackage.jsonファイルでは、
3つの命令を追加し、それぞれdev、test、prodはconfig/dev.envに対応する.jsファイルに追加された3つの環境.ここまで開発環境の区分を完了しました.
原理は上と一致し、config/prod.env.jsファイルでは、
同時にルートディレクトリpackage.jsonファイルでは、
私たちは最後の2つの命令を追加したのを見て、ここで私は直接テストパッケージを打つことができて、生産パッケージと.プロジェクトでコードを変更するたびに、コードを変更する必要はありません.
まずインストール
プロジェクトbuild/buildを変更します.jsは次のコードを追加します.
また、公開後に当期時間を表示する機能を追加し、表示しやすいようにしました.リモートサーバの構成情報はconfig/prod.envにあります.jsファイルでは、以下のように、
ここで、自動配置機能、コマンドライン入力を完了しました.
ちょっと待って、OK、完璧~
紙面やvuexの構成が多いため,ここでは述べない.
build/webpackを開きます.prod.conf.jsプラグインを追加します.
このように、プロジェクトパッケージ後のconsole.log()はコンソールに現れず、きれいになります.
ここではelement-uiページングコンポーネントを例にvueファイルを新規作成します.
コンポーネント内のステータスをemit()メソッドで親コンポーネントに送信し、親コンポーネントはイベントサブスクリプションで傍受します.親コンポーネントを見てみましょう.
pageChange()を使用して傍受し、コードの幅も論理もより明確になります.
新しいファイルを作成しますjs
ブロッキングによりtoken情報の統一取得と要求携帯を実現し,エラー情報を統一的に提示し,現在の要求を記録し,ルーティングジャンプ時に前のページの要求をキャンセルし,現在のページの有効な表示を向上させた.
紙面の問題で、具体的なその他の配置は私のgithub~ソースアドレス、githubに移動してください.com/749264345/V...より優れた構成案リクエストがあれば下にメッセージを残す~
転載先:https://juejin.im/post/5ccead7b518825403b597841
ソースアドレスを添付します.com/749264345/V…
1.Vue,Vuex,vue-router,axiosはCDNを介して導入される.パッケージング後のファイルが大きすぎる問題の最適化
2.開発環境区分開発、テスト、生産;開発効率の向上
3.梱包区分テストと生産
4.プロジェクトのパッケージングを実現した後、自動的にリモートサーバーに配置する
5.モジュール化構築vuex状態管理
6.梱包後に自動的にconsoleをクリアする.log()
7.プロジェクトのデフォルトはElement-uiに基づいて、関連するコンポーネントを二次的にカプセル化する
8.モジュール化axios要求応答ブロックの構築
一寸の光陰一寸の金、寸の金は寸の光陰を買うのが難しい~くだらないことは多く言わないで、直接袖を引っ張ってやるのはやることだ~~
1.Vue，Vuex，vue-router，axiosはCDNを通して導入する
従来、npmまたはcnpmのインストール依存性を使用することに慣れていました.この操作は非常に便利ですが、有利には弊害があります.一部のパートナーは、プロジェクトをパッケージ化すると、パッケージ化されたjsファイルが非常に膨大で、数兆に達していることがわかります.そのため、最終的にはアプリケーションが開いたときに最初の画面のロードが非常に遅いため、従来の導入方法、つまりCDN導入を使用することができます.Vue,Vuex,vue-router,axios,これらはすべて静的リソースで、私たちはそれらの公式サイトから適切なバージョンをダウンロードしてプロジェクトのルートディレクトリ【static】フォルダに入れて、それからいくつかの場所を修正します:まず、index.html
<script src="./static/libs/polyfill.min.js">script>
<script src="./static/libs/eventsource.js">script>
<script src="./static/libs/vue.js">script>
<script src="./static/libs/vue-router.min.js">script>
<script src="./static/libs/element-ui/element-ui.js">script>
<script src="./static/libs/axios.js">script>
<script src="./static/libs/vuex.js">script>
その後、変更します.build/webpack.base.conf.js
module.exports = {
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios'
},
...
}
ここまでの基本構成は完了しており、最後のステップはmainで行う必要がある.jsでは、これらのモジュールに対するimport操作を削除すればよい.これでプロジェクトをパッケージすると、ページが非常に滑らかで、ほぼ秒で開いていることがわかります.
2.開発環境区分開発、テスト、生産；開発効率の向上
インタフェースをデバッグしたり、debugをデバッグしたりするときに環境を切り替えたり、パッケージ化するときに生産的なインタフェースに変更したりするのは効率的ではないので、次のような構成ができます.config/dev.env.jsファイルでは、
const TARGET = process.env.npm_lifecycle_event;
//
if (TARGET === 'dev') {
var data = {
NODE_ENV: '"dev"',
API: '"http://www.dev.com"'
}
}
//
if (TARGET === 'test') {
var data = {
NODE_ENV: '"test"',
API: '"http://www.test.com"'
}
}
//
if (TARGET === 'prod') {
var data = {
NODE_ENV: '"prod"',
API: '"http://www.prod.com"'
}
}
我々はプロセスからenv.npm_lifecycle_eventでは、プロジェクトの実行環境を区別するために現在のnodeが実行している環境を取得します.これにより、インタフェース環境を区別するために使用できるので、関連命令を追加します.ルートディレクトリpackage.jsonファイルでは、
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
},
3つの命令を追加し、それぞれdev、test、prodはconfig/dev.envに対応する.jsファイルに追加された3つの環境.ここまで開発環境の区分を完了しました.
3.梱包区分テストと生産
原理は上と一致し、config/prod.env.jsファイルでは、
const TARGET = process.env.npm_lifecycle_event;
//
if (TARGET === 'build:test') {
module.exports = {
NODE_ENV: '"build:test"',
NODE_NAME: '" "',
API: '"http://www.test.com"'
}
}
//
if (TARGET === 'build:prod') {
module.exports = {
NODE_ENV: '"build:prod"',
NODE_NAME: '" "',
API: '"http://www.prod.com"'
}
}
同時にルートディレクトリpackage.jsonファイルでは、
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"test": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"prod": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build:test": "node build/build.js",
"build:prod": "node build/build.js"
},
私たちは最後の2つの命令を追加したのを見て、ここで私は直接テストパッケージを打つことができて、生産パッケージと.プロジェクトでコードを変更するたびに、コードを変更する必要はありません.
4.プロジェクトのパッケージングを実現した後、自動的にリモートサーバーに配置する
まずインストール
npm install scp2 --save-dev
プロジェクトbuild/buildを変更します.jsは次のコードを追加します.
var scpClient = require('scp2');
var serverConf = require('../config/prod.env');
const spinner2 = ora(' ' + serverConf.NODE_NAME + ' ...');
spinner2.start();
scpClient.scp('dist/', serverConf.server,
function (err) {
spinner2.stop();
if (err) {
console.log(chalk.red(' .
'));
throw err;
} else {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
console.log(chalk.green(
'Success! ' + serverConf.NODE_NAME + ' !
' +
year + ' ' + month + ' ' + day + ' ' + hour + ':' + minute + ':' + second
));
}
}
);
また、公開後に当期時間を表示する機能を追加し、表示しやすいようにしました.リモートサーバの構成情報はconfig/prod.envにあります.jsファイルでは、以下のように、
//
if (TARGET === 'build:test') {
module.exports = {
NODE_ENV: '"build:test"',
NODE_NAME: '" "',
API: '"http://192.168.1.123:8080"',
server: {
host: '192.168.1.123',
port: 3122,
username: 'root',
password: '2019111',
path: '/usr/local/nginx/html/test'
}
}
}
ここで、自動配置機能、コマンドライン入力を完了しました.
npm run build:test
ちょっと待って、OK、完璧~
5.モジュール化構築vuex状態管理
紙面やvuexの構成が多いため,ここでは述べない.
6.梱包後に自動的にconsoleをクリアする.log()
build/webpackを開きます.prod.conf.jsプラグインを追加します.
plugins:[
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
]
このように、プロジェクトパッケージ後のconsole.log()はコンソールに現れず、きれいになります.
7.プロジェクトのデフォルトはElement-uiに基づいて、関連するコンポーネントを二次的にカプセル化する
ここではelement-uiページングコンポーネントを例にvueファイルを新規作成します.
"text-align:right;margin-top:10px;" popper-class="pagination"
layout="total, prev, pager, next,sizes, jumper"
:total="total"
:page-sizes="[10, 20, 30, 40,50]"
:page-size="size"
:current-page="current"
@size-change="sizeChange"
@current-change="currentChange">
<span class="hljs-built_in">export</span> default {
<span class="hljs-function"><span class="hljs-title">data</span></span>() {
<span class="hljs-built_in">return</span> {
pageSize: this.size,
pageCurrent: this.current
}
},
props: {
total: {
<span class="hljs-built_in">type</span>: Number,
default: 0
},
current: {
<span class="hljs-built_in">type</span>: Number,
default: 1
},
size: {
<span class="hljs-built_in">type</span>: Number,
default: 10
}
},
methods: {
currentChange(current) {
this.pageCurrent = current;
this.emit();
},
sizeChange(size) {
this.pageSize = size;
this.pageCurrent = 1;
this.emit();
},
<span class="hljs-function"><span class="hljs-title">emit</span></span>() {
this.<span class="hljs-variable">$emit</span>(<span class="hljs-string">'pageChange'</span>, {
pageSize: this.pageSize,
pageCurrent: this.pageCurrent
})
}
}
}
コンポーネント内のステータスをemit()メソッドで親コンポーネントに送信し、親コンポーネントはイベントサブスクリプションで傍受します.親コンポーネントを見てみましょう.
<template>
<!-- -->
<Pagination v-on:pageChange=<span class="hljs-string">"pageChange"</span> :total=<span class="hljs-string">"total"</span> :current=<span class="hljs-string">"pageCurrent"</span> :size=<span class="hljs-string">"pageSize"</span>></Pagination>
</template>
//
import Pagination from <span class="hljs-string">"../components/Pagination"</span>;
<span class="hljs-built_in">export</span> default {
components: {
Pagination
},
<span class="hljs-function"><span class="hljs-title">data</span></span>() {
<span class="hljs-built_in">return</span> {
//
total: 0,
pageSize: 10,
pageCurrent: 1
};
},
methods: {
//
pageChange(res) {
this.pageSize = res.pageSize;
this.pageCurrent = res.pageCurrent;
}
}
};
pageChange()を使用して傍受し、コードの幅も論理もより明確になります.
8.モジュール化axios要求応答ブロックの構築
新しいファイルを作成しますjs
//
axios.interceptors.request.use((config) => {
// ，
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
Vue.prototype.$requestCancel = function () {
source.cancel('canceled');
};
config.cancelToken = source.token;
//
config.headers.Authorization = localStorage.getItem('token');
return config;
},
(err) => {
return Promise.reject(err);
}
);
//
axios.interceptors.response.use((response) => {
if (response.data.code == 200) {
localStorage.setItem('token', response.headers.authorization);
} else {
Vue.prototype.$message.error(response.data.msg);
}
return response;
},
(error) => {
return Promise.reject(error.response.data);
}
);
ブロッキングによりtoken情報の統一取得と要求携帯を実現し,エラー情報を統一的に提示し,現在の要求を記録し,ルーティングジャンプ時に前のページの要求をキャンセルし,現在のページの有効な表示を向上させた.
紙面の問題で、具体的なその他の配置は私のgithub~ソースアドレス、githubに移動してください.com/749264345/V...より優れた構成案リクエストがあれば下にメッセージを残す~
転載先:https://juejin.im/post/5ccead7b518825403b597841