Proyecto de construcción de una base de front-end -Vue.js

Capítulo 12 Creación de un proyecto

12,0 herramienta de línea de comandos (CLI)

https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI

Vue proporciona un oficial de la CLI , una aplicación de una sola página (SPA) de forma rápida construir complejos andamios. Proporciona baterías-incluida la construcción moderna extremo frontal del flujo de trabajo. Sólo toma unos minutos y puede estar en funcionamiento con una sobrecarga térmica, verificación de pelusa cuando se guarda, y construye un entorno de producción disponibles. Más detalles se pueden encontrar en el documento de Vue CLI .

12.1 inicializar el proyecto

comando CLI para instalar la herramienta:npm install -g @vue/cli @vue/cli-init

Después de la instalación, utilice vue -Vel comando para comprobar el número de versión;

Utilizar vue init webpack myapppara construir un proyecto llamado miaplicacion:

Vue todavía utilizan para preguntar el camino, hemos iniciado una información del proyecto

Nombre del proyecto: nombre del proyecto
Descripción del proyecto: Descripción del Proyecto
Autor: Autor
vue de construcción:
- La primera: con la mayoría de los desarrolladores
- La segunda: Sólo hay tiempo de ejecución
Instalar vue-router? Se instala Vue-enrutador
Uso ESLint a la pelusa de su código? ESLint si se valida nuestra gramática.
Elija una conser ESLint: qué usos especificación de sintaxis para comprobar nuestro código:
- Estándar: Especificación Estándar
- Airbnb: Audemars Piguet cumple con las especificaciones
La prueba se configura unidad: el establecimiento de pruebas unitarias
E2E pruebas de configuración: final listo para la prueba final
¿Hay que ejecutar 'NPM instalar': no ayuda a descargar de terceros paquete de este proyecto es necesario
- NPM utilizar para descarga
- Use hilo para descargar

To get started:

  cd myapps
  npm run dev   // 使用命令启动项目
  
  -----
  Your application is running here: http://localhost:8080  
  
  打开浏览器，访问 http://localhost:8080  
  看到浏览器的欢迎界面，表示项目运行成功

Aquí Insertar imagen Descripción

Estructura 12.2 Introducción del Proyecto

├── build				webpack打包相关配置文件目录
├── config				webpack打包相关配置文件目录
├── node_modules		 第三方包
├── src					项目源码(主战场)
│   ├── assets			 存储静态资源，例如 css、img、fonts
│   ├── components		 存储所有公共组件
│   ├── router			 路由
│   ├── App.vue			 单页面应用程序的根组件
│   └── main.js			 程序入口，负责把根组件替换到根节点
├── static				可以放一些静态资源
│   └── .gitkeep		 git提交的时候空文件夹不会提交，这个文件可以让空文件夹可以提交
├── .babelrc			 配置文件，es6转es5配置文件，给 babel 编译器用的
├── .editorconfig		 给编辑器看的
├── .eslintignore	      给eslint代码风格校验工具使用的，用来配置忽略代码风格校验的文件或是目录
├── .eslintrc.js		 给eslint代码风格校验工具使用的，用来配置代码风格校验规则
├── .gitignore			 给git使用的，用来配置忽略上传的文件
├── index.html			 单页面应用程序的单页
├── package.json		 项目说明，用来保存依赖项等信息
├── package-lock.json	  锁定第三方包的版本，以及保存包的下载地址
├── .postcssrc.js		  给postcss用的，postcss类似于 less、sass 预处理器
└── README.md			 项目说明文档

cheque 12,3 sintaxis

Nota: Si elegimos la hora de construir el proyecto Use ESLint to lint your codeentonces hay que atenerse estrictamente a la hora de escribir el código JavaScript Estilo estándar estilo de código de regla gramatical:

