推荐：​​Vue汇总​​

Vue项目 - 项目文件介绍

上一篇博客介绍了三种方式创建Vue项目：​​Vue - vue create、vue ui、vue init三种方式创建Vue项目​​。

这里博主使用第三种方式创建Vue项目，并且介绍一下项目文件的组成部分。

首先创建一个Vue项目：

C:\Users\Kaven>e:

E:\>cd E:\workspace\WebStorm\blog

E:\workspace\WebStorm\blog>vue init webpack project      

下面是创建Vue项目的一些选项，可以跟博主选择一样的。

? Project name project
? Project description A Vue.js project
? Author ITKaven <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm      

Vue项目创建成功。

# Project initialization finished!
# ========================

To get started:

  cd project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack      

运行这个Vue项目。

E:\workspace\WebStorm\blog>cd project

E:\workspace\WebStorm\blog\project>npm run dev      

这就是刚刚创建的Vue项目。

• ​

  ​README.md​

  ​：项目说明文件，一般在该文件中写一些项目说明，如下图所示。



• ​

  ​package.json​

  ​​：每个项目的根目录下，一般都有一个​

  ​package.json​

  ​文件，该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。​

  ​npm install​

  ​命令会根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。



• 向上标号​

  ​^​

  ​是定义了向后（新）兼容依赖，例如​

  ​babel-eslint​

  ​的版本可能已经超过​

  ​8.2.1​

  ​了，在大版本号（​

  ​8​

  ​）相同的情况下，就允许下载最新版本的​

  ​babel-eslint​

  ​，实际上运行​

  ​npm install​

  ​的时候，可能下载的​

  ​babel-eslint​

  ​版本是​

  ​8.3.0​

  ​。
• ​

  ​package-lock.json​

  ​​：​

  ​package.json​

  ​文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，每次​

  ​npm install​

  ​都是拉取该大版本下的最新版本，为了稳定性考虑，几乎是不敢随意升级依赖包，因为这将导致工作量增加，测试、适配等工作，所以​

  ​package-lock.json​

  ​文件出现了，当安装一个依赖时，就锁定​

  ​package-lock.json​

  ​文件中指定的版本。



• ​

  ​index.html​

  ​：项目首页。
• ​

  ​.postcssrc.js​

  ​​：为了兼容所有浏览器，有的CSS属性需要对不同的浏览器加上前缀，所以有时添加一条属性，就需要添加多条类似的属性，只是为了满足浏览器的兼容，这会增加很多工作量。处理CSS前缀问题的神器—​

  ​AutoPrefixer​

  ​，所以该文件就是处理这些事情的。



• ​

  ​.gitignore​

  ​​：​

  ​.gitignore​

  ​文件的作用就是告诉Git哪些文件不需要添加到版本管理中。比如项目中的依赖包(​

  ​node_modules​

  ​)，它在项目中是很重要的，但是它的体积是很大的，所以用Git管理项目版本时，是不需要添加依赖包到版本管理中的。



• ​

  ​.eslintrc.js​

  ​：用来管理和检查代码风格的工具，可以和编辑器搭配使用，当有不符合代码风格规范的代码出现就会报错或者警告。



• ​

  ​.eslintignore​

  ​​：和​

  ​.gitignore​

  ​文件的作用类似，用于指定哪些文件不需要进行代码风格检查。



• ​

  ​.editorconfig​

  ​​：​

  ​.editorconfig​

  ​文件是用于跨不同的编辑器和IDE为多个开发人员维护一致的编码风格的配置文件。



• ​

  ​.editorconfig​

  ​文件就是为了统一编程风格，提高代码阅读质量。一个大型软件项目，往往是团队模块化开发，不同的开发人员使用的编辑器可能不一样，甚至系统平台都不一样。一部分人喜欢在Linux下使用Vim编写代码，另外一部分可能倾向于Windows下用VS开发。另外，还存在一些编程风格的不同，典型的就是缩进问题，使用空格缩进还是Tab缩进，Tab键表示​

  ​2​

  ​个空格缩进还是​

  ​4​

  ​个空格缩进。即使是开发团队统一编程风格、编辑器，仍不能保证历史遗留代码、第三方开源库等等的代码风格不一致问题。此外，还可能涉及一些文字编码问题，如UTF-8、UTF-16、GB2312等。​

  ​.editorconfig​

  ​文件就是解决诸如此类的问题，使用​

  ​.editorconfig​

  ​文件就可以将不同格式的文件统一风格。
• ​

  ​.babelrc​

  ​​： ES6是​

  ​2015​

  ​年发布的下一代Javascript语言标准，它引入了新的语法和API，使我们编写Javascript代码更加得心应手，但是可惜的是这些Javascript新特性只被最新版本的浏览器支持，而低版本浏览器并不支持，那么低版本浏览器下就需要一个转换工具，把ES6代码转换成浏览器能识别的代码。



• ​

  ​static​

  ​：该文件下一般用于放置静态资源，如静态图片等。
• ​

  ​src​

  ​：该文件下一般用于放置项目源代码。



• ​

  ​assets​

  ​目录中的文件会被​

  ​webpack​

  ​处理解析为模块依赖，只支持相对路径形式。​

  ​build​

  ​的时候由​

  ​webpack​

  ​解析为模块依赖。 ​

  ​static​

  ​目录下的文件并不会被​

  ​webpack​

  ​处理，它们会直接被复制到最终的打包目录（默认是​

  ​dist/static​

  ​）下，所以必须使用绝对路径引用这些文件。
• ​

  ​node_modules​

  ​：该文件下一般用于放置项目依赖的包。
• ​

  ​config​

  ​：该文件下一般用于放置项目的配置文件。



• ​

  ​build​

  ​：该文件下一般用于放置项目的打包工具。