学习Vue3 第三章(Vite目录 & Vue单文件组件 & npm run dev 详解)

简介: index.html 非常重要的入口文件 (webpack,rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件,他刚开始不会编译这些js文件 只有当你用到的时候 如script src="xxxxx.js" 会发起一个请求被vite拦截这时候才会解析js文件)

Vite目录


public 下面的不会被编译 可以存放静态资源


assets 下面可以存放可编译的静态资源


components 下面用来存放我们的组件


App.vue 是全局组件


main ts 全局的ts文件


index.html 非常重要的入口文件 (webpack,rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件,他刚开始不会编译这些js文件 只有当你用到的时候 如script src="xxxxx.js" 会发起一个请求被vite拦截这时候才会解析js文件)

vite config ts 这是vite的配置文件具体配置项 后面会详解


VsCode Vue3 插件推荐 Vue Language Features (Volar)


SFC 语法规范


*.vue 件都由三种类型的顶层语法块所组成:<template>、<script>、<style>


<template>


  • 每个 *.vue 文件最多可同时包含一个顶层 <template> 块。


  • 其中的内容会被提取出来并传递给 @vue/compiler-dom,预编译为 JavaScript 的渲染函数,并附属到导出的组件上作为其 render 选项。


<script>


  • 每一个 *.vue 文件可以有多个 <script> 块 (不包括<script setup>)。


  • 该脚本将作为 ES Module 来执行。


  • 默认导出的内容应该是 Vue 组件选项对象,它要么是一个普通的对象,要么是 defineComponent 的返回值。


<script setup>


  • 每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)


  • 该脚本会被预处理并作为组件的 setup() 函数使用,也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。


<style>


  • 一个 *.vue 文件可以包含多个 <style> 标签。


  • <style> 标签可以通过 scoped 或 module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混

npm run dev 详解


在我们执行这个命令的时候会去找 package json 的scripts 然后执行对应的dev命令


6acb806d8ffa485ca5d82080fa812889.png


那为什么我们不直接执行vite 命令不是更方便吗


应为在我们的电脑上面并没有配置过相关命令 所以无法直接执行


a336be16f8464405be0adea96e7ceed6.png


其实在我们执行npm install 的时候(包含vite) 会在node_modules/.bin/ 创建好可执行文件


.bin 目录,这个目录不是任何一个 npm 包。目录下的文件,表示这是一个个软链接,打开文件可以看到文件顶部写着 #!/bin/sh ,表示这是一个脚本


a16de7a134e44c81b1501da1767432a6.png

4cfa1c01ea6d46938fcbdf972c49db48.png


在我们执行npm run xxx  npm 会通过软连接 查找这个软连接存在于源码目录node_modules/vite


e5fdf294051e4953b6e70e31345d220c.png


所以npm run xxx 的时候,就会到 node_modules/bin中找对应的映射文件,然后再找到相应的js文件来执行


1.查找规则是先从当前项目的node_modlue /bin去找,


2.找不到去全局的node_module/bin 去找


3.再找不到 去环境变量去找


07db23d9dcd142eda151cb0203c91495.png


node_modules/bin中 有三个vite文件。为什么会有三个文件呢?


# unix Linux macOS 系默认的可执行文件,必须输入完整文件名
vite
# windows cmd 中默认的可执行文件,当我们不添加后缀名时,自动根据 pathext 查找文件
vite
# Windows PowerShell 中可执行文件,可以跨平台
vite


我们使用windows 一般执行的是第二个


MacOS Linux 一般是第一个

目录
打赏
0
0
0
0
178
分享
相关文章
为什么npm run serve正常,npm run build就报错:digital envelope routines::unsupported
通过本文的分析,我们详细介绍了 `npm run serve`正常但 `npm run build`时报错:`digital envelope routines::unsupported`的原因及解决方案。主要从检查Node.js版本、更新依赖、检查依赖库、配置文件及环境变量等方面进行了深入探讨。希望本文能帮助开发者解决这一问题,确保项目顺利构建和部署。
184 6
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
67 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
64 1
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
55 1
vue学习第四章
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
47 1
vue学习第7章(循环)
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
57 1
vue学习第九章(v-model)
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
64 1
vue学习第十章(组件开发)
vue学习第十一章(组件开发2)
欢迎来到我的博客,我是瑞雨溪,一名自学前端两年半的大一学生,专注于JavaScript与Vue。本文介绍Vue中的插槽(slot)使用方法,包括基本插槽、具名插槽及作用域插槽,帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助,请关注我,持续更新中!🎉🎉🎉
43 1
vue学习第十一章(组件开发2)
vue学习第十二章(生命周期)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期,从初始化到销毁各阶段的关键钩子函数及其应用场景,帮助你更好地理解Vue的工作原理。如果你觉得有帮助,欢迎关注我,将持续分享更多优质内容!🎉🎉🎉
61 1
vue学习第十二章(生命周期)

热门文章

最新文章

推荐镜像

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等