這篇文章主要為大家展示了“Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)有什么意思”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)有什么意思”這篇文章吧。

我們一直強(qiáng)調(diào)成都網(wǎng)站建設(shè)、成都網(wǎng)站制作對(duì)于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)站設(shè)計(jì)公司不一定是大公司,成都創(chuàng)新互聯(lián)公司作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。

一、前言

這里先說一下使用vue-cli之前的事情。

由于剛剛接觸Vue不久，就接到了一個(gè)移動(dòng)端項(xiàng)目，于是打算使用vue來進(jìn)行一次嘗試，所以按照練習(xí)時(shí)候的樣子，emmm先把vue.js引入網(wǎng)頁里來，emmm自己的外聯(lián)main.css樣式引進(jìn)來，還有自己的main.js文件，還有一些圖片布拉布拉的，所以我整個(gè)項(xiàng)目的結(jié)構(gòu)如下：（捂臉）

├── css

├── images

├── index.html

└── js

由于之前我連路由，組件什么的都不會(huì)用，所以項(xiàng)目效果可想而知，連點(diǎn)擊文章標(biāo)題顯示文章都是用彈窗來實(shí)現(xiàn)的（捂臉），一按返回就退出了整個(gè)網(wǎng)頁有木有，體驗(yàn)效果極其糟糕，于是自己強(qiáng)行加了幾個(gè)“返回”按鈕，（實(shí)際就是v-show的切換emmmm），各種欄目的切換也是通過這個(gè)，然后。。。產(chǎn)品就要求我改了，啊啊沒辦法，只好重寫咯，這時(shí)學(xué)長推薦了使用vue-cli來快速開發(fā)，于是就開始了vue-cli的嘗試之旅

二、Vue-cli 使用旅程

之前看Vue官方文檔的安裝的時(shí)候，在命令行工具那里看見了 vue-cli 的安裝，也嘗試過，不過也就是初始化了一個(gè)項(xiàng)目，然后看見哇竟然自動(dòng)在本地localhost:8080跑起來了，覺得很神奇，然后。。就沒管它了，感覺自己像個(gè)智障，然后之前初始化的也找不到了，然后就重新初始化了一個(gè)項(xiàng)目，命令如下

# 全局安裝 vue-cli

$ npm install --global vue-cli

# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目

$ vue init webpack my-project

# 安裝依賴，走你

$ cd my-project

$ npm install

$ npm run dev

沒錯(cuò)，我就是直接從官網(wǎng)復(fù)制粘貼過來的，不過把 my-project 改成了 campusnews，emmm..在VSCode上把文件夾打開一看，我屮艸芔茻，這些都是什么玩意，這么一大堆東西，鬼都看不懂哦，不說了，放上來體會(huì)一下：

.......算了，本來打算用tree生成一下所有的結(jié)構(gòu)樹，還是就展示一下主目錄吧～

├── build

├── config

├── index.html

├── node_modules

├── package.json

├── package-lock.json

├── README.md

├── src

└── static

看不懂哦，只好去找找資料了，以下是我經(jīng)過查找資料和自己的理解來講述的，如有錯(cuò)誤希望指正～

1. build

這里主要是放webpack的一些配置，webpack是前端網(wǎng)站的一種打包工具，具體的可以去這個(gè)鏈接看看哦，是別人翻譯好的。

webpack中文指南

目錄結(jié)構(gòu)：

├── build.js

├── check-versions.js

├── dev-client.js

├── dev-server.js

├── utils.js

├── vue-loader.conf.js

├── webpack.base.conf.js

├── webpack.dev.conf.js

└── webpack.prod.conf.js

（1）build.js

