Comment construire le framework vue2-webpack2

Cette fois, je vais vous montrer comment construire le framework vue2-webpack2. Quelles sont les précautions lors de la construction du framework vue2-webpack2. Ce qui suit est un cas pratique, jetons un coup d'œil.

react, vue et angulaire représentent trois idées d'ingénierie frontale. L'apprentissage des trois principaux frameworks consiste principalement à comprendre leurs concepts de base, tels que les composants, le cycle de vie et. Flux de données unidirectionnel, liaison bidirectionnelle, etc. Dans le développement sans framework, peu de gens réfléchissent à ces concepts de manière aussi systématique. Pour les novices, ils n'ont jamais été exposés à de nombreux concepts et ne savent pas par où commencer un projet de réaction, de vue ou d'angle. Créez un projet Vue à partir de zéro et apprenez les idées de Vue tout en travaillant sur le projet.

1. Si je souhaite utiliser vue, que dois-je faire en premier ?

Si je veux apprendre vue, la première chose que je fais est d'aller sur le site officiel de vue pour lire l'introduction : https://cn.vuejs.org/v2/guide... , regardez de plus près regardez, vue a maintenant 1.X La différence avec 2.X est très bonne, je choisis résolument 2.X.

Après avoir sélectionné la version vue, j'ai cherché dans Zhihu comment créer le framework vue. Après avoir lu divers partages de personnes âgées, j'ai découvert une bonne chose appelée la cuisine.

Le but de Cooking est de vous libérer des configurations de build fastidieuses et des tracas liés à l'installation d'un tas de dépendances de développement pour chaque projet. Basé sur webapck mais avec des éléments de configuration plus conviviaux et un mécanisme de configuration étendu facile à utiliser, vous pouvez vous concentrer sur le projet et oublier la configuration.

Wow, j'ai vu que le site officiel de la cuisine offrait une si bonne introduction, alors j'ai suivi son tutoriel de manière décisive. Après avoir déconné pendant un moment, j'ai trouvé qu'il n'était pas confortable à utiliser. L'environnement de configuration en un clic semblait très élevé. fin, mais je devais encore apprendre à utiliser la cuisine et j'ai dû installer des cookies localement, ce qui m'a donné le vertige. Même si j'ai réussi à accéder à la page Web dans le navigateur, j'ai quand même abandonné cette bonne chose.

Pour le moment, vous ne pouvez créer le projet qu’à partir de zéro.

2. Créez un nouveau projet vue2-web sur github.

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

Ensuite, vous verrez Créer un nouveau référentiel, qui vous demande de renseigner les informations sur le projet. Cette étape est ignorée.

Ensuite, le projet est construit et cloné localement.

3. Initialiser npm

Utilisez shell ou cmd pour entrer dans le répertoire racine du projet, exécutez la commande suivante, ignorez directement les options, et enfin le fichier package.json sera généré.

npm init

4. Installer le webpack

On a l'impression que vous ne pouvez pas vivre sans Webpack, mais la configuration de Webpack vous empêchera également de vivre. Il est trop difficile de se souvenir des éléments de configuration de Webpack, mais ne vous inquiétez pas, je vous ai aidé à réaliser cette étape. doit utiliser webpack2.

npm install --save-dev webpack

Un serveur frontal est également nécessaire pour les mises à jour à chaud, et webpack-dev-server apparaît.

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

5. Créez le fichier webpack.config.js

Ce n'est pas différent du fichier de configuration webpack en réaction. Il peut être transplanté et utilisé avec juste un léger changement.

Ne mettez jamais js et vue ensemble. Si ça ne marche pas, il faut les séparer. Je dois marcher sur cette fosse. J'ai perdu plusieurs heures à chercher cette fosse dans l'endroit le plus caché.

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.

Babel est indispensable. Notez que React n'est pas utilisé ici, mais vue, y compris les plug-ins suivants, flow-vue et 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. Ajoutez la commande start dans package.json

Utilisez directement webpack-dev-server pour démarrer, wow, un tas d'erreurs, disant quel module manque, c'est simple, car un tas de modules référencés dans le fichier de configuration n'ont pas été installés dans le projet, alors installez-les simplement un par un à ce moment.

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

8. Fichier main.js d’entrée du projet.

这个文件名自己喜欢咋取就咋取，代码挺简单的，实例化一个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改成