vue framework learning (7) -crear un proyecto

Crear pasos del proyecto

Si ha instalado node.js y VsCode, creemos un proyecto antes de continuar con el conocimiento de Vue.

1. npm install -g vue-cli, Y luego espere la instalación (vue-cli puede ayudarnos a construir rápidamente proyectos de Vue)
2. npm install -g webpackComando, esperando la instalación (herramientas para empaquetar js)
3. Cree un proyecto llamado hellovue, tome cualquier nombre e ingrese entervue init webpack hellovue
4. Abra el proyecto creado en la terminal en vscode. La estructura del directorio se muestra a la izquierda.

5. Busque el comando para iniciar el proyecto en package.json. npm run dev

6. Tenga en cuenta que el último nivel de la terminal es el nombre del proyecto:hellovue

7. Ver:http://localhost:8083/#/

Análisis de la estructura de directorios

Principio de inicio de la estructura del proyecto Vue

Secuencia de llamadas de Vue : index.html → main.js → app.vue → index.js → componentes / componentes

Generalmente, habrá tres archivos después de que se cree el proyecto: index.html, main.js, app.vue

1. index.html: todos los archivos vue se desarrollan en un formato de página única, y todos los componentes vue se procesan y cargan a través de index.html.
2. main.js: equivalente a la función de entrada de java, que controla los componentes que se cargarán cuando el proyecto vue se inicia por primera vez.
3. el: '# app' está conectado al componente de la aplicación en index.html . Sitio web oficial interpretado 模板将会替换挂载的元素como:.


4. App.vue es un componente raíz de forma predeterminada.

El nombre del atributo nombre del componente en la exportación
creada: función de ciclo de vida

Proyecto HelloWorld

Modifique la página de muestra a una página de palabras de saludo.

Abrimos el archivo de entrada del proyecto App.vue y lo modificamos para

<template>
  <div class="hello">
    <h1>{
   
   { msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Hello World！'
    }
  }
}
</script>

Actualizar la página:

Ciertamente no podemos seguir app.vueescribiendo páginas en el archivo, pero index.html¿de qué nos sirve el nuestro ? , Analice detenidamente, en la parte Título de la página web, index.htmlse carga el Título definido en, y en la parte del cuerpo, App.vuese carga la parte definida en.

En el proyecto en ejecución, main.jscomo el proyecto 入口文件, en ejecución, 找到其实例需要挂载的位置es decir, index.html, al principio, se mostrará el contenido en el punto de montaje de index.html, pero luego estará en el componente en la instancia 模板中的内容所取代, por lo que will Viendo que el contenido del cuerpo en index.html se mostrará por un momento.

¿Cómo mostrar el contenido de index.html en la página de inicio? Simplemente comente la plantilla en main.js.

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App }
  // template: '<App/>'
})

Puede ver index.htmlel contenido de la página mirando la consola del navegador .

index.htmlpágina

Descripción de otros documentos:

-build

-build.js 生产环境构建脚本

-utils.js 构建相关工具方法

-webpack.base.conf.js webpack基础配置

-webpack.dev.conf.js webpack开发环境配置

-webpack.prod.conf.js 生产环境配置

-confg 项目配置

--dev.env.js 开发环境变量

--index.js 项目配置文件

--prod.env.js 生产环境变量

--test.env.js 测试环境变量

-package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

-src 源码目录

--main.js 入口js文件

--app.vue 根组件

--components 公共组件目录

--title.vue

Comprenda el marco del proyecto, comencemos a aprender la sintaxis de vue juntos.