node_modules：項目依賴文件夾

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

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

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

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

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

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

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

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

vue.config.js：可以對腳手架進行個性化定制，如何配置可以參考Vue CLI

其他文件夾：

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

router：路由配置文件

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

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

初始化vue項目的其他配置

1.瀏覽器自動打開

在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校驗工具

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

module.exports = {
   lintOnSave:false,
}

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

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

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

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

補充：cli搭建的vue項目各個文件夾的作用 (vscode)

vue項目各個文件夾的作用 一.這個就是我們界面里面的文件

1.node_modules

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

2.public

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

3.src

src文件夾包含整個項目中所有需要包含的代碼（腳手架生成的webpack配置項，只對src目錄進行編譯處理，其他目錄是不處理的）

api 在開發(fā)項目時一般都是在src下創(chuàng)建一個文件夾api在里面對axios進行二次封裝，組件化創(chuàng)建文件對應(yīng)的頁面在對應(yīng)的文件下發(fā)請求，方便管理

• assets

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

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

4.browserslistrc

支持的瀏覽器的最低版本

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

5.editorconfig

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

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

6.eslintrc.js

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

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)于一個轉(zhuǎn)譯器文件，比如瀏覽器不支持ES6 的語法，babel.config.js就可以把ES6的語法轉(zhuǎn)譯為ES5,瀏覽器就可以 ‘識別’。

9. package-lock.json

• 鎖定包的版本，確保不會因為包的版本不同產(chǎn)生問題
• 加快下載速度，因為該文件已經(jīng)記錄了項目所依賴第三方包的樹狀結(jié)構(gòu)和包的下載地址，重新安裝時只需下載即可，不需要做額外的工作

10. package.json

• 項目描述文件，記錄了當(dāng)前項目信息，例如項目名稱，版本，作者，GitHub地址，當(dā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腳手架初始化項目各個文件夾用途的文章就介紹到這了,更多相關(guān)vue-cli腳手架初始化項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論