在laravel 5.3中使用element-UI,不是使用前后端分離的方式開發(fā),
先按照這篇文章進(jìn)行了配置http://codesky.me/archives/tr...
demo已經(jīng)正常顯示,即welcome.blade.php是下面這樣的:
<!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>
問題:
1、思路仍然有點(diǎn)混亂,不知道element-UI組件該怎么使用,比如要使用下面這個開關(guān)http://element.eleme.io/#/zh-...
組件代碼應(yīng)該放哪里?是弄成.vue文件還是直接在頁面需要的位置寫?
<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、這種js渲染的表單類元素,要提交的時候可以用傳統(tǒng)方式提交嗎?還是只能用ajax提交?
學(xué)習(xí)是最好的投資!
前后端不分離的原因是不愿意舍棄后端框架帶來的各種便利,比如路由,模板,布局等等。
這樣使用vue,就只能舍棄.vue單獨(dú)文件。
要使用vue.js及各種組件庫,如emement ui,可以這樣!
一,可以像引入jquery那樣引入vue.js。
二,整體導(dǎo)入element.js及全局的css,并在vue中引用。
三,配合后端的模板布局功能,在局部的模板文件中書寫<el-button>等組件。
這樣用就不再是單頁面的應(yīng)用了,因為后臺在路由頁面時,會自動調(diào)用基礎(chǔ)的總體布局模板,這樣就會自動重新初始化一個新的vue對象。
不過有后臺的session,config等功能,共享數(shù)據(jù)邀功不是問題。
目前正在使用上述方式進(jìn)行vue+element ui+thinkphp5的測試,雖然失去了單文件應(yīng)用的諸如按需加載等特性,但同時在別的方便也獲得了益處。
不管是前后端完全分離還是前后端混合,都可以使用.vue
, 而且很方便, 所以我覺得最佳實踐是寫成.vue
, 包括頁面所有其他js, 都由app.js
入口統(tǒng)一加載, 再在build
的時候編譯. 這樣可以方便以后維護(hù)和重構(gòu).
怎么提交和js渲染沒有任何關(guān)系, 你用傳統(tǒng)的方式寫<button type="submit">
就可以讓瀏覽器幫你提交表單. 你監(jiān)聽瀏覽器事件, 就能在js中做各種操作, 比如ajax提交
附:在app.js
中加載.vue
文件為全局組件, 如Vue.component('post-page', require('./components/PostPage'))
, 就可以在blade
模版中使用<post-page></post-page>
,而且Elixir
會幫你搞定一切配置, 只需要一行mix.webpack('path/to/app.js')
即可