1. 程式人生 > >解讀vue生成的檔案目錄結構

解讀vue生成的檔案目錄結構

利用node和npm環境我們可以很快的搭建一個vue環境。具體步驟,請看上一篇部落格。搭建完成後,我們可以看到生成的資料夾中包括如下檔案:
這裡寫圖片描述
1、build資料夾是儲存一些webpack的初始化配置。config資料夾儲存一些專案初始化的配置。
2、node_modules是npm載入的專案依賴的模組。
3、src目錄是我們要開發的目錄,開啟是這樣的:
這裡寫圖片描述
其中assets:用來放置圖片
components:用來放元件檔案
app.vue:是專案入口檔案,程式碼如下:
這裡寫圖片描述
App.vue相當於一個元件
main.js是專案的核心檔案。程式碼如下:
這裡寫圖片描述
import Vue from ‘vue’
import App from ‘./App’
import router from ‘./router’
這三句的意思是首先引入vue,然後引入了./App即App.vue檔案。最後一句是引入一段路由配置。
然後是例項化new Vue .el:’#app’意思誰將所有的元件都放在id為app的元素中。components表明引入的檔案,此處就是app.vue這個檔案,這個檔案的內容將以這樣的標籤寫進#app中。
觀察App.vue檔案我們看可以看到一共有三個部分,分別是。
webpack在編譯時可以將.vue檔案中的這三部分抽出來合成cinderella單獨的檔案。
4、static資料夾用來放置靜態資源目錄
5、index.html是首頁入口檔案
6、package.json是專案配置檔案

相關推薦

Vue 開發|檔案目錄結構部署

基於 vue-cli 腳手架生成專案模板基礎上做了些改動,加入了 vue-router ,vuex 等配套設施,本地 dev server 中加入了介面 mock 功能,還增加一個 build server 來預覽 build 結果頁面,前後端通過 spa 的方式實現分離,並相應做了分離後的聯調,部署方案。

解讀vue生成檔案目錄結構

利用node和npm環境我們可以很快的搭建一個vue環境。具體步驟,請看上一篇部落格。搭建完成後,我們可以看到生成的資料夾中包括如下檔案: 1、build資料夾是儲存一些webpack的初始化配置。config資料夾儲存一些專案初始化的配置。 2、node_modules是npm載入的專案依賴的模組。

vue檔案目錄結構

使用node和npm環境,很容易搭建起一個vue環境。搭建完成以後,專案基本結構,如下圖所示:   1、build:   bulid資料夾儲存的是一些webpack的初始化配置   2、config:   config資料夾儲存一些專案初始化的配置   3、node_module:   node_

vue腳手架的目錄結構

code ati ignore src version 環境 版本 說明 pre . |-- build // 項目構建(webpack)相關代碼 | |-- build.js

檔案目錄結構:單級、兩級、多級(樹形)和無環圖目錄結構

檔案目錄結構:單級、兩級、多級(樹形)和無環圖目錄結構 與檔案管理系統和檔案集合相關聯的是檔案目錄,它包含有關檔案的資訊,包括屬性、 位置和所有權等,這些資訊主要是由作業系統進行管理。首先我們來看目錄管理的基本要求: 從使用者的角度看,目錄在使用者(應用程式)所需要的檔名和檔案之間提供

Linux檔案目錄結構詳解 (轉)

  整理自《鳥哥的私房菜》   對於每一個Linux學習者來說,瞭解Linux檔案系統的目錄結構,是學好Linux的至關重要的一步.,深入瞭解linux檔案目錄結構的標準和每個目錄的詳細功

maven專案的檔案目錄結構以及相關檔案的作用

一、說到maven專案,我們首先要提及到的就是當中的pom檔案,相信這個對於大家來說一點都不陌生。這裡我也詳細介紹一下關於pom檔案的內容。每次我們通過eclipse或者idea生成一個maven專案時,專案的根目錄下都會生成一個pom.xml的maven配置檔案。 1、以下的配置檔案是

python基礎——Linux系統下的檔案目錄結構

  單使用者作業系統和多使用者作業系統 單使用者作業系統:指一臺計算機在同一時間只能由一個使用者使用,一個使用者獨自享用系統的全部硬體和軟體資源。   多使用者作業系統:指一臺計算機在同一時間可以由多個使用者使用,多個使用者共同享用系統的全部硬體和軟體資源。 UNIX和Linux

