429 andamios vue

Others 2020-03-31 16:11:47 views: null

A, vue es de un solo archivo de ensamblaje

Directora: Componente de registro previo Cuáles son las desventajas?

1- falta de resaltado de sintaxis

2- mala formato general

3- No se css código de escritura especial, etc.

Referencia: vue => Herramientas => componente de una sola fila

  1. ¿Qué es un solo archivo de ensamblaje? .Vue archivo sufijo
  2. Tres componentes (bloque de código: Andamio de forma automática rápida) de un solo archivo de ensamblaje
  • plantilla (estructura de la plantilla)
  • componente lógico código de script
  • estilo estilo
  1. notas:
    • componentes de un solo archivo, no se pueden utilizar directamente en el navegador, esto debe ser webpack herramientas de empaquetado, post-procesamiento, puede utilizar el navegador
    • vue-loader otras configuraciones

En segundo lugar, la introducción de andamios

2.X - Antecedentes del Sistema de Gestión

3.X - vuex

  1. vue-cli es herramienta de andamios vue

  2. ** Papel: ** vue-CLI proporciona un comando, por este comando podemos generar rápidamente un proyecto vue directa ( vue init XX).
    La estructura básica del proyecto, así como los elementos de configuración webpack todas las configuraciones Bueno

  3. ¿Por andamios herramienta ???

    Debido a la configuración webpack engorroso, desea evitar que un grupo de vue, pero no los desarrolladores de WebPack, por lo que el autor directamente vue todos los elementos utilizados en la configuración de todas escritas para ti, para que los desarrolladores no tienen que ir a la base de configuración webpack los elementos de configuración

  4. En otras palabras, el uso de esta herramienta vue-cli andamio, ya no tiene que preocuparse por problemas de configuración webpack, sólo tenemos que escribir código vue front-end para implementar las funciones pueden ser

En tercer lugar, el uso de herramientas de andamiaje

  • instalación: npm i -g vue-cli
  • Inicialización proyecto vue: vue init webpack 项目名称
    • Por ejemplo: vue init webpack vue-demo01
  • proceso de instalación del proyecto:
? Project name # 回车
? Project description # 回车
? Author  # 回车
? Vue build standalone  # => 运行时+编译 => 详见下面的问题1 
? Install vue-router? # Yes
? Use ESLint to lint your code? # Yes => 详见下面的问题2
? Pick an ESLint preset Standard  # standard
? Set up unit tests # No
? Setup e2e tests with Nightwatch? # No
? Should we run `npm install` for you after the project has been created? # (recommended) npm
  • ¿Cómo empezar
To get started: 

cd vue-demo01
npm run dev
  • "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    • --inline: significa que la información se muestra en
    • -progress: barra de progreso
    • --config: especificar qué archivo como el desarrollo perfil webpack

En cuarto lugar, el archivo de proyecto, proyecto vue descripción del proceso de la lógica

El primer paso: Carpeta, la segunda vez para bien-archivo

# build - webpack 相关配置
- build.js - 生产环境构建代码
- check-version.js - 检查 node、npm 等版本
- util.js 构建工具相关
- vue-loader.config.js - vue-loader 的配置文件
- webpack.base.conf.js - webpack 的基础配置
- webpack.dev.conf.js - webpack 开发环境配置
- webpack.prod.conf.js - webpack 发布环境配置

# config - vue 基本配置文件(比如: 监听端口(17),  使用 eslint: (26))
- dev.env.js - 开发环境变量
- index.js - 项目的一些配置
- prod.env.js - 生成环境变量

# node_modules - node 安装的依赖包

# src - 资源文件夹,  以后我们就在这个目录下写代码
- assets - 静态资源 (图片 css 都放在这)
- components - 公用组件
- router - 路由
- App.vue - 项目的根组件
- main.js - 项目的入口文件(总逻辑)

# static - 静态资源不要打包的文件 (图片 json 数据之类的)
- .gitkeep git 保持文件, 因为 git 上传, 会忽略空文件夹

# .babelrc - babel 配置文件,  (es6 语法编译配置, 将 es6 转化为浏览器能够识别的代码)

