Comment vue.js crée de grandes applications d'une seule page

Cet article présente en détail comment utiliser l'outil d'échafaudage vue.js vue-cli pour créer une grande application d'une seule page. C'est très pratique. Les amis dans le besoin peuvent se référer à

avant. Prérequis :

Familier avec Javascript + HTML5 + css3.
Comprendre les modules du module ES2015 (export, import, export-default).
Comprendre les connaissances de base de nodejs, les commandes npm courantes et l'utilisation du script npm (npm est utilisé pour la gestion des packages dans le projet vue).
Comprendre l'outil de packaging webpack (options de configuration courantes et concepts de chargeur). (webpack webpack.github.io/ est un outil d'empaquetage de modules. Il traite chaque fichier d'un groupe de fichiers comme un module, découvre leurs dépendances et les regroupe dans des ressources statiques déployables. L'utilisation de webpack nécessite également la méthode d'installation npm ).

Démarrez l'installation :

Créez une grande application d'une seule page à l'aide de vue-cli : l'outil d'échafaudage de vue.js.

Exécutez le code suivant pour terminer la construction de base du projet (le webpack, l'installation des packages dépendants et la génération des répertoires de base ont été configurés).

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Répertoire principal :

├── build // Configuration de base du webpack, configuration de l'environnement de développement, configuration de l'environnement de production
├── config // Chemin, port et réponse Configurer l'agent
├── dist // Ressources statiques packagées par webpack
├── node_modules // Packages de dépendances installés par npm
├── src // Fichier principal front-end
│ ├ ─ ─ actifs // ressources statiques
│ │ ├── police
│ │ ├── img
│ │ └── scss
│ ├── composants // Composant unique
│ │ ├── xxx.vue // Composant de fichier unique
│ ├── routeur // Configuration du routage
│ ├── store // Variable globale
│ ├── App.vue // Composant d'application
│ ├── main.js Fichier d'entrée principal
├── static // Fichier statique
├── .babelrc // Éléments de configuration babel
├── .editorconfig // Élément de configuration de l'éditeur
├── .gitignore // Répertoire qui ignorera la vérification de la syntaxe
├── index.html // Page d'entrée
├── package.json // Description du projet et dépendances
package.json description du fichier : description du projet et dépendances

1. scripts : quelques commandes pour compiler le projet

Exemple : exécuter npm run dev, c'est-à-dire exécuter le nœud build/dev correspondant dans scripts-server .js.

2. dépendances : dépendances à la sortie du projet

Exemple : exécutez npm install wx --save, c'est-à-dire installez le module dépendant wx.

3. devDependencies : Dépendances pendant le développement du projet

Exemple : Exécutez npm install sass --save-dev, c'est-à-dire installez le module dépendant sass.

Pièce jointe : instructions liées à npm :

npm est un outil de gestion de versions Node.js et de gestion des packages de dépendances qui utilise l'environnement de nœud pour installer les packages de dépendances requis pour Front -fin des projets de construction.

La vitesse de téléchargement de l'installation npm est trop lente, utilisez Taobao Mirror cnpm install pour installer rapidement. Méthode de paramétrage :

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

Processus de chargement du projet :

Page index.html

actuelle. Le projet de construction est SPA (Single Page Application), et la page index.html est la page d'entrée, et les métaconfigurations et autres configurations de page associées sont effectuées.

Le 4c766faa15dbdc3e0301dfaffd03c28d94b3e26ee717c64999d7867364b1b4a3 de la page monte le composant principal.

2. main.js : fichier d'entrée principal

Remarque : défini dans webpack.base.config -> entrée : { app: './src/main.js'}

Ce fichier initialise l'instance de vue et introduit le module correspondant (vous devez confirmer la configuration et l'installation dans package.json avant d'importer. Vous trouverez ci-joint l'introduction et la description de main.js :

import Vue). from 'vue' //Introduire vue

importer l'application depuis './App' //Introduire le composant principal App.vue

importer le routeur depuis './router' //Introduire la configuration du routage file

import axios from 'axios' // Présentez l'outil de requête réseau axios

3 App.vue : Le composant principal

est monté dans l'entrée index.html. page et le composant principal est monté dans la page d'entrée index.html. Le composant principal est introduit dans le fichier d'entrée principal main.js.

Après avoir créé d'autres composants (par exemple : /src/components/xxx.vue), ils peuvent être rendus dans le composant principal actuel via la configuration du routage.

4. Configuration du routage vue-router

Configuration du routage : mappez les composants aux routes (routes), puis indiquez à vue-router où les restituer

npm install vue- routeur
importer Vue depuis 'vue'

importer le routeur depuis 'vue-router'

Vue.use(Router)

/// 1. Définir le composant (routage) : import (composant fichier unique dans l'application actuelle).
importer Home depuis '../components/Home.vue'

// 2. Définissez les routes et créez des instances de routeur, puis transmettez la configuration des `routes`
// Chaque route doit être mappée une à une composants.
var router = {}

export default router = new Router({
routes : [
{
chemin : '/',
nom : 'home',
composant : Accueil
}
]
})

// 3. Créez et montez l'instance racine dans le fichier d'entrée principal main.js.
// Pensez à injecter des routes via les paramètres de configuration du routeur,
// pour que l'ensemble de l'application dispose d'une fonctionnalité de routage

new Vue({
el: '#app',
routeur,
modèle : '578d07aa9e36ca6b43806c9706879c6d',
composants : { App }
})

// Maintenant, l'application a été lancée !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser le modèle et les hooks Vue-Router (tutoriel détaillé)

Utiliser vue- dans vue-cli Le routeur construit la barre de navigation inférieure (tutoriel détaillé)

Comment utiliser select pour charger des données et sélectionner la valeur par défaut dans AngularJS ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!