vue项目目录结构

如上图所示，我们的目录结构就是这样的了。

如上，基本上就是这么个情况。重要的，还是src文件夹。

SRC文件夹的情况

如上图所示，这是src文件夹下面的初始情况，里面有一些示例代码之类的。比如，它吧logo放在assets文件夹里面。我个人很不喜欢这么做，因为代码是代码，资源是资源，各归其位比较好。

commponents目录里面放了一个演示的组件文件，你可以打开看下。当然，也可以直接删除，然后根据我的博文往下走。

App.vue是项目入口文件。当然，我们需要改造，改造成我们可以使用的样子的。后面的博文会说。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置，我后面会详细的讲这里怎么搞。

整理目录

上面只是让大家了解一下具体是什么情况，下面，我们开始动手，把不想管的干掉，然后把src变成这个样子:

如上图所示，把文件夹和文件都新建好，后面的博文我会详细给出每个文件的代码的。这里，都新建空文件即可。注意，我是用scss来写css文件的。所以看官你最好也学习一下scss的相关内容，我的博客里面有，搜索也是一大把。

vue支持每一个模板里面写css，这样可以做到随用随取。但是，我个人不太喜欢这样，我还是喜欢吧css给单独放出来，因为这样便于整理，另外，使用scss的朋友都知道，我们会预设大量的变量，代码片供我们在写css的时候使用，如果每个模板文件里面都需要引用一次那是及其麻烦的。

原文地址：https://www.cnblogs.com/Mr-Tao/p/10463930.html