node_modules：項(xiàng)目依賴文件夾

public：一般放置一些靜態(tài)資源（圖片）。需要注意，放在public文件夾中的靜態(tài)資源，webpack進(jìn)行打包的時(shí)候，會(huì)原封不動(dòng)的打包到dist文件夾中。

src（程序員源代碼文件夾 ）：

• assets：一般用于存放靜態(tài)資源（放置多個(gè)組件共用的靜態(tài)資源），需要注意，放在assets文件夾里的靜態(tài)資源，在webpack打包的時(shí)候，webpack會(huì)把靜態(tài)資源當(dāng)做一個(gè)模塊，打包到JS文件里面。
• components：一般放置非路由組件（全局組件）
• App.vue：唯一的根組件（匯總所有組件）
• main.js：入口文件，也是整個(gè)程序當(dāng)中最先執(zhí)行的文件

.gitignore：git版本管制忽略的配置（一般不碰）

babel.config.js：babel的配置文件（相當(dāng)于翻譯官，比如把ES6相關(guān)語(yǔ)法翻譯為ES5，兼容性更好，一般不碰）

package.json：應(yīng)用包配置文件（類似于項(xiàng)目身份證，記錄著項(xiàng)目名稱、項(xiàng)目依賴、項(xiàng)目運(yùn)行等信息）

package-lock.json：包版本控制文件（緩存性文件）

README.md：應(yīng)用描述文件（說(shuō)明性文件）

vue.config.js：可以對(duì)腳手架進(jìn)行個(gè)性化定制，如何配置可以參考Vue CLI

其他文件夾：

pages：存放路由相關(guān)組件（pages也可換成views）

router：路由配置文件

store：vuex相關(guān)文件

mock：存放mock模擬數(shù)據(jù)

初始化vue項(xiàng)目的其他配置

1.瀏覽器自動(dòng)打開(kāi)

在package.json文件中，在serve屬性后面追加--open --host=localhost

"scripts": {
 "serve": "vue-cli-service serve --open --host=localhost",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
},

2.關(guān)閉eslint校驗(yàn)工具

創(chuàng)建vue.config.js文件：需要對(duì)外暴露

module.exports = {
   lintOnSave:false,
}

3. src文件夾的別名的設(shè)置

注意：最新vue腳手架版本默認(rèn)已經(jīng)配置好了
因?yàn)轫?xiàng)目大的時(shí)候src（源代碼文件夾）：里面目錄會(huì)很多，找文件不方便，設(shè)置src文件夾的別名的好處，找文件會(huì)方便一些

創(chuàng)建jsconfig.json文件 

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

補(bǔ)充：cli搭建的vue項(xiàng)目各個(gè)文件夾的作用 (vscode)

vue項(xiàng)目各個(gè)文件夾的作用 一.這個(gè)就是我們界面里面的文件

1.node_modules

• 用來(lái)存放包管理工具下載的包的文件夾，復(fù)雜的模塊依賴關(guān)系需要被記錄，確保模塊的版本和當(dāng)前保持一致，否則會(huì)導(dǎo)致當(dāng)前項(xiàng)目運(yùn)行報(bào)錯(cuò)文件夾以及文件過(guò)多過(guò)碎，當(dāng)我們將項(xiàng)目拷貝給別人的時(shí)候，傳輸速度會(huì)很慢，所以傳輸項(xiàng)目一般不傳輸node_modules
• 文件夾，可以根據(jù)package.json文件記錄的信息通過(guò)執(zhí)行npm install 下載當(dāng)前依賴的第三方模塊，生成node_modules文件夾

2.public

存放的是最后編譯項(xiàng)目時(shí)候的頁(yè)面模板 里面包含一個(gè)index.html文件，因?yàn)檫@里是單頁(yè)面開(kāi)發(fā)，所以一個(gè)就夠了; 當(dāng)然里面的代碼可以修改，比如你是移動(dòng)端開(kāi)發(fā)可以在里面配置rem，公共資源等等

3.src

src文件夾包含整個(gè)項(xiàng)目中所有需要包含的代碼（腳手架生成的webpack配置項(xiàng)，只對(duì)src目錄進(jìn)行編譯處理，其他目錄是不處理的）

api 在開(kāi)發(fā)項(xiàng)目時(shí)一般都是在src下創(chuàng)建一個(gè)文件夾api在里面對(duì)axios進(jìn)行二次封裝，組件化創(chuàng)建文件對(duì)應(yīng)的頁(yè)面在對(duì)應(yīng)的文件下發(fā)請(qǐng)求，方便管理

• assets

src 下的assets是放靜態(tài)資源的比如：css文件，圖片文件

• components 主要存放組件文件，比如自定義的一些組件文件
• plugins 主要放配置文件，常用的放element.js
• router 里面包含index.js文件，起配置路由規(guī)則及掛載的作用
• views 項(xiàng)目自帶的頁(yè)面級(jí)組件
• App.vue 當(dāng)前頁(yè)面的主要入口
• main.js 項(xiàng)目入口（單頁(yè)面一個(gè)入口，多頁(yè)面多個(gè)入口)

4.browserslistrc

支持的瀏覽器的最低版本

> 1% // 使用的瀏覽器市場(chǎng)占有率大于1%
last 2 versions  //最近的兩個(gè)版本
not dead

5.editorconfig

主要是一些規(guī)格化的配置

[*.{js,jsx,ts,tsx,vue}]
indent_style = space  //縮進(jìn)樣式保留空格
indent_size = 2 // 換行的前面補(bǔ)全2個(gè)空格
trim_trailing_whitespace = true  // 刪除尾隨空格
insert_final_newline = true  // 最后一行要換行

6.eslintrc.js

最頭痛文件里面的規(guī)則：自己手動(dòng)更改了一些規(guī)則，避免報(bào)錯(cuò)

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 0,
    'no-trailing-spaces': 0,
    'object-curly-spacing': 0,
    'no-multi-spaces': 0,
    'spaced-comment': 0,
    'indent': 0,
    'keyword-spacing': 0
  }

7.gitignore

一些不需要上傳到碼云或者GitHub的文件放在這里：比如

.DS_Store 
node_modules  
/dist  //打包文件

8. babel.config.js

相當(dāng)于一個(gè)轉(zhuǎn)譯器文件，比如瀏覽器不支持ES6 的語(yǔ)法，babel.config.js就可以把ES6的語(yǔ)法轉(zhuǎn)譯為ES5,瀏覽器就可以 ‘識(shí)別’。

9. package-lock.json

• 鎖定包的版本，確保不會(huì)因?yàn)榘陌姹静煌a(chǎn)生問(wèn)題
• 加快下載速度，因?yàn)樵撐募呀?jīng)記錄了項(xiàng)目所依賴第三方包的樹(shù)狀結(jié)構(gòu)和包的下載地址，重新安裝時(shí)只需下載即可，不需要做額外的工作

10. package.json

• 項(xiàng)目描述文件，記錄了當(dāng)前項(xiàng)目信息，例如項(xiàng)目名稱，版本，作者，GitHub地址，當(dāng)前項(xiàng)目依賴了那些第三方模塊
• 可以使用npm init -y 生成package.json

11. README.md

一些基本npm指令

npm install
npm run serve
npm run build
npm run lint

到此這篇關(guān)于vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途的文章就介紹到這了,更多相關(guān)vue-cli腳手架初始化項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論