# .editorconfig - 定义代码格式
- charset = utf-8 编码 utf8
- indent_style = space 缩进 空格
- indent_size = 2 缩进字符
- end_of_line = lf 回车作为换行的标记
- insert_final_newline = true 最近一空白行作为结尾
- trim_trailing_whitespace = true 清除最结尾的空白
- 如果使用 ?
- 1. 安装 vscode 的 editorConfig for vscode
- 2. eslint 检测修复后

# .eslintignore - eslint 检测忽略的地方
- /build/
- /config/
- /dist/
- /\*.js 根目录下带.js 的

# .eslintrc.js - eslint 的配置文件

# .gitignore - git 的忽略文件

# .postcssrc.js - css 配置文件 (啥也没有处理)

# index.html - 页面入口

# package.json - 项目配置文件

4.1 Referencia: estándar

4,2 Referencia: src

  • activos de recursos estáticos

  • componentes de montaje

  • App.vue componente root => salida ruta especificada

    • Después de los andamios, todos los componentes pagará a la app.vue

  • La #app aplicación o index.html en #app, app.vue cubrirá la antigua
    pueden verificar mediante la adición de un atributo de título, respectivamente

  • Exportación de enrutamiento componente de la plantilla a escribir en app.vue

  • main.js

    • archivo de entrada js
    • Acción: Crear instancia vue, la introducción de otros componentes en y colgado a ser introducido ejemplo vue [enrutamiento]
    • Vue.config.productionTip = false ==> no hay sugerencias de impresión
    • Detectar ningún nuevo: ver la parte posterior de la advertencia detectar
    new Vue({
  el:  '#app',  // 目标显示
  router,    // 挂载路由
  components:  { App },  // 注册组件 App
  template:  '<App/>' // 模板显示组件 app
})

  • ruta / index.js => Ruta

  • Recuerda siempre: Vue.use(Router)la construcción modular debe instalar el plug-enrutamiento, Js es un módulo

  • El sitio web oficial también mencionó https://router.vuejs.org/zh/installation.html

diagrama lógico 4.3 empate (documento describe varias entradas del proyecto)

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo01</title>
</head>

<body>
    <!-- （1）运行服务器会打开index.html入口页面；（2）然后自动引入main.js（会被打包成app.js）；（3）main.js引入根组件App.vue 、路由router；（4）根组件App.vue负责显示所有的子组件；（5）路由router负责管理子组件（路由规则管理）；（6）components下是子组件；（7）assets是css、图片、js等静态资源 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <!-- 自动引入的app.js就是主入口文件main.js -->
</body>

</html>

main.js

// 引入vue、App根组件、路由router，然后实例化vue，挂载路由，指定实例化vue的组件是根组件

import Vue from 'vue'
import App from './App' // （1）App.vue 的后缀 可以省略；（2）引入根组件。
import router from './router' // （1）引入路由，在下面挂载；（2）省略了router目录下的index.js

Vue.config.productionTip = false

/* eslint-disable */
new Vue({
    // el : 指定边界 占位置 【不能删】
    el: '#app',
    router, // 挂载路由
    components: { App }, // 注册组件
    // （1）template > el；(2)App组件当成标签来用
    template: '<App/>'
})

index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import HelloWorld from '../components/HelloWorld.vue'
// import HelloWorld from 'C:/....../src/components/HelloWorld'

// Vue 把 router 当成组件安装了一下
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

App.vue

<template>
    <div id="app">
        <img src="./assets/logo.png" />
        <!-- APP.vue是根组件，因为这里有router-view，出口，所有的出口都显示在这里。 -->
        <router-view />
    </div>
</template>

<script>
    export default {
        name: "App"
    };
</script>

<style>
    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

V. Problema

5,1 - Pregunta 1: Tanto el modo de compiladores y @

Referencia: vue.js => Instalación => Construcción de diferentes versiones de esta explicación

  • Elegimos Runtime + Compilador modo: (+ editor de ejecución)
  • el modo de tiempo de ejecución : Vue utiliza para crear casos, como la representación y el procesamiento de código de DOM virtual. Arranque sustancial de todos los demás compilador.
  • Compilador : cadena de plantilla se utilizará para compilar el código JavaScript función de representación.
// 需要编译器
new Vue({
  template:  '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div',  this.hi)
  }
})
  • Versión completa selección : ES Módulo (herramienta de construcción basada): vue.esm.js
    • build => webpack.base.config.js => 37 filas de alias (alias) '$ vue': 'vue / dist / vue.esm.js',
  • @ : Es la ruta absoluta del src
    • build => webpack.base.config.js => 38 filas de alias (alias) '@': determinación ( 'src'),
