Utilisez element-UI dans Laravel 5.3 au lieu de développer avec séparation front-end et back-end
Configurez-le d'abord selon cet article http://codesky.me/archives/tr...
La démo s'est affichée normalement. , c'est-à-dire que bienvenue .blade.php ressemble à ceci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<p id="app">
<example></example>
<el-button>Hello</el-button>
</p>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>Questions :
1. L'idée est encore un peu déroutante. Je ne sais pas comment utiliser le composant element-UI. Par exemple, utilisez le commutateur suivant http://element.eleme.io/#/zh. -...
Le code du composant doit être Où le mettre ? Doit-il être transformé en fichier .vue ou écrit directement à l'emplacement requis sur la page ?
<el-switch
v-model="value1"
on-text=""
off-text="">
</el-switch>
<el-switch
v-model="value2"
on-color="#13ce66"
off-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>2. Cet élément de formulaire rendu en js peut-il être soumis de manière traditionnelle ? Ou peut-il être soumis uniquement en utilisant ajax ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si le front-end et le back-end ne sont pas séparés, vous n'avez pas besoin de compiler le fichier .vue avec vue-loader, sinon le navigateur ne le reconnaîtra pas
La raison pour laquelle le front-end et le back-end ne sont pas séparés est que nous ne sommes pas disposés à renoncer aux diverses commodités apportées par le framework back-end, telles que le routage, les modèles, la mise en page, etc.
Si vous utilisez vue de cette manière, vous ne pouvez supprimer que le fichier séparé .vue.
Pour utiliser vue.js et diverses bibliothèques de composants, telles que emement ui, vous pouvez le faire !
Tout d'abord, vue.js peut être introduit tout comme jquery.
Deuxièmement, importez element.js et global css dans leur ensemble et référencez-les dans vue.
Troisièmement, utilisez la fonction de mise en page du modèle back-end pour écrire des composants tels que <el-button>
De cette façon, il ne s'agit plus d'une application monopage, car l'arrière-plan appellera automatiquement le modèle de mise en page globale de base lors du routage de la page, ce qui réinitialisera automatiquement un nouvel objet vue.
Mais avec la session backend, la configuration et d'autres fonctions, partager des données et réclamer du crédit n'est pas un problème.
Nous utilisons actuellement la méthode ci-dessus pour tester vue+element ui+thinkphp5 Bien que nous ayons perdu les fonctionnalités des applications à fichier unique telles que le chargement à la demande, nous avons également bénéficié d'autres avantages.
Que le front-end et le back-end soient complètement séparés ou que le front-end et le back-end soient mélangés, vous pouvez utiliser
.vue, et c'est très pratique, donc je pense que le meilleur la pratique est d'écrire.vue, y compris la page. Tous les autres js sont uniformément chargés par l'entréeapp.js, puis compilés pendant labuild. Cela peut faciliter l'entretien et la reconstruction futurs..vue, 而且很方便, 所以我觉得最佳实践是写成.vue, 包括页面所有其他js, 都由app.js入口统一加载, 再在build的时候编译. 这样可以方便以后维护和重构.怎么提交和js渲染没有任何关系, 你用传统的方式写
<button type="submit">就可以让浏览器帮你提交表单. 你监听浏览器事件, 就能在js中做各种操作, 比如ajax提交附：在
🎜Comment soumettre n'a rien à voir avec le rendu js. Vous pouvez écrireapp.js中加载.vue文件为全局组件, 如Vue.component('post-page', require('./components/PostPage')), 就可以在blade模版中使用<post-page></post-page>,而且Elixir会帮你搞定一切配置, 只需要一行mix.webpack('path/to/app.js')<button type="submit">de la manière traditionnelle et laisser le navigateur soumettre le formulaire pour vous. événements du navigateur, vous pouvez effectuer diverses opérations dans js, telles que la soumission ajax🎜 🎜Pièce jointe : chargez le fichier.vuedansapp.jsen tant que composant global, tel queVue.component('post-page', require('. /components /PostPage')), vous pouvez utiliser<post-page></post-page>dans le modèlebladeetElixirvous aidera à obtenir toutes les configurations, une seule lignemix.webpack('path/to/app.js')suffit🎜