vue-cli3和vue-cli2的差別是什麼

區別：1、「vue-cli3」是基於webpack4打造的，而「vue-cli2」是基於webpack3打造的；2、「vue-cli3」移除了static資料夾，新增public資料夾，並且將“index.html”移動到了public。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue-cli3和vue-cli2的區別是什麼

vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下

vue-

#vue-

##vue-

##vue-

##vue-

##vue-

## cli 3 的專案架構完全拋棄了 vue-cli 2 的原有架構，3 的設計更為抽象且簡潔（此處後續可詳細介紹）

##vue-cli 3 是基於 webpack 4 打造，vue- cli 2 還是 webapck 3

vue-cli 3 提供了 vue ui 指令，提供了視覺化配置，更加人性化

由於 vue-cli 3 也學習了 rollup 的零配置設定，所以思路專案初始化後，沒有了先前熟悉的 build 目錄，也就沒有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等設定檔。

vue-cli 3 的設計原則是0配置，移除的設定檔根目錄下的 build 和config等目錄

移除了static資料夾，新增public資料夾，並且index.html 移動到了public中

• Vue-cli3 所建立的專案的目錄結構
  vue_project

• ##    -- node_modules  # 安裝的函式庫依賴關係

•     -- public  # 相當於vue-cli2中的static，打包後原封不動的放在dist中

•     -- src # 原始碼

•     -- .browserslistrc  # 設定瀏覽器相關的東西

• #    -- .gitignore 設定忽略一些檔案

•     -- .babel.config.js  # 設定 babel

•     -- package.json

• #    -- package.json

##   -- package.json

##   -- package.json

##   -- package.json

##   )-- package.json

##   -- package.json

#####   -- package。 ######    -- package-lock.json  # 顯示的完整的安裝版本(package.json中可能有~或 ^ 後面加上版本號，因此可能會安裝不同版本的依賴)###### ######    -- readme.md  # markdown 文件############啟動專案以及打包專案####### 啟動專案###

npm run serve

###

npm run build

###註：這些指令都是在 package.json 的 script 中設定的###

{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 运行项目
    "serve": "vue-cli-service serve",
    # 打包项目
    "build": "vue-cli-service build"
  },
  # 运行依赖
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 开发依赖
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

###【相關推薦：《###vue.js教學###》】#### ##

以上是vue-cli3和vue-cli2的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！