Apakah perbezaan antara vue-cli3 dan vue-cli2

Perbezaan: 1. "vue-cli3" dibina berdasarkan webpack4, manakala "vue-cli2" dibina berdasarkan webpack3; 2. "vue-cli3" mengalih keluar folder statik dan menambah folder awam, dan mengalihkan "index.html" kepada awam.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah perbezaan antara vue-cli3 dan vue-cli2

Gudang github vue-cli 3 telah dipindahkan dari gudang github bebas asal ke projek vue

vue- Seni bina projek cli 3 meninggalkan sepenuhnya seni bina asal vue-cli 2. Reka bentuk 3 lebih abstrak dan ringkas (anda boleh memperkenalkannya secara terperinci kemudian)

vue-cli 3 berasaskan pada webpack 4, vue- cli 2 atau webapck 3

vue-cli 3 menyediakan arahan vue ui, menyediakan konfigurasi visual dan lebih mesra pengguna

Memandangkan vue-cli 3 juga telah belajar idea rollup konfigurasi sifar, jadi Selepas projek dimulakan, tiada lagi direktori binaan biasa dan tiada lagi fail konfigurasi seperti webpack.base.config.js, webpack.dev.config.js , webpack.prod.config.js.

Prinsip reka bentuk vue-cli 3 ialah 0 konfigurasi Direktori binaan dan konfigurasi di bawah direktori akar fail konfigurasi dialih keluar

Folder statik dialih keluar dan folder awam ditambah. Dan index.html telah dialihkan kepada awam

Struktur direktori projek yang dibuat oleh Vue-cli3

vue_project

•  — node_modules # Kebergantungan perpustakaan yang dipasang

• -- awam # Setara dengan statik dalam vue-cli2, dibungkus dan diletakkan utuh dalam dist

• -- src # Sumber kod

• -- .browserslistrc # Konfigurasikan perkara berkaitan penyemak imbas

• -- .gitignore # Konfigurasikan perkara berkaitan git, anda boleh Konfigurasi mengabaikan beberapa fail

• -- .babel.config.js # Babel Konfigurasi

• -- package.json

• -- package-lock.json # Versi pemasangan sebenar dipaparkan (package.json mungkin mempunyai ~ atau ^ diikuti dengan nombor versi, jadi versi kebergantungan yang berbeza boleh dipasang)

• -- readme.md # dokumen markdown

Projek permulaan dan projek pembungkusan

# Projek permulaan

npm run serve

# Projek pembungkusan

npm run build

Nota: Arahan ini dikonfigurasikan dalam skrip package.json

{
  "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"
  }
}

[Cadangan berkaitan: "tutorial vue.js 》】

Atas ialah kandungan terperinci Apakah perbezaan antara vue-cli3 dan vue-cli2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!