router/index.js =>
	import HelloWorld from '@/components/HelloWorld'
	import HelloWorld from 'C: /users/.../src/components/HelloWorld'

5.2 - Problema 2: ESLint

  • ** concepto: ** ESLint es la identificación y presentación de informes de coincidencia de patrones en el código JavaScript, su objetivo es asegurar la consistencia de los errores de código y evitar.

    • En vscode y otras herramientas de edición, puede provocar error de sintaxis
    • En muchos sentidos, JSLint, JSHint similares, aparte de unas pocas excepciones:

  • Cómo utilizar eslint?

    • 1- instalar vscode enchufe ESlint
    • 2-vscode añadir algunos ajustes de configuración en
     "editor.formatOnSave":  true,  // 每次保存的时候自动格式化
  "eslint.autoFixOnSave":  true,  // 每次保存的时候将代码按eslint格式进行修复
  "eslint.validate":  [
    { "language":  "html",  "autoFix":  true }, 
    { "language":  "vue",  "autoFix":  true }, 
    { "language":  "javascript",  "autoFix":  true }, 
    { "language":  "wpy",  "autoFix":  true }
  ], 
  "prettier.eslintIntegration":  true,  // #让prettier使用eslint的代码格式进行校验
  "javascript.format.insertSpaceBeforeFunctionParenthesis":  true, 
  "editor.formatOnType":  true // 让函数(名)和后面的括号之间加个空格

  • ** Cerca Eslint: **

    • Referencia: config / index.js ==> 26 de línea: dev.useEslint conjunto de falsa

    • Reinicio del proyecto: npm run dev

3 5.3 pregunta: vscode formato de plug-in de instalación Prettier

  • Instalación de enchufe vscodePrettier -Code formatter
  • . Función 1 : Shift + Alt + F => código de formato
  • Función 2 : con eslint: véase más arriba Configurar un problema

5.4 Pregunta 4: Detección de Advertencia

eslint-disable-next-line # 忽略检测下一行  可以使用单行注释/多行注释, 其他都是多行注释
eslint-disable # 忽略当前整个文件  多行注释   /*    */

eslint-disable no-new # 忽略前面是new开头

En sexto lugar, la presentación de proyectos

Preparación: Encienda el servidor de base de datos +

¿Qué proyecto vue de aprender?

  1. Cómo utilizar vue con herramientas de andamiaje para completar un proyecto
  2. Uso ElementUI aprendizaje biblioteca de componentes
  3. negocios
  • 3.1 Conexión y desconexión
  • 3.2 Autorización del usuario + + + Menú de rol
  • 3.3 Módulo de Mercancías

Siete abrir un servidor local

** Draw: ** Camino interfaz de acceso:
portada ===> servidor de la Interfaz ===> Los servidores de bases de datos ==> Base de datos

El primer pequeño paso: Abrir: servidor de base

Abrir phpStudy, haga clic启动

El segundo paso pequeño: Base de datos de importación

  1. abierto navicat

  2. Haga clic en 连接: Creación de una MySQLconexión

  3. Nombre de usuario y contraseña: root root (no puede garabato) y esta es la misma configuración en la configuración

  4. Crear una base de datos: shop_adminDo not garrapatos, seleccione la cuenta regresiva encontrar UNT-8

  5. Haga doble clic para abrir la base de datos

  6. Importación sql语句=> Derecho Ejecutar SQL Archivo => Librería-api último archivo sql

    Si no ocurre nada: Tabla => actualización correcta

El tercer paso pequeño: servidor de interfaz abierta

  1. abierto shop-api
  2. corrida npm start
  3. Mostrar el éxito: API 接口服务启动成功，占用端口 8888

El cuarto paso pequeño: Interfaz de prueba

http: //localhost: 8888/api/private/v1/login?username=admin&password=123456

项目使用接口 :  (记得保存)
// shop-api里面有

El quinto paso pequeño: Uso

  • Todos los días para hacer el proyecto antes:
    1. Cada uno debe abrir primero phpStudylamySql
    1. Abrir cada vez shop-api, corriendonpm start

notas

