Vue template web

Vue-template-web は、vue element-ui を使用したシンプルなホームページ テンプレートです。

導入：

このプロジェクトはシンプルなテンプレート ページと基本構造であり、プロモーション ページ、テーマ ページ、公式 Web サイト ページなどに簡単に変換できます。

プロジェクトの実施:

1. 双方向バインディングのスクロール アンカー ページ。
2. vue element-ui の i8n 国際化サポート。
3. テーマカラーテーマを変更します。
4. Vuex は、ユーザーが選択したテーマと言語を永続的にキャッシュします。
5. iconfontフォントアイコンライブラリを使用しました。
6. axios リクエストをカプセル化します。

プロジェクトの構造:

 src
 ├─assets                静态资源,图片,iconfont图标字体存放目录
 ├─components            公共组件目录
 ├─i18n                  vue element-ui的i8n国际化支持
 ├─router                路由模块
 ├─store                 vuex的模块,公共的state, mutations方法
 ├─utils                 工具类模块,包含http,本地缓存等.
 ├─views                 各个page页面的存放目录
 ├─App.vue               入口组件,挂载入口
 └─main.js               main入口js文件,引入全局使用的库、公共的样式和方法

レンダリング：

実行方法:

-.プロジェクトのクローンを作成します ( git clone https://github.com/pjqdyd/Vue-template-web.git )。

-. npm install実行して依存関係をダウンロードします (ダウンロードが遅い場合: npm install --registry=https://registry.npm.taobao.org )。

-. npm run serveを実行してプロジェクトを開始し、 http://localhost:8080にアクセスしてページを参照します。

npm run build実行して、プロジェクトをコンパイルしてパッケージ化します。

知らせ：

1. 新しいブランチ Vue-template-web-cdn は、CDN を使用して一部の依存関係をロードします。これにより、パッケージ化後の js ファイルが大きくなりすぎたり、最初の画面のロードに時間がかかりすぎたりすることがなくなります。

テスト済み:

 master分支运行npm run build后dist文件夹大小为_4M_左右;

Vue-template-web-cdn分支打包后的dist文件夹减少至_100kb_左右;

したがって、Vue-template-web-cdn ブランチを使用することをお勧めします。

2. window.scrollTo(options) アンカー ポイントを使用してスクロールを最適化した後、ブラウザの互換性に注意してください。もちろん、window.scrollTo には互換性があるため、以前の送信バージョンを選択できます。

ヒント：

1. プロジェクトは、vue element-ui i8n 国際化を実装し、中国語と英語の切り替えにより、i18n/langs/ で定義される 2 つの言語セットを定義します。

2. テーマ変更の実装:

以前は、ElementUI のコンポーネントと一緒に色を変更する方法を参考に実装していましたが、この方法は煩雑で未知のバグを引き起こす可能性があるため、現在は色の値を直接保存してテーマを変更する方法を使用しています。プロジェクト内で this.$ を渡すと、テーマの色の値を取得できます。
(さらに推奨: css var 変数を使用してルート要素にバインドし、スタイルを変更できます)。

3. ページ アンカーのスクロールは、このオープン ソース プロジェクトを参照しています。

4. プロジェクトは axios リクエストをカプセル化し、グローバル属性 $globalRequest をバインドします。 await this.$globalRequest.test4(arg); を介して非同期リクエスト メソッド test4() を呼び出すことができます。

5. プロジェクトで改善できる点が見つかった場合は、改善のために問題を提起してください。