首页 > 其他分享 >vue+odoo前后端搭建

vue+odoo前后端搭建

时间:2023-10-28 23:55:07浏览次数:34  
标签:xml vue cli element 报错 odoo 搭建

项目所需 前端用vue的element组件 后端用odoo 

1、为什么选用 element (饿了么)

源自vue vue国人开发 文档完善 便于自学 关键是我以前接触过 比react上手快

一开始的路线是想直接在template里面引入vue的js在xml混写,结果总是报错,这两天一直在想办法解决报错 最后没解决 今晚上只好换路线,是将vue的整个项目跟odoo结合。网上居然没有例子,还好可以参考vue+thinkphp的案例,很简单。

2、安装

2.1 安装vue/cli ---官方指导的yarn安装后找不到vue命令

npm install -g @vue/cli

2.2 在odoo模块目录下创建应用

vue create ele

cd my-app

vue add element

3.在odoo中引用

  3.1、将已经在odoo模块下创建完成的vue 运行 vue run build 生成dist目录文件

  3.2、在xml模板中引用

<!--知识库首页-->

    <template id="page_konwledge" name="主页">

        <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里每个路由都渲染id为page_konwledge的模版



标签:xml,vue,cli,element,报错,odoo,搭建
From: https://www.cnblogs.com/pythonClub/p/17795345.html

相关文章

  • Vue快速启动
    VUE快速启动建议下载nvm,管理node.js版本,可以指定下载or卸载or使用xx.xx.xx版本nvm控制node.js版本,vue要求node.js至少16以上,node.js包含npm,下载node.js即可查看npm镜像使用状态。如不是淘宝镜像推荐切换为淘宝镜像,可加快下载速度npmconfiggetregistry返回https:/......
  • Kotlin+DataBinding的使用以及和Vue的比较
    随着移动应用前端化越来越严重,原生应用开发的比重逐渐降低,慢慢被微信小程序/ReactNative/Weex/H5+/混合应用等替代,而这些前端化的技术栈中,mvvm模式最受推崇。google在2015年的I/O大会就推出了mvvm模式的DataBinding框架,而在实际项目中被使用的情况并不多,在前端技术快速发展的今天,m......
  • React学习一:环境搭建、JSX基础、事件绑定、组件使用、样式控制
    一、概念React由Meta公司研发,是一个用于构建Web和原生交互界面的库。react中文文档地址:https://zh-hans.react.dev/learnReact的优势相较传统基于DOM开发的优势:组件化的开发方式;不错的性能相较于其他前端框架的优势:丰富的生态;跨平台支持二、环境搭建首先和vue项目一样,项目......
  • 使用Ocelot搭建网关Gateway
    一、Ocelot官网和学习地址官网:https://threemammals.com/ocelotGit:https://github.com/ThreeMammals/Ocelot文档:https://ocelot.readthedocs.io/en/latest/index.html二、搭建网关Gateway1.新建一个WebAPI服务进程,独立进程完成网关请求转发,承上启下。......
  • web前端(Vue2.x)接收H264实时视频码流(二进制)进行播放
    1、安装 [email protected]、.vue文件中使用<template><div><videoid="dom_id"muted="muted"controlsclass="video_box"></video><divv-if="!has_data"v-loading="!......
  • vue 自定义指令
    v-if="yes"if就是指令ID,yes是expressionVue.directive(id,definition)接入两个参数,id是指令ID,definition是定义对象。定义对象可以提供一些钩子函数:bind:初始化的时候绑定inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)update:数据更新的时候......
  • go 环境搭建
    下载go 编辑器https://www.jetbrains.com.cn/go/ 激活工具可以留言,我看到就回复。(保存在阿里云盘) 编辑器配置 GOPROXY=https://goproxy.cn,direct......
  • 机房WSUS服务器搭建方案-概述
    拓扑如下单个WSUS服务器在单个WSUS服务器方案中,在服务器内部网络建立一个运行WSUS的服务器,它直接将内容与MicrosoftUpdate同步,然后再将更新分发到客户端计算机,如上图所示。有几点需要注意:1.如果已经有其它IIS站点了,安装时不能选择IIS默认网站。2.WSUS服务器必须安装BIT......
  • vue中使用axios请求post接口为什么先发起OPTIONS请求再发起post请求?
    在使用Axios进行跨域POST请求时,浏览器会先发起一个OPTIONS请求,这是因为浏览器执行了跨域请求时的预检请求(PreflightRequest)。这是一个安全性措施,旨在确保跨域请求不会导致安全风险。1、跨域请求的安全性:当前端应用和后端API位于不同的域或端口时,浏览器会执行同源策略,以防止跨站点......
  • 手撕Vuex-实现getters方法
    经上一篇章介绍,完成了实现共享数据的功能,实现方式是在Store构造函数中将创建Store时将需要共享的数据添加到Store上面,这样将来我们就能通过this.$store拿到这个Store,既然能拿到这个Store,我们就可以通过.state拿到需要共享的属性。除了可以通过.state拿到共享数据之......