Étape 1: initialiser le projet
Avec l'outil de ligne de commande Vue.js vue-cli, il vous suffit de saisir quelques commandes simples dans la fenêtre du terminal pour créer et démarrer rapidement un petit projet de programme avec rechargement à chaud, vérification statique lors de l'enregistrement et fonctions de construction de code intégrées :
# 全局安装 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
Après la création, ouvrez d'abord le fichier .eslintignore et remplissez ces deux phrases. Pour plus de commodité, laissez-le d'abord ne pas vérifier ces deux fichiers:
Ensuite, il vous suffit de démarrer l'outil de développement WeChat, d'importer le projet et de le prévisualiser sur votre première page Une applet mpvue.
Étape 2: Construisez une partie de la page principale
Commencez par cacher la page générée automatiquement, créez-la vous-même, changez le dossier src d'origine en src-demo, et créez vous-même un nouveau dossier src
:
puis créez un nouveau fichier app.vue dans votre propre dossier src: créez un nouveau fichier d'entrée main .js:
Ensuite, vous pouvez créer les pages du dossier de page. Notez que chaque page a un fichier d'entrée main.js:
Créez un fichier de configuration global app.json:
Enfin, supprimez le dossier dist précédent., Et laissez-le reconditionner:
(Cette capture d'écran a des erreurs, n'oubliez pas de commencer par cd my-project, puis npm start / npm run dev)
Enfin, ouvrez notre outil de développement WeChat et compilez-le, et vous pouvez voir la page que nous avons écrite:
Ensuite, nous pouvons créer un fichier main.json pour cette page, et changer l'apparence de cette page:
Revenez à l'outil de développement WeChat pour compiler , C'est ça:
