Cómo transformar vue-cli, se mockjs webpack incrustado

Recientes listo para desarrollar una aplicación web, antes y después del final de los escenarios de desarrollo paralelo, lo que requiere simulacro de algunos de los datos, pero encontrar ejemplos de sitio web oficial vue no se ha ejecutado en el webpack.

datos de casos desde Internet.

 

En primer lugar, instalar andamios y initialize vue proyecto webpack

    // mundial install-cli VUE 
    NPM instalar VUE-cli - G
     // Crear un nuevo proyecto basado en una plantilla webpack 
    VUE init webpack maqueta Servidor- demostración
     // cambie al directorio del servidor maqueta-demo 
    cd maqueta servidor de demostración

En segundo lugar, instalar las dependencias

    // usamos axios http solicitud de inicio de 
    NPM instalar axios - Guardar
     // Para su instalación depende mockjs 
    NPM instalar mockjs --save-dev

En tercer lugar, crear un archivo de carpetas simulacros en la ruta raíz del proyecto

       3-1 index.js un nuevo archivo, obtener una solicitud pública

       3-2 util.js un nuevo archivo, para leer el archivo especificado JSON

       3-3 userInfo.json un nuevo archivo, para salvar algunos datos generados al azar

// Los index.js 
const Mock = los solicite ( ' mockjs ' ); // mockjs importan dependencias módulo 
const util = la requieren ( ' ./util ' ); // Herramienta de personalización de módulo
 // devolver una función 
module.exports = función ( App) {
     // escuchar http solicitud de 
    aplicación. GET ( ' / usuario / información del usuario ' , la función (REP, RES) {
         // archivo de datos JSON simulacro se lee cada vez que la respuesta de la solicitud
         // define método util.getJsonFile cómo leer tome archivo JSON analizado en objetos de datos y 
        var json = util.getJsonFile ( ' ./userInfo.json ');
         // uso json entrante método Mock.mock, los datos generados de vuelta al navegador 
        res.json (Mock.mock (JSON)); 
    }); 
} 


// util.js 
const FS = los solicite ( ' FS ' ); // introducido en el módulo de sistema de archivos 
const path = la requieren ( ' camino ' ); // módulo de vía de introducción 

module.exports = {
     // lectura archivo JSON 
    getJsonFile: function (filePath) {
         // leer el archivo especificado JSON 
        var json fs.readFileSync = (path.resolve (__ dirname, filePath), ' UTF-8. ' );
         //解析并返回
        volver JSON.parse (JSON); 
    } 
}; 

// userInfo.json 
{
     " error " : 0 ,
     " datos " : {
         " ID de usuario " : " @Id () " ,
         " nombre de usuario " : " @cname () " ,
         " fecha " : " @date () " ,
         " Avatar " : " @image ('" " Descripción " : " @paragraph () " " IP " : " @ip () " " e-mail " : " @email () " 
    } 
}

 

 

En cuarto lugar, el uso webpack-dev-servidor configurado el servidor web, en respuesta a una petición HTTP

webpack web oficial dijo webpack-dev-servidor puede ser utilizado para el desarrollo rápido de aplicaciones. No es necesario para construir su propio servidor web o instalar depende, en webpack-dev-servidor tiene un paquete bueno, sólo tenemos que ordenar que vienen con él. Ruta de acumulación / webpack.dev.conf.js archivo devserver propiedades de un recién añadido antes de la función de enganche, que se utiliza para controlar la petición HTTP desde la web.

 

 

 

 

enlace sitio web oficial: https://www.webpackjs.com/configuration/dev-server/#devserver

devserver es un objeto que tiene una gran cantidad de atributos con diferentes atributos para cambiar su comportamiento. En términos populares, un servidor devserver es el proceso de desarrollo :

// devserver nos proporciona proceso de desarrollo del servidor 
devserver: { 
    contentbase: path.join (__ nombredir, ' dist ' ), 
    la compresa: true , 
    puerto: 9000 
  } 

// desea utilizar al servir archivos estáticos, el propósito es informarle al servidor cuando se especifique el contenido, por defecto, usar el directorio actual como para proporcionar el contenido de directorios 
devServer.contentBase   

