Agregando librerías de un CDN

1.- incluimos contenido externo con un CDN usando : paths 2.- creamos nuestro archivo de piliticas de privacidad que permita hacer solicitudes HTTP a CDNS externos csp_whitelist.xml 3.- creamos nuevo phtml que implementará VUE 4.- creamos nuestro layout para el phtml cms_index_index.xml Mas información de políticas de contenido seguro : https://developer.adobe.com/commerce/php/development/security/content-security-policies/
PerezContrerasLuis · Jun 26, 2022 · 7a8e84c · 7a8e84c
1 parent f0940f6
commit 7a8e84c
Show file tree

Hide file tree

Showing 5 changed files with 12,049 additions and 0 deletions.
diff --git a/code/JavaScriptDev/JsFun/view/frontend/layout/cms_index_index.xml b/code/JavaScriptDev/JsFun/view/frontend/layout/cms_index_index.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceContainer name="content">
+            <block name="vue.test" template="JavaScriptDev_JsFun::vue-test.phtml"></block>
+        </referenceContainer>
+    </body>
+</page>
diff --git a/code/JavaScriptDev/JsFun/view/frontend/layout/csp_whitelist.xml b/code/JavaScriptDev/JsFun/view/frontend/layout/csp_whitelist.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
+    <policies>
+        <policy id="script-src">
+            <values>
+                <value id="jsdelivr" type="host">https://cdn.jsdelivr.net</value>
+            </values>
+        </policy>
+    </policies>
+</csp_whitelist>
diff --git a/code/JavaScriptDev/JsFun/view/frontend/requirejs-config.js b/code/JavaScriptDev/JsFun/view/frontend/requirejs-config.js
@@ -3,5 +3,8 @@ var config =  {
         "*":{
             "fadeInElement":"JavaScriptDev_JsFun/js/fade-in-element"
         }
+    },
+    "paths":{
+        "vue":"https://cdn.jsdelivr.net/npm/vue@2/dist/vue"
     }
 }
diff --git a/code/JavaScriptDev/JsFun/view/frontend/templates/vue-test.phtml b/code/JavaScriptDev/JsFun/view/frontend/templates/vue-test.phtml
@@ -0,0 +1,14 @@
+<div id="vue-test">
+    <h1>{{ message }}</h1>
+</div>
+<script>
+    require(['vue'],function(Vue){
+    'use strict'
+        new Vue({
+            el:'#vue-test',
+            data:{
+                message : 'This is test LuisPC '
+            }
+        })
+    })
+</script>