FamilyBucket が開発した Vue2.0 Web アプリケーション (Wiji APP を参照)

githubリンク

Wiji APPから学び、メインテクノロジースタックとしてvue2.0+vue-router+vuexを使用、UIフレームワークとしてelementui、マルチモジュールスパモード、webpack2.0がモジュールパッケージ化を担当し、 gulp は静的処理を担当します。リソースのパッケージ化と圧縮、スターの報酬へようこそ! ！ ！

Wiji フロントエンド構築プロセス

ローカル環境の準備

• node: * ("node": ">=6.0" をインストールします。node-sass をアップグレードする必要性に対応します。そうでない場合は使用されません。 )

• Webpack を構成します: npm install -g webpack (sudo 権限)

• Windows 構成 cnpm:

npm install -g cnpm --registry=https:

依存関係パッケージのインストール

• wiji ディレクトリに入ります

• cnpm installを実行する

Build

• 開発環境: ノードserver.jsを実行(またはnpm runserve)

• hot-reloadノードserver.js hot-reload(またはnpm run hot)

• mock data npmモックを実行

• 本番環境: npm run buildを実行

ソースマッピングについて(Chromeブラウザのみ対応)

• ソースマッピングはコードマッピングの追跡であり、ローカル開発中の圧縮ファイルのデバッグに便利です

• Chromeでソースマッピングがオンになっていることを確認してください(デフォルトはオープンです)

• 開発ツール→ソースを開いてソースファイルを確認してください

ホットリロード(ビルドのリアルタイム更新をサポートします)

• 環境の準備:

• cnpm install Express webpack-dev-middleware webpack-hot-middleware

• node server.js hot-reload (またはnpm run hot)を実行

• 静的リソースアクセス 例: http: //localhost:8088/Static/...

テーマをカスタマイズします

• wiji ディレクトリに入ります

• cnpm install element-theme element-theme-default --save-dev (依存関係パッケージにはインストール中にインストールされます)

• node_modules/.bin/et -iを実行

• element-variables.cssを生成

• node_modules/.bin/et

• を実行すると、./themeが作成されます

• テーマを変更する場合、対応する .babelrc の変更は次のようになります:

    {      "plugins": [["component", [
        {          "libraryName": "element-ui",          "styleLibraryName": "~theme"}
      ]]]
    }

autoprefixer (スタイルプレフィックス互換性処理)、vue-loader オプションで構成されます

• 生成ルール:

• すべてのブラウザと互換性のあるブラウザ スタイルのプレフィックスを自動的に追加します (世界統計 1% を超えるシェア、Firefox 15)

静的リソースの gulp 処理 (/public)

var gulp = require('gulp'),
    uglify = require('gulp-uglify'), //压缩jsrename = require("gulp-rename"), //文件重命名changed = require('gulp-changed'), //监听文件是否修改imagemin = require('gulp-imagemin'), // 图片压缩pngquant = require('imagemin-pngquant'), // 深度压缩runSequence = require('run-sequence'),     // 同步运行任务插件del = require('del'), //删除文件spritesmith = require('gulp.spritesmith'), //合成雪碧图find = require("gulp-find-glob"); //得到glob对象

• wiji/ を入力しますassets/publicディレクトリ

• cnpm install

• gulp実行(圧縮js、pictures)

• gulp sprite実行(スプライト画像生成) [スプライトに合成したい画像を新しいフォルダに置くimage/sprite/ を実行すると、フォルダー内に対応するスプライトが表示されます。 ; 通行人リスト

  account.html => ログイン登録ページ

WeChatアプレット練習用github：

以上がFamilyBucket が開発した Vue2.0 Web アプリケーション (Wiji APP を参照)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。