1 Vite项目目录

用Vscode打开创建的项目,看到下面的目录结构:

通过运行  npm install 初始化项目后生成两个初始化文件:node_modules和 package-lock.json

2 SFC 语法规范

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

<template>(html)

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

<script>(js)

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

<script setup>(js)

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

<style>(css)

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

3 项目启动命令详解

在终端我们可以通过npm run dev 来启动项目。在我们执行这个命令的时候会去找 package json 的scripts 然后执行对应的dev命令。

那为什么我们不直接执行vite 命令不是更方便吗?由于我们的电脑上面并没有配置过相关命令 所以无法直接执行。

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

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

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

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

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

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

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

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

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

Vue3系列2--项目目录介绍及运行项目的更多相关文章

  1. 【Android Studio安装部署系列】七、真机运行项目

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 简单介绍下真机运行项目的操作步骤. 手机连接电脑 将手机通过数据线连接到电脑上,此时电脑会自动下载安装驱动程序.如果没有安装上的话, ...

  2. vue项目目录介绍

    Vue项目目录 初始化项目 vue init webpack []projectname] cd [projectname] npm install vue run dev 目录树 +---build ...

  3. Vue框架(三)——Vue项目搭建和项目目录介绍、组件、路由

    Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...

  4. Web项目开发介绍及实战项目介绍

    引言 本系列课程我们将学些Golang语言中的Web开发框架Iris的相关知识和用法.通过本系列视频课程,大家能够从零到一经历一个完整项目的开发,并在课程中了解实战项目开发的流程和项目设涉及的各个模块 ...

  5. springboot实战小项目-简要介绍、vue项目创建

    因为菜,所以要好好学习! 一.项目介绍:这是一个后台管理系统,准备实现的功能: 1.登录.注册.个人信息查看.退出登录 2.根据关键字查询用户.新增用户.根据id或者其他字段排序.编辑用户信息.删除用 ...

  6. SpringBoot学习笔记(二)——Springboot项目目录介绍

    官网生成SpringBoot项目 使用官网(https://start.spring.io/)生成一个Maven构建的的SpringBoot项目,下载下来的文件是这个样子的. 导入到IDEA中 为了查 ...

  7. Intellij IDEA gradle项目目录介绍

    Gradle简介 Java的构建,经历了从Ant-->Maven->Gradle的过程,每一次的进步,都是为了解决之前的工具带来的问题: Ant:Ant的功能虽然强大,但过于灵活,规范性不 ...

  8. Node.js项目目录介绍

    新建的项目结构应该是这样 bin:项目的启动文件,也可以放其他脚本. node_modules:用来存放项目的依赖库. public:用来存放静态文件(css,js,img). routes:路由控制 ...

  9. Django项目目录介绍

    一个小问题: 什么是根目录:就是没有路径,只有域名..url(r'^$') 补充一张关于wsgiref模块的图片 一.MTV模型 Django的MTV分别代表: Model(模型):和数据库相关的,负 ...

随机推荐

  1. 什么叫做 Docker

    什么叫做 Docker 本文写于 2020 年 11 月 5 日 没有人会喜欢环境配置 在去年的时候我开始学习 Python,并利用 Python 制作了一些小工具.但问题是我很难让别人去用我的软件, ...

  2. MOSFET, MOS管, 开关管笔记

    MOSFET, MOS管, 开关管 MOSFET, Metal-Oxide-Semiconductor Field-Effect Transistor, 金属氧化物半导体场效晶体管 常见封装 电路符号 ...

  3. R可视化:plot函数基础操作,小白教程

    最近迷恋上了画图,一方面是觉得挺有意思的,另一方面是觉得自己确实画图方面比较弱,所以决定比较系统地回顾反思一下,同时顺带记录下来分享给大家.也确实是好久好久没更新文章了,真的是杂事太多太忙太牵扯精力没 ...

  4. Kafka 生产者解析

    一.消息发送 1.1 数据生产流程 数据生产流程图解: Producer创建时,会创建⼀个Sender线程并设置为守护线程 ⽣产消息时,内部其实是异步流程:⽣产的消息先经过拦截器->序列化器-& ...

  5. unity---给物体施加普通力和位置力

    普通力 让物体沿着某一方向获得一个力,vector3方向 addForceObj.GetComponent<Rigidbody>().AddForce(1000,0,1000); 位置力 ...

  6. 【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图

    需要描述 1)实现黑客帝国文字流效果图,JS功能 2)部署在云中,让大家都可以访问,App Service实现 3)大家都能发送消息,并显示在文字流中,PubSub(websocket)实现 终极效果 ...

  7. Python 3函数的参数冒号注释

    Python 3.7版本,函数的参数可以通过冒号来进行注释 def f(ham: str, eggs: str = 'eggs') -> str : print("Annotation ...

  8. python生产exe文件yi以及解释器配置等

    原文链接:https://blog.csdn.net/weixin_42691768/article/details/81044666 https://www.cnblogs.com/paulwhw/ ...

  9. camunda如何调用HTTP REST(Service Task)服务节点

    ​ Camunda中的Service Task(服务任务)用于调用服务.在Camunda中,可以通过调用本地Java代码.外部工作项.web服务形式实现的逻辑来完成的. 本文重点描述如何使用web服务 ...

  10. 技术分享 | app自动化测试(Android)--App 控件交互

    原文链接 常用操作 点击操作 通常获取到元素之后,可以调用 click() 方法来实现对这个元素的点击操作.示例代码如下: python 版本 driver.find_element_by_id(&q ...