Bagaimana untuk menyediakan vue2 di stesen Jingdong m

Stesen Jingdong m telah menggunakan teknologi Vue2, dan rangka kerja serta aplikasinya juga telah melalui banyak pengoptimuman untuk meningkatkan prestasi tapak web. Dalam persekitaran pembangunan Vue2, beberapa tetapan diperlukan untuk memudahkan kerja pembangunan yang lebih baik. Artikel ini akan menerangkan secara terperinci kaedah tetapan Vue2 pada stesen Jingdong m untuk memudahkan pembangun bermula dengan cepat.

1. Pemasangan persekitaran

1. Pasang Node.js

Node.js ialah persekitaran berjalan JavaScript yang digunakan secara khusus pada bahagian pelayan, yang boleh digunakan untuk Membangunkan aplikasi web berskala dengan cepat. Mula-mula, kita perlu memasang Node.js Langkah-langkah khusus adalah seperti berikut:

(1) Masukkan tapak web rasmi: https://nodejs.org, kemudian pilih fail boleh laku Node.js yang disesuaikan dengannya. persekitaran komputer anda, dan muat turunnya.

(2) Selepas pemasangan selesai, buka terminal dan masukkan arahan nod -v Jika nombor versi dipaparkan, pemasangan berjaya.

2. Pasang Vue.js

Vue.js ialah rangka kerja JavaScript ringan yang digunakan untuk membina antara muka pengguna, yang boleh meningkatkan kecekapan pembangunan dengan pantas. Apabila memasang Vue.js, anda perlu memasang alat perancah Vue-cli Langkah-langkah khusus adalah seperti berikut:

(1) Pasang Vue-cli secara global:

npm install -g vue-cli

(2. ) Cipta projek templat baharu berasaskan pek web:

vue init webpack my-project

(3) Masukkan direktori projek dan pasang kebergantungan:

cd my-project
npm install

(4) Mulakan mod pembangunan:

npm run dev

( 5) Buka http://localhost:8080 dalam penyemak imbas, dan anda boleh melihat bahawa aplikasi Vue.js sedang berjalan secara setempat.

2. Fail konfigurasi

Dalam Vue.js, gunakan objek Vue.config untuk menetapkan beberapa konfigurasi global. Berikut ialah beberapa item konfigurasi yang diperlukan untuk rujukan:

1. Petua pengeluaran

digunakan untuk mengawal sama ada Vue.js mengeluarkan petua pengeluaran pada konsol apabila ia bermula. Menetapkannya kepada palsu mematikan semua gesaan pengeluaran dan mengosongkan keluaran konsol sebelum diterbitkan. Kod khusus adalah seperti berikut:

Vue.config.productionTip = false;

2. devtools

digunakan untuk mengawal sama ada Vue.js membenarkan alat penyahpepijatan untuk mengakses antara muka apabila ia dimulakan. Menetapkannya kepada palsu melumpuhkan alat penyahpepijatan Vue.js, biasanya digunakan dalam persekitaran pengeluaran. Kod khusus adalah seperti berikut:

Vue.config.devtools = false;

3 Tetapan VUEX

VUEX ialah rangka kerja pengurusan keadaan Vue.js, yang boleh digunakan untuk mengurus pengumpulan keadaan data global. Dalam pembangunan Vue.js, VUEX akan melibatkan konfigurasi berikut:

1. nyatakan

Pokok keadaan aplikasi Vue.js terdiri daripada objek. Dalam VUEX, keadaan adalah reaktif, dan apabila ia berubah, komponen yang berkaitan juga akan berubah. Kod khusus adalah seperti berikut:

const store = new Vuex.Store({
    state: {
        count: 0
    }
});

2. getter

boleh digunakan untuk sifat yang dikira dalam Vue.js, dan sifat yang dikira boleh digunakan untuk caching. Contohnya: mendapatkan status tertentu, mengira status, dsb. Kod khusus adalah seperti berikut:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        count: state => {
            return state.count
        }
    }
});

3. mutasi

Satu-satunya cara untuk menukar status kedai adalah dengan tidak menukar status kedai di luar mutasi, jika tidak, perubahan status tidak akan direkodkan sejarah. Kod khusus adalah seperti berikut:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, payload) {
            state.count += payload.amount
        }
    }
});

4. tindakan

Pengumpulan operasi tak segerak, digunakan untuk mengendalikan mutasi secara tak segerak. Jangan ubah keadaan stor secara langsung dalam tindakan Serahkan mutasi. Kod khusus adalah seperti berikut:

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, payload) {
            state.count += payload.amount
        }
    },
    actions: {
        increment(context, payload) {
            context.commit('increment', payload)
        }
    }
});

Di atas ialah beberapa kaedah tetapan untuk Vue2 pada stesen Jingdong m, termasuk pemasangan persekitaran, fail konfigurasi, tetapan VUEX, dsb. Saya harap artikel ini telah memberikan sedikit bantuan kepada pembangun Vue.js, membolehkan semua orang menggunakan teknologi Vue.js dengan lebih baik untuk pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan vue2 di stesen Jingdong m. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!