VUE项目目录与运行流程（VScode）

各目录对应名称含义

1. main.js（导入App.vue，基于App.vue创建结构渲染index.html）

   //核心作用：导入App.vue，基于App.vue创建结构渲染index.html
   
   //1.导入Vue核心包
   import Vue from 'vue'
   
   //2.导入App.vue根组件
   import App from './App.vue'
   
   //提示：当前处于什么环境（生产环境/开发环境）
   Vue.config.productionTip = false
   
   //3.Vue实例化，提供render方法->基于App.vue创建结构渲染index.html
   new Vue({
     render: h => h(App),
   }).$mount('#app')
   

2. App.vue（App根组件：呈现出App里面的内容）

index.html(各个页面文件)

什么是App.vue？

组件化：

一个页面可以拆分成一个个组件，每个组件有着自己独立的结构，样式，行为。

                好处：便于维护，利于复用->提升开发效率。

                组件分类：普通组件，根组件

根组件：

整个应用最上层的组件，包裹所有普通小组件。

三个组成部分：

        注*：用npm装less less-loader包命令：npm install less less-loader --save-dev

Vue标签补全设置：

打开VScode中的扩展设置-->输入tigger on tab-->勾选启用

Vue使用-->普通组件的注册（局部注册）

1. 创建组件

2. 导入注册使用<组件名>