vue项目框架简介

---

框架简介

• 整体框架
  2.png

提示：vue项目是单页面应用，所有只有一个html文件即是：index.html。

• build目录

提示：项目的编译相关配置信息，一般情况下你不需要修改此目录下的信息。

• config目录

3.png

提示：此目录下包含：dev.env.js,test.env.js,prod.env.js,index.js这四个文件,dev代表开发环境配置，test代表测试环境配置，prod代表发布环境配置，你可以根据你的项目开发环境，配置相应的信息，比如项目的域名，如果在开发/测试/发布三个环境不一样，那可以配置到对应的js文件中。在build/build.js目录下的process.env.NODE_ENV确定使用那个环境配置。

• src目录

4.png

提示：项目源码目录，但是我们不建议直接沿用默认目录，我们建议在这个目录下新建一个pages目录，与原来的components目录相对应，一个是页面级的vue，一个是组件级的vue。

• router/index.js

5.png

提示：项目路由配置，每一个页面级的vue都对应一个唯一的路由。

• main.js

6.png

通常我们会把src目录再次细分一下，如下图
其中assets文件夹存放字体、图片等资源，components存放组件，network中处理网络请求，page中书写界面，store中对数据进行处理。

7.png

• index.html

项目唯一的html文件，项目通过此文件加载不同的vue文件（根据路由配置）来展示不同的页面。

VUE学习之路三 项目配置介绍
VUE学习之路四 创界第一个界面