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
  • 一、引言:什麼是 JSON JSON (Java Script Object Notation) 是一種很常用的數據格式,它常常用在 web 應用程式中。它可以表示結構化的數據。 下麵是常見的 JSON 文件結構 { "name": "Kamishiro Rize", "age": "22", "o ...
  • 前言 大家好,我是蝸牛,在上一篇中,我們介紹了不同版本的HTTP區別和發展背景,這篇文章我們來聊聊HTTP的缺點,HTTP缺點大致總結有以下三點: 通信使用明文(不加密),內容可能會被竊聽。 不驗證通信方的身份,因此有可能遭遇偽裝(客戶端和服務端都有可能) 無法證明報文的完整性,有可能會被篡改。 其 ...
  • resultMap處理欄位和屬性的映射關係 如果欄位名與實體類中的屬性名不一致,該如何處理映射關係? 第一種方法:為查詢的欄位設置別名,和屬性名保持一致 下麵是實體類中的屬性名: private Integer empId; private String empName; private Integ ...
  • 大家在看到這篇文章前,為了有一個舒適的c++IDE,一定感受到了Dev-c++的廉價感,Clion功能的多餘,VS的臃腫。他們也有自己的優點,但糟點太多,令人十分難受。而VS Code,可以取長補短。下麵的配置內容,可以讓你在刷題時,享受絲滑的動畫,體會集成終端的方便,讓你覺得Coding不再枯燥。 ...
  • 給定一個不含重覆數字的數組 nums ,返回其 所有可能的全排列 。你可以 按任意順序 返回答案。 示例 1: 輸入:nums = [1,2,3] 輸出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 示例 2: 輸入:nums = [0,1] 輸 ...
  • 設計模式的目的 編寫軟體過程中,程式員面臨著來自 耦合性,內聚性以及可維護性,可擴展性,重用性,靈活性 等多方面的 挑戰,設計模式是為了讓程式(軟體),具有更好 代碼重用性 (即:相同功能的代碼,不用多次編寫) 可讀性 (即:編程規範性, 便於其他程式員的閱讀和理解) 可擴展性 (即:當需要增加新的 ...
  • 本文講解了決策樹的創鍵的過程,包括熵,信息增益的計算,還有決策樹的創建,以及使用matplotlib讓決策樹可視化的詳細過程 ...
  • ♠ use C++11 倍數 若 $a,b,k \in \mathbb N$,且 $a \times k=b$,那麼 $b$ 是 $a$ 的倍數,稱 $a$ 整除 $b$,記作 $a \mid b$。 $[1,n]\in \mathbb N$ 中 $x \in \mathbb N$ 的倍數有 $\l ...
  • LinkList可以定義指向List的指針 1.當函數參數為LinkList L時,意味著只改變或操作List的內容,而不需要改變L這個指針 如 Status GetElem(LinkList L,int i,ElemType) 2.當參數為LinkList &L時,意味著需要改變或操作L這個指針本 ...
  • Spring 5框架 一、Spring概念 1、Spring是輕量級的JavaEE框架 2、Spring可以解決企業應用開發的複雜性 3、Spring有兩個核心部分:IOC和AOP ​ 1)IOC:控制反轉,把創建對象過程交給Spring進行管理 ​ 2)AOP:面向切麵,不修改源代碼進行功能增強 ...