Kubernetes探祕—配置檔案目錄結構

Kubernetes的配置目錄包括/etc/kubernetes、/home/supermap/.kube和/var/lib/kubelet目錄。 下面我們來看一看,這些目錄裡到底有些什麼檔案(作業系統使用Ubuntu 18.04LTS desktop)。 安裝tree命令: sudo apt ins

git生成檔案目錄樹及日誌列印

目錄 如何用git生成一個檔案目錄樹 下載 tree 命令的二進位制包,安裝 tree 命令工具; 目錄結構顯示 Git如何打印出指定格式log 輸出指定格式的日誌資訊 將日誌匯出到指定目錄 給命令設定別名

HDFS檔案目錄結構詳解

HDFS metadata以樹狀結構儲存整個HDFS上的檔案和目錄,以及相應的許可權、配額和副本因子(replication factor)等。本文基於Hadoop2.6版本介紹HDFS Namenode本地目錄的儲存結構和Datanode資料塊儲存目錄結構,也就是hdfs-site.xml中配置的

列出檔案目錄結構

以下程式碼可快速列出所有資料夾,子資料夾下檔案 用tree /f顯示為樹形結構     mypath = wsh.exec("cmd /c tree /f " & Chr(34) & mypath & Chr(34)).StdOut.Read

Vue.js 專案目錄結構

Vue環境搭建 和其他前端開發一樣,Vue.js的開發環境也需要Node.js、npm和webpack等工具的支援。其中,Node.js 就是執行在服務端的JavaScript,npm是一個包管理工具,用來管理Vue.js專案所依賴的包,而webpack則是前端

Linux基礎命令+檔案目錄結構

    Linux命令 語法格式:命令 【選項】 【引數】 關閉Linux系統的命令:init 0 切換虛擬終端的方法:Ctrl+Alt+F[1~6] 普通使用者登入後系統的提示符:$ root使用者登入後系統的提示符:# 退出命令:ex

【Android】【系統】Android檔案目錄結構

system/app:存放系統軟體 system/data:存放系統軟體的資料 data/app:存放使用者安裝的軟體 data/data:存放使用者軟體的資料 storage/emulated/0:儲存卡 storage/sdcard:虛擬路徑,快捷方式,實際

Vue】專案目錄結構說明

├── README.md // 專案說明文件 ├── node_modules // 專案依賴包資料夾 ├── bui

Swift: iOS底層基礎知識-檔案目錄結構

一:iOS沙盒知識 出於安全考慮,iOS系統把每個應用以及資料都放到一個沙盒(sandbox)裡面,應用只能訪問自己沙盒目錄裡面的檔案、網路資源等(也有例外,比如系統通訊錄、照相機、照片等能在使用者授權的情況下被第三方應用訪問) 1:MyApp.app 

linux下檔案目錄結構檔案操作命令

剛學linux,總結下。 檔案目錄結構 linux 是多使用者作業系統,多個使用者可以共享的全部硬體和軟體。 ubuntu沒有盤的概念,有且只有一個根目錄 / ,所有的檔案都在根目錄下面。 根目錄下有個home資料夾,是系統預設的使用者家目錄,新增使用者的家目錄都放在這裡。 其他資料

iOS/iPhone 程式檔案目錄結構以及啟動流程

要想清晰的理解IOS應用程式的啟動過程,毫無疑問需要深入瞭解一下ios應用程式的檔案系統。一個ios應用程式都有一個屬於自己沙盒(sandbox),應用沙盒就是檔案系統目錄,並且與檔案系統的其他部分隔離。應用必須待在自己的沙盒裡,應用既不能訪問其他應用的沙盒,其他應用也不能

python解析Markdown標題生成目錄結構的文件(pyMd2Doc)

1. pyMd2Doc介紹(pip版本) 利用python將markdown轉換成帶可收縮,可跳轉到文字內容的目錄文件。 2. 使用方法 該程式所需python環境為python3或以上。 2.1 準備Markdown檔案 準備好需要轉成文件的Markdown檔