Serie vue - vue2-webpack2El camino de las trampas en la construcción de marcos

react, vue, angular representan3La idea de ingeniería frontal, aprender las tres principales marcos es entender sus conceptos centrales, como componentes, ciclo de vida, flujo de datos unidireccional, enlace bidireccional, etc. Estas conceptos en el desarrollo sin marco, pocas personas piensan de manera sistemática, para los principiantes, muchos conceptos no han sido expuestos, no saben por dónde empezar un proyecto de react, vue o angular, a continuación, construiré un proyecto de vue desde cero, aprendiendo mientras hago el proyecto.

1、Quiero usar vue, ¿qué debo hacer primero?

Quiero aprender vue, lo primero que debo hacer es ver la descripción en el sitio web de vue:https://cn.vuejs.org/v2/guide... , al mirar con atención, vue ahora tiene1.X y2La diferencia entre .X y2.X。

Elegí la versión de vue, busqué en Zhihu sobre la forma de construir un framework de vue, vi varias contribuciones de antiguos expertos, y aprendí sobre un proyecto llamado cooking ¿Qué es tan bueno?

El objetivo de cooking es liberarte de la configuración de construcción tediosa y ahorrar la molestia de instalar una multitud de dependencias de desarrollo para cada proyecto. Basado en webapck pero con opciones de configuración más amigables y un mecanismo de configuración de extensión fácil de usar, te permite concentrarte en el proyecto y olvidarte de la configuración.

¡Wah, viendo que el sitio web de cooking lo presenta tan bien, decidí seguir su tutorial, hice un poco de experimentación, pero no me gustó, parece muy alto y elegante configurar el entorno con un solo clic, pero aún necesitas aprender a usar cooking, y necesitas instalar cooking localmente, lo que me hace sentir mareado, aunque he accedido con éxito al sitio web en el navegador, aún lo dejé.

En este momento, solo puedes construir el proyecto desde cero.

2、crear un nuevo vue en github2-Proyecto web.

Abre la página principal de github, haz clic en start a project.

Luego verás Create a new repository, necesitas llenar la información del proyecto, este paso se salta.

Luego el proyecto estará listo, clonalo localmente.

3、inicializar npm

Usa shell o cmd para entrar en el directorio raíz del proyecto y ejecutar el siguiente comando, salta directamente las opciones, finalmente se generará el archivo package.json.

npm init

4、instalar webpack

La sensación de no poder vivir sin webpack, pero configurar webpack también puede hacer que uno no pueda vivir, es demasiado difícil recordar los parámetros de configuración de webpack, pero no te preocupes, ya he resuelto este paso por ti, todos debemos usar 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、创建.babelrc文件。

babel少不了，注意这里不是用react了，而是vue，包括下面几个插件，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、在package.json添加start命令

直接使用webpack-dev-server启动，哇塞，一堆报错，说少了哪个module，这个简单，因为配置文件里面引用的一堆module，还没有安装到项目呢，这时候一个个安装好就行了。

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

8、项目入口main.js文件。

El nombre de este archivo puede ser lo que desee, el código es bastante simple, instanciar un Vue y un enrutador, ¿no parece muy similar al archivo de entrada de react? Claro, estoy haciendo un SPA, por lo que utilizo la forma de entrada única, si no es un modo SPA, no es este tipo de configuración.

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); //registro de solicitud http
Vue.use(VueRouter); //registro de rutas
// instancia de rutas
const router = new VueRouter({
 // mode: 'history', //H5 El modo de ruta, se necesita renderizado en el servidor para evitar404error
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  No obligatorio
//  module.hot.accept('./App.vue', () => render);
// }

9、rutas routes.js

Las rutas y React son muy similares (casi iguales), aquí las páginas Vue utilizan el sufijo .vue para escribir.

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、contenedor superior de página única App.vue

Desde index entra, es este archivo, ahora comenzaré a aprender el núcleo de Vue.

template: el lenguaje de plantilla de Vue, también conocido como jsx.

transition: animación de transición.

router-view: contenedor de visualización de rutas, a través de router-link carga la .vue y se renderiza en este contenedor. router-link se encapsuló en el componente nav.vue.

script: Se importaron los componentes Vue necesarios para el contenedor de nivel superior, incluyendo la cabecera, la navegación y la página de inicio. Hay más configuraciones ricas que no he investigado, profundizaré en ellas en el aprendizaje posterior.

style: el estilo actual del componente, he configurado soporte de sintaxis less. Cambia style a <style lang="less"> para escribir 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>
 cuerpo, html {
  fuente-tamaño: 12px;
  margin: 0;
  padding: 0;
 }
</style>

En el proceso de tropiezo, también se encontraron varios errores, que se resolvieron finalmente de manera completa.

Si deseas ver el código de componentes de vue más detallado, puedes ver el proyecto específico:https://github.com/hyy1115/vu...

A continuación, continuaré mejorando este proyecto, explorando una implementación de arquitectura de vue más flexible.

Imágenes de ejecución:vue-Demo de Kuke

Resumen

Lo mencionado anteriormente es lo que el editor les ha introducido sobre la serie vue - vue2-webpack2La siguiente es una introducción del editor a la serie vue - vue, espero que pueda ayudar a todos. Si tienen alguna pregunta, déjenme un mensaje y el editor les responderá a tiempo. También agradezco mucho el apoyo de todos a los tutoriales de grito!