前言

在开始写代码之前要做的是对项目整个的结构的设计

正文

1. 我们写的所有的代码都会放在 src 目录下

• main.js 是 webpack 的入口文件
• App.vue 是整个页面的 vue 实例文件，也就是把整个页面看成是 vue 的大组件
• src 目录下通常会有两个子目录，其中一个是 components 这个放我们的所有的 .vue 组件目录
  通常情况下我们不会像脚手架这样将组件直接放到这个目录下，比如 header 头部组件，一般会新建一个 header 目录，在 header 里面创建一个 header.vue 组件文件

这样创建的原因是：一个 vue 组件除了他的 .vue 文件以外，它还会包含一些图片相关资源等，因为组件最重要的设计原则就是 “就近维护” ，我们把一个组件相关的资源都放在一个目录下，对外是隔离的，这样的话非常有利于代码的维护

• 除了 components 目录之外，通常还会有 common 目录，这个目录主要是一些公共的模块或者资源
• 在 common 目录下新建三个资源目录 js、stylus （这个其实是一个 css 预处理器，她其实和 less sass 差不多，会在后面讲解stylus中文文档 » 综述 » 张鑫旭-鑫空间-鑫生活）、fonts

1. 将之前的图标字体文件和相应的css文件拷贝到项目中来

• 修改下 style.css 的文件名为 icon

1. 最后将 assets 目录删掉，因为不需要这个了
2. 项目 src 中的文件目录结构

• 之后在写的时候就会在 components 目录下补充项目所需的组件的代码。