Vue-Serie - Vue2-webpack2Der Weg des Schachbretts beim Aufbau eines Frameworks

React, Vue, Angular stellen3Die Gedanken der Frontend-Engineering, das Lernen der drei großen Frameworks hauptsächlich, um die Kernkonzepte zu verstehen, wie Komponenten, Lebenszyklus, einseitiger Datenfluss, bidirektionale Bindung usw. Diese Konzepte werden in der Entwicklung ohne Framework selten so systematisch diskutiert, für Anfänger sind viele Konzepte nicht bekannt, wissen nicht, wie man mit einem React-, Vue- oder Angular-Projekt beginnt, ich werde das Vue-Projekt von Grund auf aufbauen und gleichzeitig das Denken von Vue lernen.

1、Was sollte ich als erstes tun, um vue zu verwenden?

Möchten Sie vue lernen, das erste, was ich tun sollte, ist, die Einleitung auf der vue-Website zu sehen:https://cn.vuejs.org/v2/guide..., wenn man sich genau ansieht, hat vue jetzt1X und2X.Differenz, gut, ich entscheide mich2.X。

Wählen Sie die vue-Version aus, ich habe auf Zhihu nach dem Aufbau von vue-Framework gesucht, habe ich die verschiedenen Beiträge der Vorgänger gesehen, und habe erfahren, dass es etwas gibt cooking Wo liegt der Vorteil?

Das Ziel von cooking ist es, Sie von den lästigen Baukonfigurationen zu befreien und gleichzeitig die Mühe zu sparen, jede Projektinstallation einer Menge von Entwicklungabhängigkeiten durchzuführen. Basierend auf webpack, aber mit freundlicheren Konfigurationsoptionen und einem benutzerfreundlichen Erweiterungskonfigurationsmechanismus, lassen Sie sich auf das Projekt konzentrieren und vergessen Sie die Konfiguration.

Wow, ich habe die offizielle Website von cooking so gut vorgestellt, ich habe entschlossen, nach deren Anleitung vorzugehen, habe mich ein bisschen umhergewirbelt, fand es nicht angenehm, die Einrichtung der Umgebung mit einem Klick hochstilisiert zu sehen, aber man muss sich noch mit der Verwendung von cooking vertraut machen und cooking lokal installieren, was mich verdutzt hat, obwohl ich die Webseite erfolgreich im Browser erreicht habe, habe ich diesen Spaß-Trick aufgegeben.

Zu diesem Zeitpunkt können Sie nur selbst von Grund auf ein Projekt aufbauen.

2、Erstellen Sie ein neues Vue-Projekt auf github2-Web-Projekt.

Öffnen Sie die Startseite von github, klicken Sie auf start a project.

Dann werden Sie Create a new repository sehen, bei dem Sie Projektinformationen ausfüllen müssen, diesen Schritt überspringen.

Dann ist das Projekt fertig, klonen Sie es lokal.

3、Initialisieren Sie npm

Gehen Sie mit shell oder cmd in das Rootverzeichnis des Projekts und führen Sie den folgenden Befehl aus, überspringen Sie Optionen usw., am Ende wird eine Datei package.json erstellt.

npm init

4、Installieren Sie webpack

Das Gefühl, ohne webpack nicht überleben zu können, aber die Konfiguration von webpack kann auch das Leben schwer machen, es ist schwer, die Konfigurationsoptionen von webpack zu merken, aber keine Sorge, ich habe diesen Schritt für dich erledigt, wir müssen alle webpack verwenden2啊。

npm install --save-dev webpack

还需要前端服务器，做热更新呀，webpack-dev-server登场。

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

5、创建webpack.config.js文件

和react中的webpack配置文件没什么区别，只是稍微改动一个地方即可移植过来使用。

千万不要把js和vue放到一起，不起作用的，必须分开，必须，这个坑我已经踩过了，为了找这个坑，浪费了我好几个小时，最最最隐蔽的一个地方。

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

6、Erstellen Sie die Datei .babelrc。

jsx。-"presets": ["es-vue-"", "flow

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

7、Fügen Sie den Befehl start zu package.json hinzu

Verwenden Sie direkt webpack-dev-Der Server startet, oh je, es gibt viele Fehlermeldungen, dass ein Modul fehlt, das ist einfach, weil viele Module in der Konfigurationsdatei referenziert werden, die noch nicht auf das Projekt installiert sind, in diesem Fall müssen Sie sie eine nach einer anderen installieren.

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

8、Projekt-Eingangsdatei main.js.

Der Dateiname kann so benannt werden, wie man will, der Code ist ziemlich einfach, eine Instanz von Vue und Router zu initialisieren, ist das nicht fast so wie das Eingangsdatei der React? Natürlich, ich mache einen SPA, daher wird die Ein-Eingangs-Form verwendet, wenn es sich um einen nicht-SPA-Modus handelt, ist dies nicht die Konfigurationsweise.

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); //HTTP-Anforderungsregistrierung
Vue.use(VueRouter); //Routenregistrierung
// Routeninstanziierung
const router = new VueRouter({
 // mode: 'history', //H5 Routenmodus, der auf Serverseitigem Rendern verhindert werden muss404Fehler
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  Nicht erforderlich
//  module.hot.accept('./App.vue', () => render);
// }

9, Router routes.js

Der Router ist sehr ähnlich wie React (fast so gut), die Vue-Seiten hier werden mit der Dateiendung .vue geschrieben.

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, Obercontainer der Single-Page App.vue

Von index aus, das ist diese Datei, ich beginne jetzt, die Essenz von Vue zu lernen.

template: Vue-Template-Sprache, auch bekannt als jsx.

transition: Übergangsanimation.

router-view: Der Routen-Anzeigekontainer, der durch router-Das.vue, das durch link umgeleitet wird, wird in diesem Container gerendert. router-link wurde in die Komponente nav.vue eingebettet.

script: Importierte Vue-Komponenten, die für den aktuellen Top-Container erforderlich sind, einschließlich Header, Navigationsleiste und Startseite. Es gibt noch viele andere Einstellungen, die ich nicht untersucht habe, und ich werde dies in meinen weiteren Studien vertiefen.

style: Der aktuelle Komponentenstil, ich habe less-Syntax-Unterstützung konfiguriert. Setzen Sie style auf <style lang="less">, um less zu schreiben.

<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>

踩坑的过程中，也遇到了好几个报错情况，最后都圆满解决了。

如果你想看更详细的vue组件代码，可以看具体项目：https://github.com/hyy1115/vu...

接下来我会继续完善该项目，探究一个更加灵活的vue架构实现。

运行效果图：vue-酷我demo

总结

以上所述是小编给大家介绍的vue系列——vue2-webpack2框架搭建踩坑之路，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程的支持！