ステップ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開発者ツールに戻ってコンパイルします。 、それだけです: