Série vue - vue2-webpack2Chemin des erreurs lors de la création du cadre

React, vue, angular représentent3L'idée d'ingénierie frontale, apprendre les trois cadres principaux consiste à comprendre leurs concepts centraux, tels que les composants, les cycles de vie, le flux de données unidirectionnel, le binding bidirectionnel, etc. Ces concepts sont rarement pensés de manière systématique dans le développement non-cadre, pour les débutants, beaucoup de concepts n'ont jamais été rencontrés, et ils ne savent pas par où commencer un projet react, vue ou angular, ci-dessous, je vais construire un projet vue de zéro, en construisant le projet et en apprenant les idées de vue.

1、Pour utiliser vue, que dois-je faire en premier ?

Pour apprendre vue, ma première chose à faire est d'aller voir la description sur le site officiel de vue :https://cn.vuejs.org/v2/guide... , en regardant attentivement, vue a maintenant1.X et2La différence entre .X et2.X。

J'ai sélectionné la version vue, j'ai cherché sur Zhihu des méthodes de construction de cadre vue, j'ai regardé les différents partages des anciens, et j'ai découvert un nom appelé cooking Qu'est-ce qui est bien dans ce truc ?

L'objectif de cooking est de vous libérer de la configuration fastidieuse de la construction, tout en évitant les ennuis de devoir installer une série de dépendances de développement pour chaque projet. Basé sur webpack mais avec des options de configuration plus amicales, un mécanisme de configuration d'extension facile à utiliser, vous permet de vous concentrer sur le projet et d'oublier la configuration.

Wow, en voyant que le site officiel de cooking présente ainsi, je l'ai suivi d'emblée selon son tutoriel, j'ai essayé un peu, mais je n'étais pas satisfait, une configuration d'environnement en un clic semble très élégante, mais encore faut-il apprendre à utiliser cooking, et il faut installer cooking localement, ce qui me donne la migraine, bien que j'aie réussi à accéder à la page Web dans le navigateur, je l'ai néanmoins abandonné.

À ce moment-là, vous devez construire le projet à partir de zéro.

2、Créer un nouveau dépôt vue sur github2-Projet web.

Ouvrez la page d'accueil de github, cliquez sur 'Démarrer un projet'.

Ensuite, vous verrez 'Créer un nouveau dépôt', vous devez remplir les informations du projet, cette étape peut être sautée.

Ensuite, le projet est prêt, clonez-le localement.

3、Initialiser npm

Utilisez shell ou cmd pour entrer dans le répertoire racine du projet et exécutez les commandes suivantes, sautez directement les options, et finalement, le fichier package.json sera généré.

npm init

4、Installer webpack

La sensation d'être inerte sans webpack, mais configurer webpack peut aussi être épuisant, il est difficile de se souvenir des options de configuration de webpack, mais ne vous inquiétez pas, j'ai déjà résolu ce problème pour vous, nous devons tous utiliser webpack2啊。

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、créez le fichier .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、ajoutez la commande start dans package.json

Utilisez directement webpack-dev-Le serveur server démarre, oh, plein d'erreurs s'affichent, disant que manque un module, c'est simple, car les modules mentionnés dans le fichier de configuration n'ont pas été installés dans le projet. Dans ce cas, installez-les un par un.

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

8、le fichier d'entrée principal main.js du projet.

Le nom de ce fichier peut être ce que vous voulez, le code est assez simple, instancier un Vue et un routeur, n'est-ce pas très similaire au fichier d'entrée de React ? Bien sûr, je fais un SPA, donc je prends la forme d'entrée unique. Si ce n'est pas un mode SPA, ce ne serait pas ce type de configuration.

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); //Enregistrement de requête http
Vue.use(VueRouter); //Enregistrement de route
// Instance de route
const router = new VueRouter({
 // mode: 'history', //H5 Mode de routage, nécessitant un rendu côté serveur pour éviter404Erreur
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  Non obligatoire
//  module.hot.accept('./App.vue', () => render);
// }

9de routes routes.js

Les routes et React sont très similaires (presque aussi bonnes), les pages Vue ici utilisent la méthode d'extension .vue pour écrire.

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

10de conteneur de page unique en haut de l'application App.vue

En venant de index, c'est ce fichier, je commence maintenant à apprendre l'essence de Vue.

template: Langage de modèle Vue, également appelé jsx.

transition: Animation de transition.

router-view: Conteneur d'affichage de la route, via router-link redirige vers le chargement du .vue qui sera rendu dans ce conteneur. router-link a été encapsulé dans le composant nav.vue.

script: Importation des composants Vue nécessaires pour le conteneur de niveau supérieur, y compris l'en-tête, la navigation et la page d'accueil. Il y a encore plus de paramètres riches que je n'ai pas étudiés, je plongerai plus profondément dans l'apprentissage ultérieur.

style: le style actuel du composant, j'ai configuré la syntaxe less pour le support. Pour écrire en less, changez style en <style lang="less">.

<template>
 <div>