关于vue3:vue3组合式开发构建之HTMLJS-和-VUE文件乱谈

0次阅读

共计 2171 个字符，预计需要花费 6 分钟才能阅读完成。

在 vue3 组合式开发时有三种构建文件，后缀别离为.html、.js 和 .vue。搞不懂这些不同的文件干麻，全部都是.js 或全部都是.vue 不好吗？懵懵懂懂照着教程这样写着，反正都是一阵 import 乱引，随着学习的深刻，缓缓思考着这些文件间的关系和这样做的原理。一点浅解，在此乱谈

<div id="app"></div>
<script type="module" src="/src/main.js"></script>     //src导入法
<script type="module"> import test from './src/main.js'</script>   //import 引入法

html 是万物之始！通过原始标签能够搁置 html、JS、CSS。留神这里的 type=”module”，开启了 import 引入标准。
在标签内用 src=”main.js” 与在代码行里用 import 引入的区别：

标签内引入，门路后面不必加“&nbsp .”，引入即执行，/main.js文件不必 export default 导出
代码行用 import 引入，要加“&nbsp .”，/main.js文件要用 export default 导出
.html 文件能够搁置 html 标签，通过 <script> 能够搁置 JS 代码，通过 <style> 能够搁置 CSS。

import {createApp} from 'vue'
import App from './App.vue'
import router from './router.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
createApp(App).use(router).mount("#app")  //router 要在 mount 之前，否则 <router-link> 标签不失效
// 将下面归一行式的另类离开式写法，此写法能够通过 app. 的形式生成全局变量、组件等
const app=createApp(App)                 
app.use(router)                         
app.mount("#app")
// 如.html 文件是代码行 import 引入，此处要用 export default 导出
export default
app
app.use(router)
app.mount("#app")

js 是万能之神！通过函数能够操作 html、JS、CSS。留神默认导出必须用 export default

要用 import 引入的文件，必须用 export、export default 导出才能够
.js 文件能够搁置 JS 代码，不能间接搁置 html 标签，只能通过 js 办法间接搁置 html 标签。

<script setup> </script >
<template><Hello/></template>
<style scoped>.logo {height: 6em}</style>

Vue 是众神之子！可得心应手的操作 html、JS、CSS 处处便当。留神 <script > 标签内的 setup 和 <style> 标签内的 scoped。

Vue 文件包函三局部：逻辑 (Script)，模板 (template) 和款式 (style)
Vue 文件默认导出 (template) 局部（不需用 export default 语句），不会默认导出 (Script)与(style) 局部
(Script)局部可通过 export default 追加到默认里，import 后通过 lo.setup().count.value 应用追加的变量。
留神留神 <script > 标签内的 setup 的语法糖。没有语法糖，默认导出要用 setup（）办法，在办法里应用 retun{}才行，代码如下：
```
export default {setup() {const count = ref(1);
        function add() {}
        return {
          count,
          add
        }
      }
    }
```
退出语法糖代码如下：
```
        const count = ref(1);
        function add() {}      
```
退出语法糖，import 后通过 lo.setup(__props, { expose}).count.value 应用追加的变量。留神 setup（）中必须要__props, {expose}两个参数
(Script)能够用 export 一般导出，import 导入时的混合写法 import XX，{YY} from ‘rul’。留神默认导入不加括号一般导入要加大括号(不倡议应用一般导出)
逻辑 (Script)，模板 (template)间的关系：逻辑部是对模板的撑持，
- 对外部 import进来的文件不会被动运行，不会被动响应模板部，须要申明或调用才失效。如下代码通过 export default 裸露导入的文件中的模板代码，并用 components: 属性将代码响应到模板部
```
export default {
  components: {lo}}
```
  留神：如果退出了 setup 语法糖，则不须要如上代码裸露和响应，导入即可间接应用
- 对外部的变量办法等，也是通过 export default 裸露能力供模板部应用，如 export default 裸露 setup（）办法等。同样有 setup 语法糖简写款式。
- 默认逻辑部只对本文件体的模板无效，如要引响父或子，需采纳非凡的办法才行。