VUE框架模块化开发和实现原理解析------VUE框架

旧约Alatus

已于 2023-11-24 14:29:29 修改

阅读量61

点赞数 1

分类专栏： # VUE框架前端文章标签：前端 javascript 开发语言 vue.js vue node.js 前端框架

于 2023-10-04 10:50:50 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/133546237

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  
  <Hello></Hello>
  <Hello></Hello>
</template>

<script>
//组件化开发,每一个都是组件,插入的内容都是模块化的
import Hello from './components/Hello.vue'
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    Hello
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<template>

<img alt="Vue logo" src="./assets/logo.png">



<Hello></Hello>

<Hello></Hello>

</template>

<script>

//组件化开发,每一个都是组件,插入的内容都是模块化的

import Hello from './components/Hello.vue'

// import HelloWorld from './components/HelloWorld.vue'

export default {

name: 'App',

components: {

Hello

// HelloWorld

}

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

<template>
    <h1>Hello</h1>
</template>
<script>

</script>
<style>

</style>
<template>

<h1>Hello</h1>

</template>

<script>

</script>

<style>

</style>

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    
  </body>
</html>
<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<title><%= htmlWebpackPlugin.options.title %></title>

</head>

<body>

<noscript>

<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

</noscript>

<div id="app"></div>



</body>

</html>