build文件夾里有一個(gè) build.js ，是我們完成項(xiàng)目之后需要運(yùn)行的， 可以將我們的項(xiàng)目文件打包成 靜態(tài)文件，存放在項(xiàng)目根目錄的 dist 文件夾中（現(xiàn)在目錄里還沒有這個(gè)文件夾，build的時(shí)候會(huì)自動(dòng)生成），當(dāng)然你可以自己設(shè)置路徑，是在。。應(yīng)該是在 config 文件夾中的 index.js 中改，可以指定主頁，默認(rèn)是 index.html。

（2）check-versions.js

主要是檢查一些所依賴的工具的版本是否適用，如nodejs、npm，若版本太低則會(huì)提示出來。

（3）dev-client.js

應(yīng)該是本地客戶端開發(fā)中有關(guān)熱更新的吧～

（4）dev-server.js

是一個(gè)用作服務(wù)器端的東西，涵蓋了express和它的一些模塊，為了在本地服務(wù)器上把我們的項(xiàng)目跑起來的一個(gè)文件，引入了反向代理的模塊，我們可以用來發(fā)起跨域請(qǐng)求。

（5）utils.js

（是一個(gè)功能模塊？）里面引入了一些css-loader，以便于解析各種格式的css，如 less，sass 什么的。

（6）vue-loader.conf.js

它把上面的 utils.js 引入了，應(yīng)該是用于切換 開發(fā)模式和 生產(chǎn)模式的文件吧，以便于用不同模式來解析css。

下面那三個(gè)我只知道是webpack的一些打包的設(shè)置，比如指定入口文件啊，依賴安裝路徑啊，對(duì)不同后綴的文件用不同的loader去解析呀什么的。目前不了解這個(gè)也對(duì)我們開發(fā)項(xiàng)目影響不大～

2. config

不知道干啥的，應(yīng)該是配置文件

3.node_modules

依賴所存在的文件，就是我們一開始使用 npm install 安裝的東西，都在里面，以后我們要添加依賴也是放在這個(gè)里面，可能有人會(huì)又疑問，你 npm install 后面啥也沒加啊，你安裝了啥。一看就是不了解 npm 的人（雖然我也不了解（捂臉）），npm install 可以從當(dāng)前根目錄中的 package.json 文件中讀取所要安裝的模塊的名稱和版本，然后一次性安裝所有的依賴。

4.src

終于到了最重要的部分，src目錄就是一般我們需要寫的地方了，先放一下目錄結(jié)構(gòu)：

├── App.vue

├── assets

├── components

├── main.js

└── router

（1）App.vue 是我們的主組件，也是我們所有組件和路由的出口，之后他會(huì)被渲染到我們項(xiàng)目根目錄的 index.html 中顯示出來，我們可以在這里寫一些適合全局的css樣式，比如說 css reset，字號(hào)，字體什么的。

（2）assets

是我們放一些靜態(tài)圖片資源的目錄，雖然我沒有放圖片在里面。

（3）components

這里存放的是我們寫的各種組件，各個(gè)組件聯(lián)系在一起組成一個(gè)完整的項(xiàng)目

（4）router

我們定義路由的地方，雖然也可以直接在 main.js 中直接定義，但是分開的話結(jié)構(gòu)更加清晰，路由的定義我們下次再說～

（5）main.js

入口文件，引入了 vue模塊 和 app.vue 組件 以及 路由router，我們需要在全局使用的一些東西也可以定義在這里面。

5.static

用于存放我們需要使用的一些外部的js、css文件，需要使用的時(shí)候從這里引到文件內(nèi)。

├── package-lock.json

├── README.md

第一個(gè)我不知道是干啥的，第二個(gè)就是寫說明文檔的咯。

好了，至此整個(gè)vue-cli的目錄我們都過了一遍，雖然我寫的不是很詳細(xì)，甚至有錯(cuò)誤，待我慢慢學(xué)習(xí)并更新咯，希望各位看官老爺能指出，謝謝。

以上是“Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)有什么意思”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站m.rwnh.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享名稱：Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)有什么意思-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://m.rwnh.cn/article32/iicpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、用戶體驗(yàn)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)