1. 程式人生 > >vue.js的目錄結構簡述

vue.js的目錄結構簡述

目錄/檔案說明
build專案構建(webpack)相關程式碼
config配置目錄,包括埠號等。我們初學可以使用預設的。
node_modulesnpm 載入的專案依賴模組
src

這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案:

  • assets: 放置一些圖片,如logo等。
  • components: 目錄裡面放了一個元件檔案,可以不用。
  • App.vue: 專案入口檔案,我們也可以直接將元件寫這裡,而不使用 components 目錄。
  • main.js: 專案的核心檔案。
static靜態資源目錄,如圖片、字型等。
test初始測試目錄,可刪除
.xxxx檔案這些是一些配置檔案,包括語法配置,git配置等。
index.html首頁入口檔案,你可以新增一些 meta 資訊或統計程式碼啥的。
package.json專案配置檔案。
README.md

專案的說明文件,markdown 格式

這裡面 最重要的還是src目錄的瞭解:

1.src/app.vue檔案

//展示模板

<template>
<div id="app">
<imag src="./assets/logo.png">
<hello></hello>
</div>
</template>

//匯入元件

<script>
//這裡是匯入的component
import Hello from './components/Hello'
export default{
name: 'app',
components:{
Hello
}
}
</script>
<!-- 樣式程式碼 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改Hello.vue中的return值: return:'zlw test';


相關推薦

vsCode編輯Vue.js目錄結構分析

Vue.js 目錄結構 目錄解析 目錄/檔案 說明 build 專案構建(webpack)相關程式碼 config 配置目錄,包括埠號等。我們初學可以使用預設的。 node_modules npm 載入的專案依賴模組 src: 這裡是我們要開發的目錄,基本上要

vue.js目錄結構簡述

目錄/檔案說明build專案構建(webpack)相關程式碼config配置目錄,包括埠號等。我們初學可以使用預設的。node_modulesnpm 載入的專案依賴模組src這裡是我們要開發的目錄,基本

VUE專案目錄結構介紹

build目錄是一些webpack的檔案,配置引數什麼的,一般不用動 config是vue專案的基本配置檔案 node_modules是專案中安裝的依賴模組 src原始碼資料夾,基本上檔案都應該放在這裡。 —assets 資原始檔夾,裡面放一些靜態資源 —components這裡放的都是各個

vue-cli目錄結構介紹002

總體框架 一個vue-cli的專案結構如下,其中src資料夾是需要掌握的,所以本文也重點講解其中的檔案,至於其他相關檔案,瞭解一下即可。   檔案結構細分 1.build——[webpack配置] build檔案主要是webpack的配置,主要啟動檔案是dev-server.js,當我們輸

vue檔案目錄結構

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

vue-cli目錄結構介紹

原文地址:http://www.jianshu.com/p/7006a663fb9f 總體框架 一個vue-cli的專案結構如下,其中src資料夾是需要掌握的,所以本文也重點講解其中的檔案,至於其他相關檔案,瞭解一下即可。 檔案結構細分 1.build——[w

vue-cli目錄結構詳解

原文地址:http://www.jianshu.com/p/7006a663fb9f 總體框架 一個vue-cli的專案結構如下,其中src資料夾是需要掌握的,所以本文也重點講解其中的檔案,至於其他相關檔案,瞭解一下即可。   檔案結構細分 1.build——[w

node.js目錄結構

    bin:啟動檔案的所在位置 node_modeles:node的依賴等 public:靜態資源 專案中的css,js等 routes:路由跳轉檔案 views:前端介面,html app.js:總的配置檔案 package.jso

vue專案目錄結構說明

這是我建立的專案目錄,見下圖: 目錄/檔案 說明 build 專案構建(webpack)相關程式碼 config 配置

Vue專案目錄結構

Project ├── build 構建指令碼目錄 │ ├── build.js 生產環境構建(編譯打包)指令碼 │ ├── che

Vue.js 專案目錄結構

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

圖解Vue.js專案及其目錄結構

  專案包含: 基礎庫: vue.js、vue-router、vuex、whatwg-fetch 編譯/打包工具:webpack、babel、node-sass 單元測試工具:karma、mocha、sinon-chai 本地伺服器:express build:最終釋

vue-cli創建的項目的目錄結構及說明

構建 npm sse ets tro 項目 變量 tor 項目構建 一、├── build // 項目構建(webpack)相關代碼 記憶:(夠賤) 9個│ ├── build.js // 生產環境構建代碼

在Node.js中在保持目錄結構的情況下壓縮指定目錄

事件 信息 處理 方式 evel ack api not 說明 最近在做一個文件升級的功能,需要從下載服務器中指定目錄下的文件。在學習了zlib後發現這個模塊達不到這個功能 在查找資料後發現後發現 archiver 模塊很好用,不過我也發現大部分中文資料沒有如果查詢壓縮進度

vue-cli搭建及項目目錄結構

地址 所有 config文件 tor 防止 風格 asset set 腳手架 今天總結一下vue的腳手架的搭建。很簡單,今天我們就來說一下 一、vue 腳手架的搭建。 對於腳手架的具體搭建方法,我這裏不在很詳細的書寫,具體方法我推薦菜鳥教程的方法,和具體,你一步一步的來

vue腳手架的目錄結構

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

Vue.js系列之專案結構說明

轉:https://www.jb51.net/article/111658.htm 前言 在上一篇專案搭建文章中,我們已經下載安裝了node環境以及vue-cli,並且已經成功構建了一個vue-cli專案,那麼接下來,我們來梳理一下vue-cli專案的結構。 總體框架 一個

VUE】Mac下vue 開發環境搭建,以及目錄結構

1 安裝Node.js    參看 node.js環境安裝   http://www.cnblogs.com/richerdyoung/p/7265786.html   2 安裝淘寶映象 sudo npm ins

Vue.js原始碼目錄及構建

1.Vue.js 目錄結構 下面是Github上Vue原始碼的目錄結構 其中src為原始碼部分,結構如下: src ├── compiler # 編譯相關 ├── core # 核心程式碼 ├── platforms

簡述Vue.js

最近幾年vue非常火爆,非常受歡迎 即將面臨畢業的我,終於決定從事前端工作,決然的著手開始學習vue 什麼是Vue.js呢? 它是有助於我們前端工程師開發的一種框架 Vue.js(讀音 /vjuː/, 類似於 view) 是一套構建使用者介面的漸進式框架。 Vue