node_modules：項目依賴文件夾

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

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

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

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

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

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

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

README.md：應用描述文件（說明性文件）

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

其他文件夾：

pages：存放路由相關組件（pages也可換成views）

router：路由配置文件

store：vuex相關文件

mock：存放mock模擬數據

初始化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.關閉eslint校驗工具

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

module.exports = {
   lintOnSave:false,
}

3. src文件夾的別名的設置

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

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

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

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

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

1.node_modules

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

2.public

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

3.src

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

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

• assets

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

• components 主要存放組件文件，比如自定義的一些組件文件
• plugins 主要放配置文件，常用的放element.js
• router 里面包含index.js文件，起配置路由規(guī)則及掛載的作用
• views 項目自帶的頁面級組件
• App.vue 當前頁面的主要入口
• 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

相當于一個轉譯器文件，比如瀏覽器不支持ES6 的語法，babel.config.js就可以把ES6的語法轉譯為ES5,瀏覽器就可以 ‘識別’。

9. package-lock.json

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

10. package.json

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

11. README.md

一些基本npm指令

npm install
npm run serve
npm run build
npm run lint

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

最新評論