0
点赞
收藏
分享

微信扫一扫

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


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

  • 每个 ​​*.vue​​ 文件最多可同时包含一个顶层 ​​<template>​​ 块。
  • 其中的内容会被提取出来并传递给 ​​@vue/compiler-dom​​,预编译为 JavaScript 的渲染函数,并附属到导出的组件上作为其 ​​render​​ 选项。

  • 每一个 ​​*.vue​​ 文件可以有多个 ​​<script>​​ 块 (不包括​​<script setup>​​)。
  • 该脚本将作为 ES Module 来执行。
  • 默认导出的内容应该是 Vue 组件选项对象,它要么是一个普通的对象,要么是 ​​defineComponent​​ 的返回值。

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

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

npm run dev 详解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# unix Linux macOS 系默认的可执行文件,必须输入完整文件名
vite

# windows cmd 中默认的可执行文件,当我们不添加后缀名时,自动根据 pathext 查找文件
vite

# Windows PowerShell 中可执行文件,可以跨平台
vite

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

MacOS Linux 一般是第一个

举报

相关推荐

0 条评论