// devServer.after, después de todos los demás servicios internos middleware para proporcionar una implementación personalizada de funciones de middleware. 
devserver: { 
    la vez: la función (App) { 
      // hacer algunas cosas interesantes 
    } 
  } 

// devServer.allowedHosts, esta opción le permite añadir un servicio de lista blanca, lo que permite cierto acceso servidor de desarrollo. 
devserver: { 
    allowedHosts: [ 
      ' host.com ' ,
       'subdomain.host.com ' ' subdomain2.host.com ' ' host2.com ' 
    ] 
  } // antes devServer.before, todos los demás servicios dentro del middleware, el middleware proporciona la implementación de una función personalizada. devserver: { 
    antes: function (App) { 
      App. GET ( ' / some / ruta ' , la función (REQ, RES) { 
        res.json ({personalizado: ' Respuesta ' }); 
      }); 
    } 
  } // devserver. compresa, todos los servicios están habilitados compresión gzip: devserver: { 
    la compresa: true 
  } //







devServer.host especificar un host. El valor por defecto es localhost. Si desea acceder al servidor externo, el acceso IP local, especifique lo siguiente: 
devserver: { 
    Anfitrión: ' 0.0.0.0 ' 
  } 

// devServer.hot, características de calor webpack habilitación de reemplazo del módulo 
devserver: { 
    caliente: true 
  } 

// devserver .lazy cuando está activado perezosa cuando, solamente dev-servidor cuando se le solicite para compilar el paquete (paquete). Este webpack medios no supervisa los cambios en los archivos. Llamamos a modo inerte. 
devserver: { 
    el perezoso: true 
  } 

// Cuando devServer.historyApiFallback al utilizar la API de HTML5 Historia, cualquier respuesta 404 puede que tenga que reemplazar index.html 
devserver: { 
    historyApiFallback: true 
} 

// devServer.https defecto, dev- servidor para proporcionar servicios a través de HTTP. También puede seleccionar HTTP / 2 proporcionan el servicio con HTTPS:
devserver: { 
    HTTPS: true 
} 

// devServer.port especificar el número de puerto para escuchar solicitud: 
devserver: { 
    puerto: 8080 
} 

// devServer.proxy en localhost: 3000 en los servicios de back-end de ahí, puede permitir a esta agencia: 
devserver : { 
    Proxy: { 
        " / API " : " http: // localhost: 3000 " 
    } 
} 
// petición a / API / usuarios ahora se delega a los que solicitan http: // localhost : 3000 / API / usuarios

 

 

Cinco, inició la solicitud en un navegador, datos de acceso, de uso en axios archivo App.vue iniciar petición HTTP

　　5-1 Nueva archivo vue-axios en la carpeta del directorio src para añadir Axios Vue prototipo, escribir directamente this.axios cuando se llama, muy conveniente

importación Vue de  ' vue ' 
axios importación de  ' axios ' 

const http = { 
    instalar () { 
        Vue.prototype.axios = axios; 
    } 
}; 

exportar por defecto http

　　5-2 en las main.js vue-axios unidos a la instancia Vue

axios importación de  ' ./vue-axios ' 
Vue.use (axios)

　　5-3 métodos de invocación en App.vue

exportación por defecto { 
  nombre: ' App ' , 
  los datos () { 
    retorno { 
      userInfo: {} 
    } 
  }, 
  creado () { 
    este .getUserInfo (); 
  }, 
  Métodos: { 
    GetUserInfo () { 
      // this.userInfo = NULL; 
      esta .axios. obtener ( ' / user / userinfo ' ) 
      .then (({datos}) => {
         si (data.error === 0 ) {
           este .userInfo = data.data; 
        } demás{
           Este .userInfo = {}; 
        }    
      }); 
    } 
  } 
}

 

GET: http: // localhost: 8080 / user / 200 userinfo

ok prueba

 

 

En sexto lugar, para solucionar el error:

　　6.1   por usted puede usar comentarios especiales a desactivar algunas advertencias representa.   Debido a las limitaciones de la gramática vue demasiado estricta, por lo que la primera vez que se compila y ejecuta el proyecto ha sido el fracaso en encontrar razones Solución: Cuerpo / webpack.base.conf.js archivos, comentarios o eliminados: módulo-> reglas en las normas relativas a eslint