Gunakan elemen-UI dalam laravel 5.3 dan bukannya membangun dengan pemisahan bahagian hadapan dan belakang
Mula-mula konfigurasikannya mengikut artikel ini http://codesky.me/archives/tr...
Demo telah dipaparkan seperti biasa. , iaitu, selamat datang .blade.php kelihatan seperti ini:
<!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>Soalan:
1 Idea ini masih agak mengelirukan Saya tidak tahu cara menggunakan komponen elemen-UI Contohnya, gunakan suis berikut http://element.eleme.io/#/zh -...
Kod komponen sepatutnya Di mana untuk meletakkannya? Perlukah ia dijadikan fail .vue atau ditulis terus di lokasi yang diperlukan pada halaman?
<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. Bolehkah elemen borang yang diberikan js ini diserahkan dengan cara tradisional? Atau bolehkah ia hanya diserahkan menggunakan ajax?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Jika bahagian hadapan dan bahagian belakang tidak dipisahkan, anda tidak perlu menyusun fail .vue dengan vue-loader, atau penyemak imbas tidak akan mengenalinya
Sebab mengapa bahagian hadapan dan bahagian belakang tidak dipisahkan ialah kami tidak sanggup melepaskan pelbagai kemudahan yang dibawa oleh rangka kerja bahagian belakang, seperti penghalaan, templat, susun atur, dsb.
Jika anda menggunakan vue dengan cara ini, anda hanya boleh membuang fail berasingan .vue.
Untuk menggunakan vue.js dan pelbagai perpustakaan komponen, seperti emement ui, anda boleh melakukan ini!
Pertama, vue.js boleh diperkenalkan sama seperti jquery.
Kedua, import element.js dan css global secara keseluruhan dan rujuknya dalam vue.
Ketiga, gunakan fungsi susun atur templat bahagian belakang untuk menulis komponen seperti <el-button>
Dengan cara ini, ia bukan lagi aplikasi satu halaman, kerana latar belakang secara automatik akan memanggil templat reka letak keseluruhan asas apabila menghala halaman, yang akan memulakan semula objek vue baharu secara automatik.
Tetapi dengan sesi backend, konfigurasi dan fungsi lain, berkongsi data dan menuntut kredit tidak menjadi masalah.
Kami sedang menggunakan kaedah di atas untuk menguji vue+elemen ui+thinkphp5 Walaupun kami telah kehilangan ciri-ciri aplikasi fail tunggal seperti pemuatan atas permintaan, kami juga telah mendapat manfaat dalam kemudahan lain.
Sama ada bahagian depan dan belakang dipisahkan sepenuhnya atau bahagian depan dan belakang bercampur, anda boleh menggunakan
.vue, dan ia sangat mudah, jadi saya rasa yang terbaik amalannya ialah menulis.vue, termasuk halaman Semua js lain dimuatkan secara seragam oleh pintu masukapp.js, dan kemudian disusun semasabuild. Ini boleh memudahkan penyelenggaraan dan pembinaan semula pada masa hadapan..vue, 而且很方便, 所以我觉得最佳实践是写成.vue, 包括页面所有其他js, 都由app.js入口统一加载, 再在build的时候编译. 这样可以方便以后维护和重构.怎么提交和js渲染没有任何关系, 你用传统的方式写
<button type="submit">就可以让浏览器帮你提交表单. 你监听浏览器事件, 就能在js中做各种操作, 比如ajax提交附：在
🎜Cara menyerahkan tiada kaitan dengan pemaparan js Anda boleh menulisapp.js中加载.vue文件为全局组件, 如Vue.component('post-page', require('./components/PostPage')), 就可以在blade模版中使用<post-page></post-page>,而且Elixir会帮你搞定一切配置, 只需要一行mix.webpack('path/to/app.js')<button type="submit">dengan cara tradisional dan biarkan penyemak imbas menyerahkan borang untuk anda acara penyemak imbas, Anda boleh melakukan pelbagai operasi dalam js, seperti penyerahan ajax🎜 🎜Lampiran: Muatkan fail.vuedalamapp.jssebagai komponen global, sepertiVue.component('post-page', require('. /components /PostPage')), anda boleh menggunakan<post-page></post-page>dalam templatbladedanElixirakan membantu anda mendapatkan semua konfigurasi, hanya satu barismix.webpack('path/to/app.js')sudah memadai🎜