首页 > 其他分享 >如何用Angular or Vue 来 实现Dynamics 365 WebResource 开发

如何用Angular or Vue 来 实现Dynamics 365 WebResource 开发

时间:2023-11-13 15:59:43浏览次数:24  
标签:Vue cli WebResource webresource 组件 相关 Dynamics Angular 路由

第一步: 构建Angular 项目,可以使用Visual Studio 的项目模版创建(含.net Core相关 )或者使用 Angular cli 创建,我习惯使用angular cli 

    执行以下命令: ng new 项目名称,回车

    

    可以选择含路由,style 是CSS or LESS 根据所需选取,稍等几分钟(取决于网络,会download 各种npm 所需组件),完成后,CD命令进入项目

    

    所有npm 安装完成后

    

第二步:开发Angular 项目

    根据需求创建相关的组件,举例:目前需要Account 和Contact 个需要相关自定义页面,可使用相关cli  

    ng g c 组件名称,可根据需要选择是否生成测试,这里默认生成所有

    

 第三步:定义相关路由,主要用作测试验证  

    默认主页 

    /account 和 /account/detail

    /contact  

    

    

 

     修改Base Route 和部分相关代码,主要用于本地和dynamics 调试 index.html 和 app.module.ts

    

    

              參數傳遞:  表单加载时传递formcontext 和Xrm 对象给 webresource 可参照:https://www.dancingwithcrm.com/how-to-pass-formcontext-to-html-webresource/

 

    

    

 

第四步:build  

    

    根据webresource路径和路由信息修改对应的引用文件路径。

    

 

最后:测试不同的路径访问。

    

 

   

 

标签:Vue,cli,WebResource,webresource,组件,相关,Dynamics,Angular,路由
From: https://www.cnblogs.com/Breezyfantasy/p/17829318.html

相关文章

  • vueCropper使用教程
    vueCropper使用教程1、使用步骤1.1、安装vue-croppernpminstallvue-croppermain.js里面使用importVueCropperfrom'vue-cropper'Vue.use(VueCropper)组件内使用import{VueCropper}from'vue-cropper'components:{ VueCropper}1.2、基本使用方法<!--外层......
  • vuejs3.0 从入门到精通——provide、inject、mixins、extends
    provide、inject、mixins、extends一、provide二、inject三、mixins四、extendshttps://cn.vuejs.org/api/options-composition.html#mixins 一个包含组件选项对象的数组,这些选项都将被混入到当前组件的实例中。interfaceComponentOptions{mixins?:ComponentOptio......
  • Vue组件的命名规范
    给组件命名有两种方式,一种是使用链式命名my-component,一种是使用大驼峰命名MyComponent,在字符串模板中<my-component></my-component>和<MyComponent></MyComponent>都可以使用,在非字符串模板中最好使用<MyComponent></MyComponent>,因为要遵循W3C规范中的自定义组件名(字母......
  • vue3搭建
    一、Vue3介绍://创建一个Vue实例constapp=Vue.createApp({data(){return{message:'HelloVue!'}}})app.mount('#app')二、安装Vue3:npminstall-g@vue/cli#或者yarnglobaladd@vue/clivuecreatemy-project三、开始开发:<te......
  • vue2 和 vue3 什么区别
    GitHubCopilot:Vue2和Vue3在许多方面都有所不同,以下是一些主要的区别:CompositionAPI:Vue3引入了CompositionAPI,这是一种新的方式来组织和复用代码。这是与Vue2OptionsAPI相比的一个重大改变。性能:Vue3在性能方面进行了大量优化,包括更小的框架大小,更快......
  • 11 13vue代码优化
    今天基本学完了前端vue,整理vue:接口封装//定制请求的实例//导入axios npminstallaxiosimportaxiosfrom'axios';import{ElMessage}from'element-plus'//定义一个变量,记录公共的前缀 , baseURL//constbaseURL='http://localhost:8080';constbaseURL=......
  • vue十三
    <divid="app13">希望翻译成为:<br><selectv-model="obj.lang"><optionvalue="english">英语</option></select><br>请输入:<label......
  • vue十四
    <divid="app14"><button@click="num=num+1">++</button><span>{{num}}</span></div><script>constapp14=newVue({el:'#app14',......
  • 解决vue-element-admin安装报错npm ERR! code 128
    在安装vue-element-admin的npminstall的时候报错npmERR!code128npmERR!AnunknowngiterroroccurrednpmERR!commandgit--no-replace-objectsls-remotessh://[email protected]/nhn/[email protected]:Permissiondenied(publickey).npmERR!fatal:......
  • 使用vue路由
    1.安装vue-router对应版本号为233344使用以下命令[email protected]或者[email protected].在main.js里面使用vue-routerimportVuefrom'vue'importAppfrom'./App.vue'importVueRouterfrom'vue-router'Vue.config.product......