13518219792
這篇文章主要介紹“vue-cli3和vue-cli2的區別有哪些”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue-cli3和vue-cli2的區別有哪些”文章能幫助大家解決問題。
成都創新互聯長期為成百上千家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為連平企業提供專業的成都做網站、網站設計、外貿營銷網站建設，連平網站改版等技術服務。擁有十載豐富建站經驗和眾多成功案例,為您定制開發。
區別：1、“vue-cli3”是基于webpack4打造的，而“vue-cli2”是基于webpack3打造的；2、“vue-cli3”移除了static文件夾，新增public文件夾，并且將“index.html”移動到了public中。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 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_project
-- node_modules # 安裝的庫依賴
-- public # 相當于vue-cli2中的static，打包后原封不動的放在dist中
-- src # 源代碼
-- .browserslistrc # 配置瀏覽器相關的東西
-- .gitignore # 配置git相關的東西，可以配置忽略一些文件
-- .babel.config.js # 配置 babel
-- package.json
-- 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-cli3和vue-cli2的區別有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注創新互聯行業資訊頻道，小編每天都會為大家更新不同的知識點。
