三种类型文件

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

.html

<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。

.js

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 defaultappapp.use(router)app.mount("#app")

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

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

.vue

<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语法糖简写款式。
    • 默认逻辑部只对本文件体的模板无效，如要引响父或子，需采纳非凡的办法才行。