當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue非编译的模块化写法

發布時間：2023/12/3 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue非编译的模块化写法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

項目目錄

●/
????●index.html
????●js/
????????●main.js
????????●myComponent.js
????????●routes.js
????????●textComponent.js
????????●lib/
????????????●vue.js
????????????●vue-router.js
????????????●require.min.js

一、構建require.js環境

（1）index.html網頁設置require.min.js

<!DOCTYPE html> <html lang="en"> <head></head> <body> <div id="app"><transition name="tsfade" mode="out-in"><router-view ></router-view></transition> </div> </body> <script src="js/lib/require.min.js" data-main="js/main"></script> </html>

（2）js/main.js

require.config({nodeIdCompat: true,baseUrl:'./',paths: {vue : 'js/lib/vue','vue-router': 'js/lib/vue-router',axios : 'js/lib/axios.min',routes : 'js/routes',myComponent : 'js/myComponent',textComponent : 'js/textComponent',}}); require(['vue', 'vue-router','routes','myComponent'],function (Vue, VueRouter,routes, myComponent) {Vue.use(VueRouter);var router = new VueRouter({routes:routes});let vue = new Vue({router: router,components: { myComponent: myComponent},}).$mount('#app'); });

二、vue模塊寫法

（1）js/routes.js

define(['myComponent'],function (myComponent) {const basePath = "";var routes = [{path: '/',name: 'default',redirect: basePath + "/myComponent",},{name: "myComponent",path: basePath + "/myComponent",component: myComponent, }];return routes;})

（2）js/myComponent.js

define(['textComponent'],function (textComponent) {var template =`<div><text-component></text-component><p>{{info}}</p></div>`;let component = {template: template,data() {return {info: '芙蓉區',};},components:{textComponent:textComponent}};return component; });

（3）js/textComponent.js

define(function () {var template =`<div><p>{{text}}</p></div>`;let component = {template: template,data() {return {text: '信息',};}};return component; })

項目地址：https://github.com/90duc/RequireJSVue

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue非编译的模块化写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Vue
写法