Utilisation simple de l'échafaudage Vue

Cet article présente principalement l'utilisation simple de l'échafaudage Vue, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Déclaration préalable

Remarque. : Ma propre compréhension et compréhension de l'échafaudage vue, beaucoup de choses et de compréhensions sont des techniques visuelles, non professionnelles et officielles

webpack

Un outil de construction de projet qui peut compresser css et js dans un fichier. De plus, un serveur de test peut être fourni. Lorsque vous utilisez Webpack, vous pouvez configurer certaines extensions par défaut et alias de chemin pour utiliser directement

importer et exporter

utiliser peut exporter un objet JS. D'autres fichiers JS peuvent utiliser le formulaire export pour importer cet objet à utiliser, mais lors de l'importation, vous devez connaître le nom de l'objet importé et exporté. Si vous utilisez la commande import 对象名 from 路径 pour exporter un objet, les autres fichiers JS n'ont pas besoin de connaître le nom de l'objet exporté lors de l'importation. Vous pouvez personnaliser le nom de l'objet export default

ps :

et sont essentiels dans la spécification es6. Les mots ne sont actuellement implémentés que par un petit nombre de plates-formes exécutant JS. Dans l'échafaudage, ils seront automatiquement convertis en syntaxe correspondante es5 à l'aide de Babel exportimport Le problème de cas de la balise personnalisée. le nom dans le composant

apparaît dans la plupart des navigateurs Lors de l'analyse HTML, le navigateur ne fait pas de distinction entre les balises majuscules et minuscules. Les lettres majuscules de la balise personnalisée seront automatiquement converties en lettres minuscules. Par exemple,

sera converti en première balise, ce qui entraînera une incohérence avec le nom de la balise fourni lors de l'enregistrement et une erreur indiquant que le composant ne l'est pas. enregistré correctement.

<first></first>Si vous utilisez un composant personnalisé et que le code est écrit dans la balise de modèle, il sera analysé en JS lors de l'analyse, qui est sensible à la casse.

Une autre façon d'écrire des composants

---

<template>
    <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
    <p>这是我第一个组件</p>
</template>
<p>
    <first></first>
</p>
<script>
    var myTemplate = {
        template:"#first-c"
    }

    Vue.component("first",myTemplate);
    var app = new Vue({
        el:"#app"
    });
</script>

Créer un projet à l'aide d'un échafaudage

Installer NodeJS

L'installation et le fonctionnement de l'échafaudage dépendent de NodeJS Vous pouvez taper

sur la ligne de commande pour vérifier si NodeJS est installé.

node -vTéléchargez NodeJS

Configurez le chemin global npm

npm config set prefix "D:nodejsnode_global"
Configurez ensuite le premier chemin vers la variable d'environnement en même temps npm config set cache "D:nodejsnode_cache" milieu.
pathConfigurer l'image Taobao npm

npm config set registry https://registry.npm.taobao.orgInstaller vue-cli

Exécuter

dans la ligne de commande.

npm install -g vue-cliCréer un projet de modèle

Le nom du modèle peut être consulté sur https://github.com/vuejs-temp... Il est recommandé d'utiliser webpack. Après

//vue init 模板名 项目名

vue init webpack simple

, utilisez

pour entrer dans le répertoire racine du projet et utilisez

pour installer automatiquement les dépendances du projet. cd 项目名npm installAutres commandes couramment utilisées

Exécutez

dans le répertoire racine du projet pour tester et exécuter le projet, exécutez

pour compiler formellement le projet dans le répertoire dist. npm run devnpm run buildStructure du répertoire

Composant de fichier unique

Supplément : utilisation de jquery et d'autres frameworks dans l'échafaudage Vue

<template>
    <!--template以下才是组件的HTML模板，仍然只能有一个根标签-->
    <p>
        我是一个单文件组件
    </p>
</template>

<script>
export default {
    //无需写template，data仍然以函数返回，其他属性照旧
    data(){
        return {
        }
    },
    props:[],
    methods:{
    }
}
</script>

<!--这个scoped可以让这些样式仅在当前组件生效-->
<style>

</style>

Installez jquery

dans le répertoire racine du projet (notez le cas, jquery et jQuery sont différents).

npm install jquery

webpack.base.conf.js dans le répertoire build

Ajoutez

à la fin de module.exports (faites attention au code JS format, n'oubliez pas d'écrire la virgule) Après

const webpack = require("webpack")

, vous devez utiliser des composants jquery pour importer juuery, tels que

plugins: [
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery"
    })
]

Ce qui précède est tout le contenu de ce article, j'espère qu'il sera utile à l'apprentissage de tout le monde, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

<script>
    import $ from &#39;jquery&#39;
    export default{
        data(){
            return {
                users:null
            }
        },
        created(){
            $.get("http://127.0.0.1:3000/all_user",function(data){
                this.users = data;
            }.bind(this))
        }
    }
</script>

Recommandations associées :

Structure des fichiers et mécanisme de fonctionnement du code source de Vue

La valeur de retour de then et catch in Exemples de promesse ES6 de

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!