Vue CLI 項目目錄結構


npm install -g @vue/cli  //安裝CLI

npm install -g @vue/cli-init //安裝橋接工具,拉取CLI舊版本

vue init webpack myproject //CLI2.x版本初始化項目

vue create myproject //CLI3.x以上版本初始化項目

npm run dev  //CLI2.x版本運行項目

npm run serve  //CLI3.x以上版本運行項目

Vue CLI2.x初始化項目過程:

vue init webpack vuetest

? Project name vuetest1  //項目名
? Project description A Vue.js project  //項目描述
? Author CC. //項目作者
? Vue build standalone  
? Install vue-router? No  //是否使用路由
? Use ESLint to lint your code? No //是否使用Eslint規範代碼
? Set up unit tests No //是否使用單元測試
? Setup e2e tests with Nightwatch? No //是否使用端對端測試
? Should we run `npm install` for you after the project has been created? (recommended) npm 

Vue CLI2.x目錄結構分析:

目錄
結構預覽
├─build                 // 保存一些webpack的初始化配置,項目構建
│ ├─build.js            // 生產環境構建
│ ├─check-version.js    // 檢查npm、node版本
│ ├─vue-loader.conf.js  // webpack loader配置
│ ├─webpack.base.conf.js// webpack基礎配置
│ ├─webpack.dev.conf.js // 開發環境配置,構建本地開發服務器
│ ├─webpack.prod.conf.js// 生產環境的配置
│
├─config                // config文件夾保存一些項目初始化的配置
│ ├─dev.env.js          // 開發環境的配置
│ ├─index.js            // 項目一些配置變量
│ ├─prod.env.js         // 生產環境的配置
│
├─dist                  // 打包後的項目
├─node_modules          // 依賴包
│
├─src                   // 源碼目錄
│ ├─assets              // 靜態文件目錄
│ ├─components          // 組件文件
│ ├─router              // 路由
│ ├─App.vue             // 是項目入口文件
│ ├─main.js             // 是項目的核心文件,入口
├─static                // 靜態資源目錄 
├─.babelrc              // Babel的配置文件
├─.editorconfig         // 代碼規範配置文件
├─.gitignore            // 配置git忽略文件
├─.postcssrc.js         // postcss插件配置文件
├─index.html            // 頁面入口文件
├─package-lock.json     // 項目包管控文件(真實版本)
├─package.json          // 項目配置(大致版本)
└─README.md             // 項目說明書

在CLI3.x以上版本,與2.x版本差異很大,3.x以上的CLI的設計原則是“零配置”,因此有關webpack的配置文件都被移除,比如build、config,CLI3.x以上版本基於webpack 4打造,且提供了vue ui命令以及可視化配置,另外,CLI3.x版本移除了static文件夾,新增了public文件夾,並將index.html轉移到了public文件夾中。CLI4.x版本與3差別不大。

CLI4.x項目目錄結構

├─node_modules          // 依賴包
├─public                // 相當於CLI的static
│ ├─favicon.ico              
│ ├─index.html         
├─src                   // 源碼目錄
│ ├─assets              // 靜態文件目錄
│ ├─components          // 組件文件
│ ├─router              // 路由
│ ├─App.vue             // 是項目入口文件
│ ├─main.js             // 是項目的核心文件,入口
├─.broswerslistrc       // 瀏覽器相關配置
├─.babel.config.js      // Babel的配置文件
├─.gitignore            // 配置git忽略文件
├─package-lock.json     // 項目包管控文件(真實版本)
├─package.json          // 項目配置(大致版本)
└─README.md             // 項目說明書
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章