Serie Vue - Punti critici nel processo di configurazione e distribuzione del framework vue2-webpack2

React, Vue, Angular rappresentano tre idee di ingegnerizzazione frontend, studiare le tre principali framework è principalmente comprendere i loro concetti fondamentali, come componenti, ciclo di vita, flusso di dati unidirezionale, binding bidirezionale e così via. Questi concetti nel sviluppo non basato su framework, pochi persone pensano in modo sistematico in questo modo, per i principianti, molte di queste idee non sono mai state toccate, non sanno da dove iniziare un progetto React, Vue o Angular, di seguito costruirò un progetto Vue da zero, imparando l'idea di Vue man mano che faccio il progetto.

1、Vuoi usare vue, cosa dovrei fare prima?

Vuoi imparare vue, la prima cosa che devo fare è andare sul sito web ufficiale di vue e guardare la presentazione:https://cn.vuejs.org/v2/guide... , guardando bene, vue ha ora la differenza tra 1.X e 2.X, bene, ho deciso di scegliere 2.X.

Ho selezionato la versione vue, ho cercato su Zhihu come costruire una struttura di framework vue, ho visto le condivisioni di vari predecessori, e ho scoperto un progetto chiamato cooking Cos'ha di buono?

L'obiettivo di cooking è liberarti dalle configurazioni di costruzione complesse e allo stesso tempo evitare la necessità di installare una serie di dipendenze di sviluppo per ogni progetto. Basato su webpack ma con opzioni di configurazione più amichevoli e un meccanismo di configurazione estensibile facile da usare, ti permette di concentrarti sul progetto e dimenticare la configurazione.

Wow, ho visto che il sito web di cooking ha una presentazione così buona, quindi ho deciso di seguire la loro guida, ho provato un po', ma non mi è piaciuto, sembra molto avanzato con una configurazione unica, ma devi ancora imparare a usare cooking e devi installare cooking localmente, mi sono perso, anche se ho avuto successo nell'accedere alla pagina web nel browser, ho abbandonato questa cosa divertente.

A questo punto puoi solo costruire il progetto da zero.

2、Creare un nuovo progetto vue2-web su github.

Apri la homepage di github, clicca su start a project.

Poi vedrai Create a new repository, devi compilare le informazioni del progetto, questo passaggio può essere saltato.

Poi il progetto è stato creato, clona localmente.

3、Inizializzare npm

Usa shell o cmd per entrare nella directory radice del progetto e eseguire i seguenti comandi, salta le opzioni, alla fine verrà generato il file package.json.

npm init

4、Installare webpack

Non posso vivere senza webpack, ma configurare webpack può essere estremamente difficile da ricordare, ma non preoccuparti, ho già risolto questo problema, dobbiamo tutti usare webpack2.

npm install --save-dev webpack

Serve anche un server front-end per aggiornamenti in tempo reale, quindi entra in scena webpack-dev-server.

npm install --save-dev webpack-dev-server

5、Creare il file webpack.config.js

Non c'è molta differenza tra il file di configurazione webpack di React, è sufficiente fare una piccola modifica per poterlo utilizzare.

Non mettere js e vue insieme, non funziona, devono essere separati, devono, questa buca l'ho calpestata, per trovare questa buca, ho perso ore preziose, il più nascosto dei luoghi.

rules: [{
   test: /\.js$/,
   use: ['babel-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },{
   test: /\.vue$/,
   use: ['vue-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },

6、Crea il file .babelrc.

Babel è indispensabile, attenzione che non sto usando React, ma Vue, inclusi i seguenti plugin, flow-vue, transform-vue-jsx.

{
 "presets": ["es2015", "flow-vue", "stage-0", "stage-2"],
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7、Aggiungi il comando start in package.json

Lancia direttamente con webpack-dev-server, wow, un sacco di errori, dice che manca qualche module, questo è semplice, perché ci sono un sacco di module richiesti nel file di configurazione, che non sono stati ancora installati nel progetto, a questo punto è sufficiente installarli uno per uno.

"start": "webpack-dev-server",

8、File di ingresso principale main.js.

Questo nome di file lo puoi chiamare come ti pare, il codice è piuttosto semplice, istanzio un Vue e un router, non sembra molto simile al file di ingresso di React? Certo, sto facendo un SPA, quindi ho adottato la forma di ingresso singolo, se non è un modello SPA, non è questo il modo di configurazione.

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //richiesta HTTP registrata
Vue.use(VueRouter); // registrazione del routing
// istanziare il router
const router = new VueRouter({
 // mode: 'history', // Modo di routing H5, richiede il rendering del server per prevenire gli errori 404
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  Non obbligatorio
//  module.hot.accept('./App.vue', () => render);
// }

9、rotte routes.js

Le rotte e React sono molto simili (è quasi uguale), le pagine Vue di questo progetto utilizzano il suffisso .vue per scrivere.

import Home from './components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

10、contenitore principale singolo pagina App.vue

Dal file index, questo è il file, ora inizierò a studiare l'essenza di Vue.

template: il linguaggio di modello di Vue, anche chiamato jsx.

transition: animazione di transizione.

router-view: contenitore di visualizzazione delle rotte, il .vue caricato tramite router-link viene visualizzato in questo contenitore. router-link è stato encapsulato nel componente nav.vue.

script: è stato importato il componente Vue di livello superiore necessario per il contenitore corrente, inclusi l'intestazione, la navigazione e la pagina iniziale. Ci sono molte altre impostazioni ricche che non ho studiato, e continuerò a studiare in futuro.

style: lo stile del componente corrente, ho configurato il supporto less. Modifica lo style in <style lang="less"> per scrivere less.

<template>
 <div>
  <app-header logo="logo" ></app-header>
  <app-nav></app-nav>
  <transition name="fade" mode="out-in">
   <router-view class="view"></router-view>
  </transition>
 </div>
</template>
<script>
 import Header from './components/common/Header.vue';
 import Nav from './components/common/Nav.vue';
 import Home from './components/home/Home.vue';
 export default {
  name: 'App',
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

Nel processo di fallimento, ho incontrato anche diversi casi di errore, che sono stati risolti con successo alla fine.

Se vuoi vedere il codice dei componenti vue più dettagliato, puoi guardare il progetto specifico:https://github.com/hyy1115/vu...

Continuerò a perfezionare questo progetto, esplorando un'implementazione di架构 più flessibile per vue.

Immagine di esecuzione:vue-酷我demo

Sommario

Quello che ho introdotto è la serie vue dell'autore - il percorso di fallimento nel setup del framework vue2-webpack2, spero che sia utile a tutti. Se avete qualsiasi domanda, lasciate un commento e l'autore risponderà tempestivamente. In questo senso, l'autore è anche molto grato per il supporto di tutti ai tutorial di urla!