vue核心用法指南01（目录结构及配置）

1.项目初始化

vue项目的建立一般都是用vue官方的脚手架创建。（创建过程也比较简单，是通过问答模式进行的）

其中有个配置可以说一下，关于Runtime+Compiler跟Runtime-only的区别。

Compiler其实是将template模板编译成render函数，如果没有Compiler，这里就不能直接使用template,得用render函数编译。

2.项目目录

先简单介绍一下项目目录。

build中放的主要是webpack配置，后面会详细介绍。
config中是一些我们经常需要修改的一些配置，vue单独提取到cinfig中，项目中一般改config的较多。
src中是我们真正开发用的一个文件夹。
static静态文件夹，该文件下的资源不会被webpack处理
.babelrc中是babel的配置文件
.editorconfig中是格式，缩进的配置，有些编辑器会自动识别(我用的是visual studio code 需要安装EditorConfig for vS Code插件)
.eslintfnore和.eslintrc.js两个都是eslint代码检查的配置文件
.gitignore是git代码管理的配置文件
.postcssrc.js是postcss的配置文件，postcss的配置可以看我之前webpack的文章。
index.html是项目的模板文件，模板文件之前webpack文章中也有介绍，大家可以去看一下。

3.经常会修改的配置文件

下面讲一下我们有可能需要修改的配置文件。

还是从头往下来看。
build的文件夹中其实都是一些webpack的配置，基本不需要我们修改。

在build/webpack.base.conf.js中

这段解析配置中，extensions表示可以不写后缀名，alias配置路径解析，依旧是说在项目中我们可以直接使用@/表示src/，这样就不需要../一直往外面找。

在build/webpack.dev.conf.js中，会有人用插件的形式引第三方模块。

  new webpack.ProvidePlugin({
       axios: 'axios',
       $: 'jquery'
    }),

---

config文件夹中是一些webpack常量的配置

在/config/idnex.js中

这里面有很多devServer的常量，比如port(端口),proxy(代理)，useEslint(是否开启)之类的。

.editorconfig中的一些格式配置，比如indent_size(缩进)

.eslintrc.js中的一些代码检查的配置，比如extends使用哪种模式，rules检查的规则