ガイド人

前にmpvue+vantを構築したことがありますが、記録はしていません.今回は新しいプログラムプロジェクトがスタートしたので、最初から構築します.ついでに記録しておきます.そうしないと、時間が経つと、どうやって構築するか忘れてしまいます.文章の末尾にはコードが含まれていて、勉強しなければならない子供靴を持って行って、感謝しません.

ステップ1:nodeがインストールされているかどうかを確認します。js

$ node -v

$ npm -v

服装がなければNodeに向かいます.js公式サイトのインストール

ステップ2:cnpmのインストール

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

ステップ3：Vue Cliのインストール

$ sudo cnpm install -g @vue/cli

ステップ4:プロジェクト名を考え、作成

コードディレクトリにアクセスしてから作成するには、
私のローカルコードディレクトリ:/Users/hrz/myworkspaceプロジェクト名:lawyer-card-wxss appid:私の微信ウィジェットappid
だから私は実行する必要があります

$ cd /Users/hrz/myworkspace
$ vue init mpvue/mpvue-quickstart lawyer-card-wxss 

実行後、しばらくすると、プロジェクト名、微信ウィジェットappid、プロジェクト説明、著者、ESLintを開くかどうかなどの情報を再び尋ねます.
完了すると、コマンドを実行するディレクトリにプロジェクトが作成され、プロジェクトに入り、依存をダウンロードして起動します.

$ cd lawyer-card-wxss
$ cnpm install
$ npm run dev

このとき,WeChat開発者ツールでプロジェクトディレクトリをインポートし,実行して効果を見る.

ステップ5:vantコンポーネントの追加

さっきのコマンドウィンドウに戻っても、プロジェクトディレクトリの下にvantコンポーネントの依存を追加します.

$ cnpm i vant-weapp -S --production

実行後、packageにアクセスできます.jsonファイル、dependenciesにvant-weappが含まれているかどうかを確認し、ある場合は追加に成功したことを示します.次に、プロジェクトのbuild/webpackを開きます.base.conf.jsファイル、baseWebpackConfig.plugins配列にCopyWebpackPluginを1つ追加します.主にmpvueが微信ウィジェットにコンパイルして言語を開発する際にvantコンポーネントをディレクトリにコピーするため、そうすればプロジェクトに見つかる.

    new CopyWebpackPlugin([
      {
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }
    ])

ステップ6:vantをコードで参照

src/app.jsonファイルは、ボタンコンポーネントなどのコンポーネントをグローバルに参照します.

"usingComponents": {
  "van-button": "vant-weapp/dist/button/index"
}

トップページのファイルにボタンのコードを入れて、効果を見てみましょう.
プロジェクトを実行し、微信開発者ツールを見てみましょう.

$ npm run dev

WeChat開発者ツールコンソールが間違っていることがわかりました
thirdScriptError sdk uncaught third Error Unexpected token export SyntaxError: Unexpected token export
解決方法ES 6をES 5のチェックボックスに回し、フックします
このようにして、トップページが表示され、vantのボタンが正常に表示されます.mpvue+vant構築成功!!!次の記事では、flyioを導入する方法を紹介します.微信ウィジェットはmpvue+vant+flyioを構築します.
ここでmpvue-vant-flyioという名前のプロジェクトをアップロードしましたが、手順は上記のように操作されていますが、プロジェクト名が異なるだけです.mpvue-vant-flyioプロジェクトソースコード
転載先:https://juejin.im/post/5ca32bf36fb9a05e711b24b5