一、《Vue从入门到放弃》目录结构详解

接触Vue大概有1年左右的时间了，期间大大小小做了几个项目，有门户站也有商城，包括比较复杂的题库网站之类的，从懵懵懂懂到现在半知半解，说不上小白也算不上精通，就这样吧...

这是一个简单点的框架，我自己封装的，里面包含了一些常用的组件以及方法，基本上满足开发需求。
码云：https://gitee.com/liujto/TDCore.Vue

Vue版本为：@Vue/cli 4.0.5 这里是脚手架版本，对于vue.js用的不多，但是也差不多一样用法
强烈推荐开发工具：VsCode，几乎支持所有语言的开发包括调试

看图

node_modules

这个文件夹里面包含了所有项目用到的模块，由install生成，文件家里面内容非常的多，随着用的模块越多，里面的文件会一直增长下去，so...在复制项目或者是删除的时候，应该排除这个文件夹，不然那消耗的时间可以说是无比漫长。

public

这个文件呢一般不需要改动太多，里面就包含了一个ico图标和一个宿主页面index.html
宿主页面：所有页面都是基于该页面来运行的，可以理解为所有页面都是以模板碎片的形式加载到这个页面上

src

Vue主要内容文件夹，里面包括了页面，组件等等内容

src.assets

用于存储静态资源文件，当然用static文件夹也可以（应该是这个文件夹才是正宗的），我这里没有用到static所以用了assets。static里面的文件不会被Vue编译

src.common

这个是我自己创建的文件夹，用于放一些工具函数之类的东西

src.components

用于存放Vue的组件库文件夹，里面放了所有自己写的一些组件和共用模块，比如顶部的header或者是底部footer之类的

src.pages

这里放了所有的页面文件

src.router

用于存放路由相关的配置js，需要引入vue-router这个模块

src.store

用于存放全局状态管理函数的文件夹，里面进行管理全局状态之类的，需要引入Vuex这个模块

（文件）App.vue

Vue项目的主要入口，所有页面都是基于这个页面，和index.html不同的是，App.Vue最终会被编译为js文件index.html是当Vue编译完成后所有页面的入口和引入都是放index.html（嗯~应该是这么个理解）

（文件）config.js

我自己创建的一个配置文件，里面存放一些例如网站名称，appid，接口地址之类的参数

（文件）main.js

Vue主要入口函数，里面做一些引入，生命周期处理，过滤器，指令的注入等各种操作。

我们可以看到main.js里面有这么一段引入，引入了App.vue这个页面，然后在底部我们可以看到

这里render了App这个页面，也就是说，在这里我们就进入了App.vue这个页面，并且把整个页面都渲染到了index.html里的id=app这个div里（应该是这么说吧？？？）

(文件)babel.config.js

babel是个独立的组件，大概的意思就是，可以针对需求引入不同的插件，没有深入研究过

（文件）package-lock.json

package-lock.json是新版本node支持的文件，在执行npm install时，先读取package.json中的依赖，再读取package-lock.json中的版本号，从而来决定安装和更新。

（文件）package.json

用于管理依赖项，执行install的时候，会读取并安装里面写入的依赖项，也就是说node_modules里面的组件是由这个文件来决定的

（文件）vue.config.js

Vue的配置文件，这个文件在cli3.x之后就不会默认生成了，我们可以自行创建

emmm....先到这里吧，也不知说的对不对~╮(╯▽╰)╭