【初学Vue避坑指南（1）——了解Vue的基本概念】

一、了解Vue结构

1. Vue是渐近式框架，就像一个戏台子，我们可以把要登台表演的生旦净丑（组件）放到这个舞台上来进行展示。用下来给我的感觉vue最大的好处就是可以查看别人开发的组件库，阅读对应的api文档去对接数据就可以使用，这无疑给我们带来了巨大的便利。
2. 先说Vue的目录结构
   
   最重要的莫过于package.json文件，这里面记录着这个项目的所有依赖库以及版本。然后是main.js（页面的入口文件）,webpack会根据main.js将所有js文件嵌入默认的到public文件夹下的index.html里，为什么要说默认，因为还可以进行多页面配置。
   
   如图所示是一个多页面配置的例子，此处main.js文件更名为与页面名字相同的index.js，里面配置了index.html页面所需要用到的js和组件库，其中

import Vue from 'vue'     //引入Vue依赖
import App from './index.vue'  //引入页面自定义的组件
import ElementUI from 'element-ui';		//引入e.ement-ui组件库
import 'element-ui/lib/theme-chalk/index.css'; 	//引入element-ui组件库的样式依赖
import axios from 'axios'	//引入axios依赖
Vue.prototype.axios = axios;	//配置Vue使用axios(Vue使用axios组件特殊配置)

Vue.use(ElementUI);		//Vue使用其他组件的正常书写格式

Vue.config.productionTip = false  //开发模式的配置,为false时不会报一些不影响运行的错

new Vue({
    render: h => h(App)  //渲染引入的自定义组件
}).$mount('#app') //对html里的<div id='#app'/>进行绑定，其实我们所引用的组件也是渲染到这个
				//div块里面

然后是其他目录文件

node_modules  //外部依赖库
public  //公共资源存放
src		//整体项目文件
--assets 	//一般放图片等资源
--components	//自定义的公共组件库
--router		//路由方案
--...			//如果有其他库的使用可能还有对应的目录架构
--views			//存放自定义的多页面
--------------------------------
vue.config.js  //运行配置文件
...			//如果有其他库的使用可能还有对应的配置文件

二、框架启动

1. Vue的启动
   Vue的启动命令及方式在package.json中可以看到
   
   也就是运行npm run []这条命令，对应的这个项目的启动命令是npm run serve,启动方式是vue-cli，这里初学的时候经常会启动命令提示not fund，查看package.json里面的启动命令是啥即可，这里我把"serve"换成start，然后npm run start也是可以启动的，但是没修改的必要
2. Vue的启动方式
   上面说到例子上的启动方式是vue-cli，Vue-cli 一直是 Vue 2 默认官方脚手架工具，Vue-cli 基于 Webpack 开发。
   (1)vue-cli3之前，也就是vue-cli2只能利用vue init webpack app命令初始化vue2.x的项目，
   (2)vue-cli3~vue-cli4.5之间时,可以利用vue create app初始化vue2的项目，不能初始化vue3，因为vue-cli脚手架版本4.5以上对应的才是vue3
   (3)Vue 3 发布后，同时发布了 Vite ，那么 Vue 3 同时有两个前端打包工具 Vite 和 Vue CLI。
   (4)二者的区别在于：Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验极其愉快。理解下来就是cli启动的话要把项目打包成一个文件，所以运行起来比较慢，vite的话相当于原生的html文件，浏览器可以不用打包，直接访问（个人理解）。
   (5)我在使用过程中体会最明显的区别就是无论项目的大小，vite总能几秒就完成启动，cli从刚开始的几秒到后面的二十多秒才能启动项目的，后期体验cli确实不好。还有一点是因为cli启动时要进行打包，把js文件都放在一个js路径下，图片资源文件都放在img路径下，这就导致一些对资源的引用很容易出问题。而vite方式的话只用写资源的实际相对位置就行了。
   (6)vite的优势显著，无疑是一颗冉冉上升的新星，但是目前很多组件库还没有做出针对vite版本的更新，所以采用cli具有更好的兼容性。