Vue3系列2--項目目錄介紹及運行項目

来源:https://www.cnblogs.com/lotusflower/archive/2022/07/31/16537603.html
-Advertisement-
Play Games

1 Vite項目目錄 用Vscode打開創建的項目,看到下麵的目錄結構: 通過運行 npm install 初始化項目後生成兩個初始化文件:node_modules和 package-lock.json 2 SFC 語法規範 *.vue 件都由三種類型的頂層語法塊所組成:<template>、<sc ...


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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 上篇文章講到使用MySQL的Explain命令可以分析SQL性能瓶頸,優化SQL查詢,以及查看是否用到了索引。 我們都知道創建索引可以提高查詢效率,但是具體該怎麼創建索引? 哪些欄位適合創建索引? 哪些欄位又不適合創建索引? 本文跟大家一塊學習一下如何創建合適資料庫索引。 ...
  • 使用flink的時候難免和redis打交道,相信大家都使用過flink-connector-redis來處理,但是當我想要使用RedisSink寫入集群時,發現居然不支持使用密碼,於是有了這篇筆記。 ...
  • 2016年是對話式設計之年。消息應用正以驚人的好評度和參與率,占領世界和app store的排行榜。每個社區產品、應用市場、點播服務、約會應用、社交游戲和電商產品,為了提高好評度、參與率和銷量,都已經或即將加入消息功能。 有大量關於對話式UI的討論,還有這種人機對話模式如何通過簡單的指令和文字反饋( ...
  • 視頻地址:https://learning.dcloud.io/#/?vid=0 開發工具:XbuilderX 官方教程:https://cn.vuejs.org/v2/guide/ 序言 Vue.js :漸進式JavaScript框架 Vue.js優點 1.體積小 壓縮後33K; 2.更高的運行效 ...
  • 1.shift+alt+f 格式化代碼(vscode) 2.css的複合選擇器 後代選擇器:選後代(不一定是兒子) 空格隔開 如ol li{樣式聲明} 更好地選擇想要的標簽 也可以用class表示 如 .nav.li.a 子選擇器 >親兒子 並集選擇器 逗號 div,p{樣式聲明} 最後一個選擇器 ...
  • Javascript基礎Day4 函數(下) 作用域(重點) 什麼是作用域,就是一個變數可以生效的範圍 變數不是在所有地方都可以使用的,而這個變數的使用範圍就是作用域 全局作用域 整個頁面起作用,在<script>內都能訪問到; 在全局作用域中有全局對象window,代表一個瀏覽器視窗,由瀏覽器創建 ...
  • Javascript基礎Day3 1、迴圈:重覆執行代碼 特征:有規律性的重覆執行相似代碼 為什麼要使用迴圈? 主要是為了減少頁面代碼 for迴圈: 語法: for(表達式1;表達式2;表達式3){ 代碼 } 表達式1:初始值,定義在for迴圈中需要用的變數 表達式2:判斷條件,判斷初始值是否滿足該 ...
  • Javascript基礎Day2 1、***自增自減運算符: ++、-- ++或--在變數之前時,先給當前變數做加1或減1的操作,然後在把計算結果做其他操作; ++或--在變數之後時,先拿當前變數去做其他操作,然後在給該變數做加1或減1的操作; 2、進位:也稱為進位計數制,常見的進位有二進位,八進位 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...