項(xiàng)目所需 前端用vue的element組件 后端用odoo?
1羡滑、為什么選用 element (餓了么)
源自vue vue國(guó)人開(kāi)發(fā) 文檔完善 便于自學(xué) 關(guān)鍵是我以前接觸過(guò) 比react上手快
一開(kāi)始的路線是想直接在template里面引入vue的js在xml混寫(xiě),結(jié)果總是報(bào)錯(cuò),這兩天一直在想辦法解決報(bào)錯(cuò) 最后沒(méi)解決 今晚上只好換路線敷燎,是將vue的整個(gè)項(xiàng)目跟odoo結(jié)合封锉。網(wǎng)上居然沒(méi)有例子,還好可以參考vue+thinkphp的案例,很簡(jiǎn)單煤痕。
2、安裝
2.1 安裝vue/cli ---官方指導(dǎo)的yarn安裝后找不到vue命令
npm install -g @vue/cli
2.2 在odoo模塊目錄下創(chuàng)建應(yīng)用
vue create ele
cd my-app
vue add element
3.在odoo中引用
? 3.1接谨、將已經(jīng)在odoo模塊下創(chuàng)建完成的vue 運(yùn)行 vue run build 生成dist目錄文件
? 3.2摆碉、在xml模板中引用
<!--知識(shí)庫(kù)首頁(yè)-->
? ? <template id="page_konwledge" name="主頁(yè)">
? ? ? ? <link href="knowledge/static/ele/dist/css/app.e11bd876.css" rel="stylesheet"
? ? ? ? ? ? type="text/css" />
? ? ? ? <div id="app">
? ? ? ? </div>
? ? ? ? <script src="knowledge/static/ele/dist/js/app.e87e2d9d.js"></script>
? ? ? ? <script src="knowledge/static/ele/dist/js/chunk-vendors.3b5d4c4b.js"></script>
? ? </template>
3.3 在odoo的controller里每個(gè)路由都渲染id為page_konwledge的模版