Webフロントエンド開発のVueの一般的な問題

Eコマースのバックグラウンドプロジェクト

1.giteeをアップロードする

私たちのプロジェクトはvueスキャフォールディングを使用して作成されているため

したがって、CodeCloudにアップロードするときに再度初期化する必要はありません。

gitee公式サイト

アカウントにログインした後、新しい倉庫を作成するだけで済みます

独自のウェアハウス名を入力して、[作成]をクリックします

作成が成功すると、次のインターフェイスが表示されます

アップロードする必要のあるディレクトリでGieBashHereを開く必要があります

ローカル操作については、上記の手順に従ってください

ローカルディレクトリに新しいREADME.mdを作成します。touchコマンドを使用するか、手動で作成します。
ステージング領域にREADME.mdを追加します。gitaddREADME.md
変更を送信するgitcommit -m'firstcommit対応するリモートウェアハウスを追加するgitremote add origin…、自分のアドレスを使用するように注意してください
ローカルウェアハウスをリモートウェアハウスにプッシュするgitpush -u origin master

2つ目は、Element-UIを構成することです。

element-uiをインストールします

npm i element-ui -S

オンデマンドの紹介：

エントリファイルmain.jsで紹介します

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3、Axiosを構成します

インストール

npm install axios

構成

// 挂载axios
Vue.prototype.$http = axios;
// 配置axios基准地址
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

Axiosを使用するコンポーネントが複数あるため
したがって、main.jsにもaxiosを導入する必要があります
axiosをマウントした後、axiosの代わりにthis。$ httpを使用できます。
ベースアドレスは、リクエストが行われるたびに入力されない場合に問題が発生しないように構成されています

4つ、ローダーが少ない

使用する構文が少なくなると、インストールする必要のあるローダーも少なくなります

npm install less less-loader -D

ただし、インストール後もパッケージはエラーを報告します

ここに画像の説明を挿入します

これは、ローダーの数が少ない場合と少ない場合の非互換性が原因です。

解決策：より高いバージョンのless-loaderをアンインストールします

npm uninstall less-loader

次に、下位バージョンをインストールし、ここからインストールするバージョン（7.3.0など）を選択します。

npm i [email protected]

5、グローバルスタイルを設定します

グローバルスタイルは、すべてまたはほとんどのコンポーネントが使用する必要のあるスタイルです。

App.vueで直接設定できるため、App.vueのルーティング出口を介して表示されるすべてのコンポーネントはこのスタイルを使用します

ただし、ルーティング出口から表示されるコンポーネントは使用されません。また、スタイルが多すぎると、煩雑になります。

推奨される方法：

アセットに新しいcssディレクトリを作成します
cssディレクトリの下に新しいcommon.cssを作成します
そして、main.jsにcommon.cssを導入します

6、iconfontフォントを追加します

パッケージが大きいため、ローカルインポートにダウンロードすることはお勧めしません

ここに画像の説明を挿入します

上記のパスをコピーする必要があります

そして、パブリックディレクトリのindex.htmlで紹介されました

<link rel="stylesheet" href="//at.alicdn.com/t/font_2421358_xludpml4fa.css">

次に、アイコンアイコンを使用します

ここに画像の説明を挿入します

7、フォームの検証

フォームに属性を追加します：rules = "formRules"、formRulesは、スクリプトで定義された一連の検証ルールです。
データ内のformRulesルールの特定のコンテンツを定義します

// 定义验证规则列表
      FormRules: {
    
    
        username: [
          {
    
     required: true, message: "请输入用户名", trigger: "blur" },
          {
    
     min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
        ],
        password: [
          {
    
     required: true, message: "请输入密码", trigger: "blur" },
          {
    
     min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
        ]
      }

次の点に注意してください。

FormRulesの下の属性名は、入力ボックスにバインドされている属性名と一致している必要があります

prop属性を使用して検証ルールを設定します

<el-form-item label="用户名" prop="username">

8つの非同期変換

非同期の入れ子は常にたくさんあります：

validateのパラメーターはコールバック関数です
postメソッドはpromiseを返しますが、promiseのthenメソッドもコールバック関数です。

約束はコールバック地獄の問題を終わらせましたが、同時に多数のチェーン呼び出しも忌まわしいです。今日、私たちはこの問題を完全に解決します。

async + await

よりエレガントな方法でpromiseを呼び出して実行しましょう

awaitキーワードを使用すると、async関数は実行を一時停止し、await-modified関数の実行後も関数の背後にあるコードを実行し続けることができます。
await関数によって変更された関数の戻り値はPromiseである必要があります。たとえば、上記のvalidate関数の戻り値はpromiseです。
promiseが内部で正常に実行されると、resolveメソッドが実行され、戻り値がawait変更された関数の戻り値として使用されます。
promiseの内部実行が失敗した場合、rejectメソッドが実行されるため、trycatchを使用してこの例外をキャッチする必要があります。厳密に言えば、trycatch変更を使用する必要があります

    async submitLogin(form) {
    
    
      try {
    
    
        await this.$refs.form.validate();
        // 验证通过执行登陆逻辑
        let res = await this.$http.post("login", this.loginForm);
        // console.log(res)
        const {
    
     msg, status } = res.data.meta;
        if(status == 400){
    
    
          // console.log(msg)
          this.message=msg
          return false
        }
        localStorage.setItem('token',res.data.data.token)
        this.$router.push('/home')
        // console.log(res.data)
      } catch (err) {
    
    
        this.message="验证不通过"
      }
    },

try and catchを使用しない場合：

this。$ refs.form.validate（）が確立されていない場合、コンソールはエラーを報告します

したがって、失敗の実行にはネストされたキャッチを試す必要があります