So erstellen Sie das vue2-webpack2-Framework

Dieses Mal zeige ich Ihnen, wie Sie das vue2-webpack2-Framework erstellen. Was sind die Vorsichtsmaßnahmen beim Erstellen des vue2-webpack2-Frameworks?

React, Vue und Angular stellen drei Front-End-Engineering-Ideen dar. Das Erlernen der drei Hauptframeworks besteht hauptsächlich darin, ihre Kernkonzepte wie Komponenten, Lebenszyklus und zu verstehen unidirektionaler Datenfluss, bidirektionale Bindung usw. In der Nicht-Framework-Entwicklung denken nur wenige Menschen so systematisch über diese Konzepte nach. Anfänger sind noch nie mit vielen Konzepten vertraut und wissen nicht, wo sie mit einem React-, Vue- oder Angular-Projekt beginnen sollen Erstellen Sie ein Vue-Projekt von Grund auf und lernen Sie die Ideen von Vue kennen, während Sie am Projekt arbeiten.

1. Was soll ich zuerst tun, wenn ich vue verwenden möchte?

Wenn ich Vue lernen möchte, gehe ich zunächst auf die offizielle Website von Vue, um die Einführung zu lesen: https://cn.vuejs.org/v2/guide... , schauen Sie sich das genauer an Schauen Sie, Vue hat jetzt 1.X. Der Unterschied zu 2.X ist sehr gut. Ich habe mich entschieden für 2.X entschieden.

Nachdem ich die Vue-Version ausgewählt hatte, suchte ich bei Zhihu nach dem Aufbau des Vue-Frameworks. Nachdem ich verschiedene Beiträge von Senioren gelesen hatte, erfuhr ich etwas über eine gute Sache namens Kochen.

Das Ziel von Cooking besteht darin, Sie von mühsamen Build-Konfigurationen und dem Aufwand zu befreien, eine Reihe von Entwicklungsabhängigkeiten für jedes Projekt zu installieren. Basierend auf webapck, aber mit benutzerfreundlicheren Konfigurationselementen und einem benutzerfreundlichen erweiterten Konfigurationsmechanismus können Sie sich auf das Projekt konzentrieren und die Konfiguration vergessen.

Wow, ich habe gesehen, dass die offizielle Website zum Kochen eine so gute Einführung bietet, also habe ich mich entschlossen an das Tutorial gehalten. Nachdem ich eine Weile herumgespielt hatte, stellte ich fest, dass die Ein-Klick-Konfigurationsumgebung nicht sehr komfortabel zu sein schien. Ende, aber ich musste noch lernen, wie man das Kochen verwendet, und ich musste Cookies lokal installieren, was mir schwindelig machte. Obwohl ich erfolgreich auf die Webseite im Browser zugegriffen habe, habe ich diese gute Sache trotzdem aufgegeben.

Derzeit können Sie das Projekt nur von Grund auf neu erstellen.

2. Erstellen Sie ein neues vue2-web-Projekt auf Github.

Öffnen Sie die Github-Homepage und klicken Sie auf „Projekt starten“.

Dann wird „Neues Repository erstellen“ angezeigt, in dem Sie die Projektinformationen eingeben müssen. Dieser Schritt wird übersprungen.

Anschließend wird das Projekt lokal erstellt und geklont.

3. NPM initialisieren

Geben Sie mit Shell oder cmd das Stammverzeichnis des Projekts ein, führen Sie den folgenden Befehl aus, überspringen Sie direkt die Optionen und schließlich wird die Datei package.json generiert.

npm init

4. Webpack installieren

Es fühlt sich an, als ob Sie ohne Webpack nicht leben können, aber die Konfiguration des Webpacks macht es Ihnen auch schwer, sich die Konfigurationselemente des Webpacks zu merken, aber keine Sorge, ich habe Ihnen bei diesem Schritt geholfen muss webpack2 verwenden.

npm install --save-dev webpack

Für Hot-Updates ist außerdem ein Front-End-Server erforderlich, und der Webpack-Dev-Server erscheint.

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

5. Erstellen Sie die Datei webpack.config.js

Es unterscheidet sich nicht von der Webpack-Konfigurationsdatei in React. Sie kann mit nur einer geringfügigen Änderung übertragen und verwendet werden.

Füge niemals js und vue zusammen. Wenn es nicht funktioniert, muss ich mehrere Stunden damit verbringen, an der verborgensten Stelle nach dieser Grube zu suchen.

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 .babelrc-Datei.

Beachten Sie, dass hier nicht React verwendet wird, sondern Vue, einschließlich der folgenden Plug-Ins: flow-vue und 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. Fügen Sie den Startbefehl in package.json hinzu

Verwenden Sie direkt den Webpack-Dev-Server, um zu starten. Wow, es gibt eine Reihe von Fehlern. Sie sagen, welches Modul fehlt. Das ist einfach, da eine Reihe von Modulen, auf die in der Konfigurationsdatei verwiesen wird, nicht im Projekt installiert wurden. Installieren Sie sie also einfach einzeln um eins zu diesem Zeitpunkt.

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

8. Projekteintrag main.js-Datei.

这个文件名自己喜欢咋取就咋取，代码挺简单的，实例化一个Vue和路由，是不是和react的入口文件很像？当然，我做的是SPA，所以采用单入口的形式，如果是非SPA模式，就不是这种配置方式了。

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请求注册
Vue.use(VueRouter); //路由注册
// 实例化路由
const router = new VueRouter({
 // mode: 'history', //H5 路由模式，需要服务端做渲染防止404错误
 base: dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  非必须
//  module.hot.accept('./App.vue', () => render);
// }

9、路由routes.js

路由和react也非常像（简直一样好不），这里的vue页面采用.vue后缀的方式来写。

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、单页顶层容器App.vue

从index进来，就是这个文件，现在开始学习vue的精华。

template：vue的模板语言，也叫作jsx。

transition：过渡动画。

router-view：路由显示容器，通过router-link跳转加载的.vue会在这个容器渲染。router-link被我封装到nav.vue组件里面了。

script：导入了当前顶级容器需要用到的vue组件，包括头部、导航、首页。还有更多丰富的设置我没有研究，后续的学习中会深入下去。

style: 当前组件的样式，我配置了less语法支持。将style改成