Vue2.X项目结构讲解

首先需要安装node.js和vue-cli。

创建项目指令：$ vue create vue-demo(项目名称)

可以选择默认配置，也可以自己配置sass/less预编译语言、router路由、vuex状态管理工具、eslint语法校验工具、路由模式等。

基本目录结构如下

node_modules????第三方依赖包存放目录，此目录下的文件不会push到git远程仓库上。此目录不需要手动创建，使用npm或yarn命令安装第三方依赖会自动生成。

public????外部静态文件存放目录，如index.html，全局配置文件config.js。

src/assets????内部静态文件存放目录，如fontawesome字体图标源文件、项目可能用到的图片素材等。

src/components????项目公共组件存放目录，多个地方都用到的组件我们会提取到一个vue文件完成并存放至此，其它vue文件通过import方式引入，这不仅可以大大减少代码量，维护时也只需修改一份代码，这是vue特色之一！

src/router????入口文件index.js为搭建项目自动生成，主要配置路由与vue文件的关系，即指定某个路由url为某个vue文件的内容。

src/store????vuex状态管理目录，存在意义是解决父子组件间通信问题，相当于项目的一个公共资源中转站，谁都可以向它提交数据或请求数据，vuex是大型项目必不可少的工具！

src/utils????自建目录，主要存放一些公共的js方法，与组件类似，使用时把它export出去并挂载至vue原型链中即可。

src/views????页面存放目录，存放系统中的页面，建议内部目录结构与路由层级保持一致，方便维护及他人阅读代码。

src/App.vue????可在此处style写全系统公共样式，以及系统启动事件等。

src/mani.js????可在此处按需引入element等第三方组件、挂载vue原型链、配置路由守卫、配置全局filter过滤器等。

package.json????此文件自动生成，主要用于记录项目需要的依赖包及版本、当使用npm install 或 yarn install 命令时，会根据此文件安装依赖包。

vue.config.js????此文件现不会自动生成，需手动创建，主要完成项目的基础配置、如代理服务器、高德地图配置、基础目录、打包输出路径等。

左手键盘安天下，右手鼠标定乾坤