# 脚手架创建项目

1. 安装脚手架 : `npm i vue-cli -g`
2. 检测 : `vue -V` (version)
3. 使用 : `vue init webpack demo01`

​```js
> npm 清除缓存
> 1. 路径 : C:\Users\ma250\AppData\Roaming\npm-cache
> 2. 命令  npm cache clean -f

> 1. 假如  npm i XXX 报错了
> 错误 : LINK  NetWork 找不到包
> 清缓存 : `npm cache clean -f `
> npm i XXX

> 2. vue init webpack demo01  报错
>   清缓存 : `npm cache clean -f `
> npm i  ? 成功率低
>  vue init webpack demo01  再来一次
​```


# 文件介绍
- build - webpack 的配置文件
- config - vue 项目的配置文件
- node_modules 依赖包
- src : 源文件 (重点)
- static - 静态文件 (不打包的)
  .gitkeep 保持一个空文件夹能够上传到 github/码云等托管代码网站
- .editorconfig 编辑器配置

  - 1. vscode 插件 : `EditorConfig fro VS Code`  【Vetur】
  - 2. 找到 .editconfig 配置

- .eslintignore eslint 忽略检测的部分
- .gitignore git 上传忽略的
- .postcssrc.js 处理 css 的配置文件
- index.html 入口页面


# src
- assets - 静态资源 (打包的)
- components 组件
- router 路由
- app.vue 根组件


# eslint
1. 作用 :检测代码是否规范 , 保证代码的一致性 和避免错误

2. 如何使用
- 安装 vscode 插件 : `ESLint`
- 设置配置

3. ctrl + S => 自动格式化 + 修复
4. 参考 : Prettier + Standand

5. 两个忽略注释
- 忽略下一行 : // eslint-disable-next-line /_ eslint-disable-next-line _/
- 忽略文件的全部警告 /_ eslint-disable _/

# @ 其实就是 src 的绝对路径

Sintaxis ocho módulos, ES6 (clase base webpack base)

8,1 exportación exportación por defecto por defecto un módulo (tipo simple tipo complejo +)

  • Exportación: por defecto de exportación

  • El valor por defecto sólo puede exportar una

    let str = 'abc'
let num = 20;
let obj = { name : 'zs' }

export default num
// export default obj

  • Importación: importación

  • nombres de importación pueden ser arbitrarias

  • import res from './a.js'
console.log(res)

módulos múltiples exportación 8,2 exportación se colocan en un objeto

  • ** Exportación: Exportación **

  • // 逻辑模块 
// 登录一个函数
export let login = () =>  {
  console.log('登录');
}
// 注册一个函数
export let register = () =>  {
  console.log('注册');
}

  • Importación: importación

  • // 方式1
import * as res from './a'
console.log(res);
res.login()
res.register()

// 方式2
import { login,  register as reg } from './a'
login()
register()

Módulo de 8,3 importación

import axios from 'axios';

a.js

// 导出一些数据
let num = 30
let obj = { name: 'zs' }

// 只能导出一个 default 默认 只能由一个
export default num
export default obj

// 可以这样写
export default {
    num,
    obj
}


// 登录
let login = () => {

}


// --------------------------------



// 导出 登录函数
export let login = () => {
    console.log('login---')
}

// 导出注册函数
export let register = () => {
    console.log('register----')
}

mian.js

/**
 * 1. import + export default
 * 2. import + export
 * 3. import axios from 'axios'
 *
 * axios.get().then()
 */

/**
 * 1. import + export default
 *  import 引入
 *  export default  导出
 */

// res 可以随便写
import aaa from './a.js'
console.log(aaa)


// ---------------------------------------- 


/**
 * 2. import + export  【export导出的是对象】
 */
//  export 导出的是一个对象 (登录+注册)
// 方式1 :
import * as res from './a.js'
console.log(res)
res.login()
res.register()

// 方式2 :
import { login, register as reg } from './a.js'

login()
reg()


// -----------------------


// 解构
let obj = {
    name: 'zs',
    age: 30
}

function test(obj) {
    // let n = obj.name
    // let a =  obj.a

    let { name: n, age } = obj
    console.log(n, age)
}

test(obj)

// 起别名 as 或者  :

Supongo que te gusta

Origin www.cnblogs.com/jianjie/p/12605656.html
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com