mpVue入門

ステップ1:プロジェクトを初期化する

Vue.jsコマンドラインツールvue-cliを使用すると、ターミナルウィンドウにいくつかの簡単なコマンドを入力するだけで、ホットリロード、保存時の静的チェック、組み込みのコード構築機能を備えた小さなプログラムプロジェクトをすばやく作成して開始できます。 :

# 全局安装 vue-cli
$ npm install --global vue-cli

/* 这一步我是需要,但是也有人不需要,大家看着办,npm不行就用 cnpm */
# 全局安装 @vue/cli-init
$ npm install -g @vue/cli-init

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
或
$ npm start

作成後、最初に.eslintignoreファイルを開き、これら2つの文を入力します。便宜上、最初にこれら2つのファイルをチェックしないようにします。
ここに画像の説明を挿入
次に、WeChat開発者ツールを起動し、プロジェクトをインポートして、最初のページにプレビューするだけです。 .mpvueアプレット。
ここに画像の説明を挿入

ステップ2:メインページの一部を作成する

最初に自動生成されたページを非表示にし、自分で作成し、元のsrcフォルダーをsrc-demoに変更して、新しいsrcフォルダーを
ここに画像の説明を挿入
自分で
ここに画像の説明を挿入
作成します。次に、自分のsrcフォルダーに新しいapp.vueファイルを作成します。.js:
ここに画像の説明を挿入
次に、ページフォルダページを作成できます。各ページにはエントリファイルがあることに注意してください。main.js:
ここに画像の説明を挿入
ここに画像の説明を挿入
グローバル構成ファイルを作成します。app.json:
ここに画像の説明を挿入
最後に、前のdistフォルダを削除します。そして再パッケージ化します:(
ここに画像の説明を挿入
このスクリーンショットエラーが発生した場合は、最初にmy-projectをcdしてから、npm start / npm run devを忘れないでください)

最後に、WeChat開発者ツールを開いてコンパイルすると、
ここに画像の説明を挿入
作成したページが表示されます。次に、このページのmain.jsonファイルを作成し、このページの外観を変更できます
ここに画像の説明を挿入
。WeChat開発者ツールに戻ってコンパイルします。 、それだけです:
ここに画像の説明を挿入

ステップ3:メインページの静的ページを完成させる

おすすめ

転載: blog.csdn.net/Jessieeeeeee/article/details/107662408