Penggunaan alat perancah Vue-cli dan arahan konfigurasi projek

Arahan untuk menggunakan alat perancah Vue-cli dan konfigurasi projek

Dengan pembangunan berterusan teknologi bahagian hadapan, rangka kerja bahagian hadapan juga telah menarik lebih banyak perhatian daripada pembangun. Sebagai peneraju dalam rangka kerja hadapan, Vue.js telah digunakan secara meluas dalam pembangunan pelbagai aplikasi web. Vue-cli ialah perancah berasaskan baris arahan yang disediakan secara rasmi oleh Vue.js. Ia boleh membantu pembangun dengan cepat memulakan struktur projek Vue.js, membolehkan kami menumpukan lebih pada pembangunan perniagaan. Artikel ini akan memperkenalkan pemasangan dan penggunaan Vue-cli, serta konfigurasi projek asas.

1. Pasang Vue-cli

Jika anda belum memasang Node.js lagi, anda perlu memasang Node.js terlebih dahulu. Sila cari cara memasang Node.js sendiri.

Selepas memasang Node.js, masukkan arahan berikut pada baris arahan untuk memasang Vue-cli:

npm install -g vue-cli

Arahan ini akan memasang vue-cli dalam persekitaran global.

Nota: Jika kebenaran tidak mencukupi berlaku semasa pemasangan, sila gunakan arahan sudo atau jalankan baris arahan sebagai pentadbir.

2. Gunakan Vue-cli untuk mencipta projek

Selepas memasang Vue-cli, kami boleh mula menggunakannya untuk mencipta projek. Masukkan arahan berikut pada baris arahan untuk mencipta projek Vue.js berdasarkan templat webpack:

vue init webpack my-project

Selepas arahan ini dilaksanakan, anda akan ditanya beberapa soalan, seperti nama projek, penerangan projek, pengarang , dsb. Anda Anda boleh mengisinya mengikut keperluan anda sendiri. Setelah diisi, ia akan mencipta templat projek untuk kita.

Pasang dependencies:

npm install

Selepas melaksanakan arahan di atas, dependencies akan dipasang dari package.json.

Jalankan projek:

npm run dev

3. Konfigurasi projek asas

1. Struktur projek

• bina: Pembinaan projek dan folder konfigurasi berkaitan pembungkusan
• konfigurasi: folder konfigurasi projek
• node_modules: folder pakej kebergantungan projek
• src: folder kod projek, termasuk komponen, templat, sumber statik, dll.
• statik: folder sumber statik projek, seperti gambar, fon, dll.
• ujian: folder ujian projek
• .babelrc: fail konfigurasi Babel
• . editorconfig : Fail konfigurasi gaya kod
• .gitignore: Kawalan versi Git abaikan fail
• .postcssrc.js: Fail konfigurasi PostCSS
• index.html: Fail kemasukan halaman projek
• package.json: Fail konfigurasi projek

2. Konfigurasi pembolehubah persekitaran

Pembolehubah persekitaran yang berbeza boleh ditetapkan dalam projek, seperti persekitaran pembangunan, persekitaran ujian dan persekitaran pengeluaran. Vue-cli menyediakan tiga mod persekitaran secara lalai: pembangunan (persekitaran pembangunan), ujian (persekitaran ujian) dan pengeluaran (persekitaran pengeluaran).

Dalam folder config dalam direktori akar projek, terdapat fail index.js, yang mengandungi maklumat konfigurasi untuk pelbagai persekitaran. Kami boleh mengubah suai maklumat konfigurasi yang sepadan mengikut keperluan.

Sebagai contoh, kita boleh menetapkan alamat API yang berbeza untuk persekitaran pembangunan dan persekitaran pengeluaran dalam fail index.js:

module.exports = {
  // 开发环境
  dev: {
    env: require('./dev.env'),
    port: 8080,
    api: 'http://localhost:3000'
    ...
  },
  // 生产环境
  build: {
    env: require('./prod.env'),
    api: 'http://api.example.com'
    ...
  }
}

Dalam kod, kita boleh mendapatkan status semasa melalui process.env Persekitaran .NODE_ENV untuk mendapatkan alamat API yang sepadan:

const API_URL = process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/api/'

3. Vuex

Vuex ialah mod pengurusan keadaan yang dibangunkan khas untuk aplikasi Vue.js dan boleh digunakan untuk mengurus Status global, seperti status log masuk, bahasa, tema, dsb.

Apabila membuat templat projek, anda boleh memilih sama ada untuk menggunakan Vuex, dan anda boleh menambah atau mengalih keluar Vuex pada bila-bila masa dalam projek.

Pasang Vuex:

npm install vuex --save

Untuk menggunakan Vuex dalam projek, anda perlu memperkenalkan Vuex dalam fail main.js dahulu dan mendaftarkannya dalam contoh Vue:

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

Seterusnya, Cipta direktori kedai baharu di bawah direktori src dan tulis pengurusan status setiap modul dalam direktori ini.

Sebagai contoh, kita perlu mengurus modul yang menyimpan status log masuk dalam projek:

export default {
  state: {
    isLogged: false,
    user: {}
  },
  mutations: {
    SET_LOGIN_STATUS (state, payload) {
      state.isLogged = payload.isLogged
      state.user = payload.user
    }
  }
}

Apabila kita perlu menggunakan pengurusan status ini, kita boleh mendapatkan dan mengubah suai status dengan cara berikut :

// 获取状态
this.$store.state.isLogged

// 修改状态
this.$store.commit('SET_LOGIN_STATUS', {
  isLogged: true,
  user: {
    name: 'Tom',
    age: 18
  }
})

Ringkasan

Vue-cli menyediakan fungsi perancah yang luar biasa untuk membantu kami membina dan membangunkan projek Vue.js dengan cepat. Artikel ini memperkenalkan pemasangan dan penggunaan Vue-cli, serta konfigurasi projek asas, termasuk struktur projek, konfigurasi pembolehubah persekitaran, Vuex, dsb. Saya harap artikel ini dapat membantu anda menggunakan Vue-cli dengan lebih baik dan membangunkan aplikasi web yang lebih baik.

Atas ialah kandungan terperinci Penggunaan alat perancah Vue-cli dan arahan konfigurasi projek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!