Utilizar dos espacios - guión
Cuerda comillas simples , excepto cuando sean necesarios escapado -
Es sin variables redundantes ya - que está dando lugar a un gran número de fuentes de errores!
No coma - que igual de bien. No mientas a ti!
La primera línea no (, [o el comienzo de `` `
- Este es un punto y coma se omite el único lugar puede causar problemas - la herramienta se ha añadido en la detección automática!
- detalle
Después de que los espacios de palabras clave if (condition) { ... }
Después de los espacios de nombre de la función function name (arg) { ... }
Palo con congruentes ===abandonar ==la necesidad de check in, pero null || undefinedse puede utilizar obj == null.
Asegúrese de tratar de respuesta de error Node.js pasado en errparámetro.
Cuando se combina con la variable global utilizando el navegador windowprefijos - documenty navigatorcon la excepción
- Para evitar el uso inadvertido de estos nombres de variables globales mirar muy ordinarios, open, length, event, así name.

Dijo tanto que ver esto siguió la Norma ejemplo archivo de especificación de código de la misma. O, hay una gran ola de este proyecto utilizando estandarizados códigos de referencia.

Nota: Si usted no cumple con estas reglas de la gramática, no se puede utilizar en la construcción de ESLint el corrector gramatical proyecto

12.4 Código del artículo de vista previa

12.4.1 base de conocimientos

El modo estricto

http://javascript.ruanyifeng.com/advanced/strict.html

El modo estricto tiene principalmente las siguientes limitaciones.

Las variables deben ser declaradas antes de su uso
Los parámetros de función no pueden tener el mismo atributo de nombre, de lo contrario un error
No se puede utilizar withdeclaraciones
Puede asignar atributo no de sólo lectura, de lo contrario un error
No se puede utilizar el prefijo 0 indica número octal, de lo contrario un error
No se puede eliminar la propiedad no se puede eliminar, de lo contrario un error
No se puede eliminar variables delete prop, se quejan, sólo se puede eliminar la propiedaddelete global[prop]
evalNo introducir las variables en su ámbito de inclusión
evalY argumentsno puede ser reasignado
argumentsNo refleja automáticamente los cambios en los parámetros de función
No se puede utilizararguments.callee
No se puede utilizararguments.caller
Prohibido thisel objeto global
No se puede utilizar fn.callery fn.argumentsobtener la pila de llamadas a funciones
Un aumento de las palabras reservadas (como protected, staticy interface)

modular ES6

http://es6.ruanyifeng.com/#docs/module

resumen:

salida del módulo CommonJS es una copia de un valor, la salida del módulo ES6 es un valor de referencia;
CommonJS tiempo de ejecución del módulo se carga, ES6 es un módulo de interfaz de salida en tiempo de compilación;
módulos ES6 utilizará automáticamente el modo estricto, si usted tiene más la cabeza del módulo "use strict";;
ES6 entre los módulos, la parte superior thispunto undefined; CommonJS módulo superior thispuntos al bloque actual;

12.4.2 ejecutar código de carga

main.js

// 入口文件

// 以es6模块的方式引入 vue APP router 三个模块;
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  // 获取节点对象
  el: '#app',
  // 引入路由
  router,
  // 本实例的私有组件
  components: { App },
  // el 与 template 在同一个实例中出现，
  // 根据生命周期的执行顺序可知，template中的内容会替换el选中的内容
  template: '<App/>'
})

Roter / index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue 中插件引入语法 
// https://cn.vuejs.org/v2/guide/plugins.html
Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    // 定义一个路由规则
    {
      path: '/', // 请求路径
      name: 'HelloWorld', // 路由名称标识
      component: HelloWorld //请求此路由时，使用的组件
    }
  ]
})

componentes / HelloWorld.vue

export default {
  // 模块名字
  name: 'HelloWorld',
  // 组件中 data 数据必须是一个有返回值的方法
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

(main.js->template: '<App/>')替换 (index.html->div#app);

(index.html-><App/>) --> (components: { App })

( components: { App }) --> (import App from './App' -> src/App.vue)

(App.vue -> <router-view/> -> 路由组件) --> (main.js-> router)
========此项决定了页面展示那个组件内容 ========

({path: '/',name: 'HelloWorld', component: HelloWorld }) --> (import HelloWorld from '@/components/HelloWorld')

(src/components/HelloWorld.vue) --> <router-view/>

12,5 añadir su propio componente de enrutamiento

Modificar los router / index.js, añadir su propia ruta

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入(导入) 组件
import MyRouter from '@/components/MyRouter'

Vue.use(Router)

// ES6模块导出语法
export default new Router({
  routes: [
    {path: '/',name: 'HelloWorld', component: HelloWorld },
    // 添加自己的路由及组件
    {
      path:'/myrouter',
      name:'MyRouter',
      component:MyRouter
    }
  ]
})

Añadir archivo en la carpeta MyRouter.vue componentes, escribir sus propios componentes Código:

<template>
  <div class="mypage">
    {{mydatas}}
  </div>
</template>

<script>
  // 模块化导出
  export default {
    data(){
      return {mydatas:'lksadjflks'}
    }
  }
</script>

<style>
  .mypage{
    width: 200px;
    height: 50px;
    background: pink
  }
</style>

renderizado del navegador de la siguiente manera:

Aquí Insertar imagen Descripción