Conocimiento de aprendizaje del marco frontal de VUE (capa de vista)

VUE (capa de visualización)

1. Preparación del conocimiento

构建用户界面
渐进式框架
可自底向上逐层应用
简洁的模板语法来声明式地将数据渲染进 DOM 的系统
npm 是 JavaScript 世界的包管理工具
npm 是是 Node.js 平台的默认包管理工具
npm集成在node中
通过 npm 可以安装、共享、分发代码、管理项目依赖关系

En segundo lugar, el proceso de instalación.

1. Instala node.js

1. Nodo de descarga del navegador: http://nodejs.cn/download/
2. Instale el software del nodo: node-v16.14.2-x64.msi
3. Comando de prueba: nodo -v
4. Prueba del administrador de npm: npm -v

2, instalación de npm y cnpm - Node Package Manager

1. 安装cnpm：npm install -g cnpm --registry=http://registry.npm.taobao.org
2. Agregue espejo cnpm Taobao: npm install -g cnpm --registry=https://registry.npm.taobao.org
3. Vuelva a actualizar el espejo npm: npm i npm -g
4. Actualizar npm: cnpm install npm -g
5. Actualice e instale cnpm: npm install cnpm -g
6. Última versión estable: cnpm install vue

3. Instalación de Scaffolding vue.cli - Vue CLI = Vue + js plugin

1. Instale la herramienta de compilación de andamios vue-cli: npm install -g vue-cli
2. Instale vue-cli globalmente: npm install --global vue-cli
3. Vuelva a instalar el andamio @vue.cli: cnpm i @vue/cli -g
4. Comprobar: vue-V

3, empaquetador de módulos estáticos webpack (agrupador de módulos)

1. versión del paquete web: paquete web -v
2. Instalar globalmente: npm install webpack webpack-cli –g
3. Para eliminar un paquete: npm uninstall <nombre del paquete>
4. Para eliminar un paquete: npm uninstall -g <nombre del paquete>
5. Paquete de actualización: npm desactualizado -g --depth=0
6. Actualización de detección de espejo de Taobao: cnpm desactualizado -g --profundidad=0
7. Paquetes de actualización: npm update -g <nombre del paquete>
8. Compilación rápida: npm init --yes

4. Instale vue3.0 (con UI) - Vue CLI = Vue + complemento js

1. Instale Vue: npm install -g @vue/cli
2. Instalar nuevo andamiaje: cnpm i -g @vue/cli
3. Ver comandos: vue -h
4. Inicializar scaffolding: npm install -g @vue/cli-init

5. Uso de Vue

1. Interfaz VUE: vue ui
2. Cree un proyecto: vue init webpack vue_test (nombre de la carpeta del proyecto)
3. Crear proyectos automáticamente: vue create project/vue ui

6. Dependencias de instalación

1. Ingrese la carpeta del proyecto específico: cd vue_test (nombre del proyecto)
2. npm install, presione enter, espere un momento

3. Cómo usar

4. Ejemplos de gramática

<div id="app">
  {
   
   { message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

En cuarto lugar, la estructura de directorios.

build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 开发目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

5. Componentes de VUE: -g global, @version, scaffolding (generador de código)

1. npm (extranjero): administrador de paquetes (similar a MAVEN) escrito en JavaScript

作用：node包管理器、程序包管理和分发的管理工具
位置：已经集成在NODE.JS中

1. Comando de descarga e instalación: npm install jquery
2. Especifique la versión a instalar: npm install jquery@1
3. Ver la ruta de instalación: npm config obtener prefijo
4. Establezca el directorio del paquete de instalación global: npm config set prefix "E:\NpmInstall"
5. Establezca el directorio de caché global: npm config set cache "E:\NpmInstall\cache"

2. cnpm (doméstico): espejo Taobao npm

1. Instale el espejo de Taobao: npm install -g cnpm --registry=https://registry.npm.taobao.org

3. webpack (empaquetado): a través de la sintaxis CommonJS

作用：前端资源加载/打包工具、多种静态资源 js、css、less 转换成一个静态文件

1. Espejo de Taobao para instalar Webpack: cnpm install webpack -g
2. Crear un directorio de proyecto: aplicación mkdir
3. Agregue runoob1.js al directorio: document.write("Funciona");
4. Agregue index.html al directorio: </script type="text/javascript" src="bundle.js" charset="utf-8"></script/>
5. paquete de comandos webpack: webpack runoob1.js bundle.js

4. vue-cli: plantilla de proyecto Vue (generador de código de andamiaje) - Vue CLI = complemento Vue + js

作用：快速创建 vue 项目、基于 Vue.js 、降低webpack使用难度

1. Instale vue-cli globalmente: npm install --global vue-cli
2. Ver versión: vue -V
3. Actualice el paquete CLI global de Vue: npm update -g @vue/cli
4. Actualice el paquete CLI global de Vue: actualización global de yarn --latest @vue/cli
5. Crear un proyecto: vue create hello-world
6. Interfaz gráfica: vue ui