Use Vue-cli para crear proyectos y configuraciones comunes

Prefacio

Crear proyecto
carga diferida de vue-router
Configurar sass y adaptación de pantalla
Solicitud de datos Axios
Toast solicita
vuex
para descargar directamente

Crear proyecto
1. Instalar global vue-cli
npm install vue-cli -g

2. Genere la plantilla del proyecto (my_projuct es el nombre del proyecto)
vue init webpack my_projuct

3. Ingrese la carpeta del proyecto generado
cd my_project

4. Inicialización, la instalación depende de
npm install

5. Ejecute
npm run dev

5. Paquete
npm run build

Carga diferida de vue-router

Aplicación de una sola página, si no hay carga diferida de la aplicación, la primera vez que ingrese, habrá demasiado contenido para cargar y aparecerá una pantalla blanca larga, lo que no es propicio para la experiencia del usuario. La carga diferida puede dividir la página y cargarla cuando sea necesario La página correspondiente puede reducir efectivamente la presión y el tiempo de la primera carga.

Cargar la ruta original de index.js bajo el enrutador carpeta de
importación Vue from'vue '
importación Router from'vue-router
HelloWorld importación de '@ / componentes / HelloWorld'

Vue.use (enrutador)

exportar nuevo enrutador predeterminado ({ rutas: [ { ruta: '/', nombre: 'HelloWorld', componente: HelloWorld } ] })

Modificado a la carga diferida
import Vue from'vue '
import Router from'vue-router'

Vue.use (enrutador)

exportar nuevo enrutador predeterminado ({ rutas: [ { ruta: '/', componente: resolver => require (['@ / componentes / HelloWorld'], resolver) } ] })

Configurar sass y adaptación de pantalla
Configurar sass
1. Instalar sass-loader y node-sass
npm install sass-loader node-sass --save-dev

2. Use
Agregar lang = 'scss' al estilo en el archivo .vue, por ejemplo

Adaptación de la pantalla del terminal móvil
1. Cree un nuevo estilo de carpeta en la carpeta src y cree dos nuevos archivos scss-mixin.scss / reset.scss
mixin.scss
$ SCALE: 10;
$ BASE: 375 / $ SCALE; / / 375 es el tamaño del dibujo de diseño

// Más que mostrar puntos suspensivos
@mixin ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } // Texto de varias líneas, más que mostrar puntos suspensivos @mixin moreLine ($ num) { display: -webkit-box; / ** El objeto se muestra como un modelo de caja flexible / -webkit-box-orient: vertical; / Establecer o recuperar la disposición de los elementos secundarios del objeto de caja flexible / -webkit-line-clamp: $ num; / Número de filas mostradas / desbordamiento : oculto; / Ocultar contenido más allá de ** / }

@function rem ( Error de análisis de KaTeX: esperado '}', obtuvo 'EOF' al final de la entrada:…) {@return ( px / $ BASE) + rem
}

reset.scss
@import './mixin.scss';

$ tamaño_pequeño: rem (12);
$ tamaño_medio: rem (14);
$ tamaño_predeterminado: rem (16);
$ tamaño_grande: rem (18);
$ color_texto: # 666;
$ bg_color: # 32ba90;
$ border_color: #dedede;

cuerpo, div, span, encabezado, pie de página, navegación, sección, aparte, artículo, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, yo, b, em, textarea, button, input, select, figure, figcaption { padding: 0; margen: 0; estilo de lista: ninguno; decoración de texto: ninguna; borde: ninguno; font-weight: normal; familia de fuentes: PingFangSC-Light, helvetica, 'Heiti SC'; tamaño de caja: caja de borde; tamaño de fuente: 14px; -webkit-tap-highlight-color: transparente; -webkit-font-smoothing: antialiased; &: hover { contorno: ninguno; } } a, a: visitado { decoración de texto: ninguna; color: # 333; } input: focus { esquema: ninguno;





















borde: ninguno;
}
html, cuerpo { ancho: 100%; altura: 100%; -webkit-font-smoothing: antialiased; fondo: #fff; color: # 333; acolchado: 0; margen: 0; } // 禁止 用户 选中cuerpo { -webkit-touch-callout: none; -webkit-user-select: ninguno; -khtml-user-select: ninguno; -moz-user-select: ninguno; -ms-user-select: ninguno; selección de usuario: ninguno; } :: - webkit-scrollbar { display: none; }

.fl { flotar: izquierda; } .fr { flotar: derecha; } .clearfix: después de {/最 简 方式/ content: ''; bloqueo de pantalla; Limpia los dos; } .clearfix {/兼容 IE / zoom: 1; }

2. Configure el tamaño de fuente de html en el archivo App.vue

3.mixin.scss debe introducirse en el estilo del archivo .vue requerido, como HelloWorld.vue en los componentes

Solicitud de datos axios
1. Instalar axios
npm instalar axios - guardar

2. Cree una nueva carpeta api en la carpeta src y cree un nuevo archivo index.js
import axios from 'axios';
var qs = require ('qs');

if (process.env.NODE_ENV === 'desarrollo') { axios.defaults.baseURL = ''; // '' Complete el nombre de dominio solicitado )

importar VueRouter desde 'vue-router';

// obtener el método de solicitud
export const home = () => { return axios.get ('/ api / index'); } // método de post solicitud (incluidos los parámetros) export const article = (id) => { const params = qs.stringify ({'id': id}); return axios.post ('/ api / article', params); }

3. Llame a la interfaz

Consejos para tostadas

toast.png

1. Cree un componente de solicitud de Toast común
src / components / toast / index.vue

{ {toastTitle}}

Registre el componente como complemento
src / components / toast / plugin.js

importar Toast desde './index'

exportar predeterminado { instalar (Vue, opciones = {}) { const VueToast = Vue.extend (Toast) let toast = null

function $toast (params) {
  return new Promise(resolve => {
    if (!toast) {
      toast = new VueToast()
      toast.$mount()
      document.querySelector(options.container || 'body').appendChild(toast.$el)
    }
    toast.show(params)
    resolve()
  })
}

Vue.prototype.$toast = $toast

}
}

Cargar en main.js

// brindis
importar tostadas de './components/toast/plugin'
Vue.use (tostadas)

4. Usar en la página