Uno, conoce vue-cli
1. Instale la última versión del
sitio web oficial de scaffolding vue-cli: https://cli.vuejs.org/zh/
Versión actual: v4.5.x
安装：npm install -g @vue/cli
2. Utilice andamios vue para crear un proyecto
La primera línea de comando
vue crear el nombre del proyecto (comenzando con una letra, sin usar mayúsculas) Enter
predeterminado (instalación automática)
manualmente (recomendado: instalación manual)
El segundo: crea vue ui en una interfaz gráfica
3.estructura de directorio vue-cli4.5
public
index.html
—Página html de entrada Recursos estáticos —archivos json activos
src : archivos de recursos (fuentes, iconos, imágenes) ' componentes : almacenar componentes públicos enrutador : archivos de ruta almacenar : almacenar vistas de administración del estado de vuex : almacenar filtros de páginas : almacenar filtros directivas de archivo : las instrucciones contienen carpetas personalizadas como mixins : métodos de almacenamiento de incorporación utils : almacena varios métodos de empaquetado comunes (archivo js) http : http solicitudes de interfaz encapsuladas almacenadas App.vue componente raíz main.js entrada de implementación del proyecto js
.gitignore : ignora los archivos cuando git envía.
babel.config.js archivo de configuración
babel.eslintrc.js Archivo de configuración EsLint (configuración de verificación de calidad del código)
package.json archivo de dependencia de configuración del nodo
README.MD documento de descripción del proyecto configuración
vue.config.js entorno de paquete web
禁用Eslint代码检查：
4. Preparación ambiental antes del desarrollo del proyecto
Estilo inicial
reset.css
Entorno de adaptación: rem, vw, vh, flex
xxxrem = xxxpx / html tamaño de fuente raíz
P.ej:
0.44rem = 44px / 100
px a vw, complemento rem:
@ moohng / postcss-px2vw
Dirección npm : https://www.npmjs.com/package/@moohng/postcss-px2vw
instalación:
npm install @moohng/postcss-px2vw --save-dev
icono svg: acerque sin distorsión, puede ajustar el estilo a través de css
1. Copie el código svg directamente, desventajas: la cantidad de código es relativamente grande 2. Trate directamente como una imagen img 3. sprites svg: svg Sprite
Lo anterior es el proceso completo de la instalación rápida del andamio de Vue, el marco principal de los tres marcos de front-end. Espero que mi escaso conocimiento del front-end pueda ayudarlo.
Bienvenidos a todos para agregar el número de grupo de intercambio de grupo: 954314851
