Vue项目 - 项目文件介绍

野性酷女 2022-12-26 11:16 199阅读 0赞

**推荐：**[Vue汇总][Vue]

## Vue项目 - 项目文件介绍 ##

上一篇博客介绍了三种方式创建Vue项目：[Vue - vue create、vue ui、vue init三种方式创建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 <xxxxxxxxxx@qq.com>
    ? 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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]  
这就是刚刚创建的Vue项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]

*  `README.md`：项目说明文件，一般在该文件中写一些项目说明，如下图所示。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]
 *  `package.json`：每个项目的根目录下，一般都有一个`package.json`文件，该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。`npm install`命令会根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]  
    向上标号`^`是定义了向后（新）兼容依赖，例如`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`文件中指定的版本。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 4]
 *  `index.html`：项目首页。
 *  `.postcssrc.js`：为了兼容所有浏览器，有的CSS属性需要对不同的浏览器加上前缀，所以有时添加一条属性，就需要添加多条类似的属性，只是为了满足浏览器的兼容，这会增加很多工作量。处理CSS前缀问题的神器—`AutoPrefixer`，所以该文件就是处理这些事情的。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 5]
 *  `.gitignore`：`.gitignore`文件的作用就是告诉Git哪些文件不需要添加到版本管理中。比如项目中的依赖包(`node_modules`)，它在项目中是很重要的，但是它的体积是很大的，所以用Git管理项目版本时，是不需要添加依赖包到版本管理中的。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 6]
 *  `.eslintrc.js`：用来管理和检查代码风格的工具，可以和编辑器搭配使用，当有不符合代码风格规范的代码出现就会报错或者警告。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 7]
 *  `.eslintignore`：和`.gitignore`文件的作用类似，用于指定哪些文件不需要进行代码风格检查。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 8]
 *  `.editorconfig`：`.editorconfig`文件是用于跨不同的编辑器和IDE为多个开发人员维护一致的编码风格的配置文件。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 9]  
    `.editorconfig`文件就是为了统一编程风格，提高代码阅读质量。一个大型软件项目，往往是团队模块化开发，不同的开发人员使用的编辑器可能不一样，甚至系统平台都不一样。一部分人喜欢在Linux下使用Vim编写代码，另外一部分可能倾向于Windows下用VS开发。另外，还存在一些编程风格的不同，典型的就是缩进问题，使用空格缩进还是Tab缩进，Tab键表示`2`个空格缩进还是`4`个空格缩进。即使是开发团队统一编程风格、编辑器，仍不能保证历史遗留代码、第三方开源库等等的代码风格不一致问题。此外，还可能涉及一些文字编码问题，如UTF-8、UTF-16、GB2312等。`.editorconfig`文件就是解决诸如此类的问题，使用`.editorconfig`文件就可以将不同格式的文件统一风格。
 *  `.babelrc`： ES6是`2015`年发布的下一代Javascript语言标准，它引入了新的语法和API，使我们编写Javascript代码更加得心应手，但是可惜的是这些Javascript新特性只被最新版本的浏览器支持，而低版本浏览器并不支持，那么低版本浏览器下就需要一个转换工具，把ES6代码转换成浏览器能识别的代码。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 10]
 *  `static`：该文件下一般用于放置静态资源，如静态图片等。
 *  `src`：该文件下一般用于放置项目源代码。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 11]  
    `assets`目录中的文件会被`webpack`处理解析为模块依赖，只支持相对路径形式。`build`的时候由`webpack`解析为模块依赖。 `static`目录下的文件并不会被`webpack`处理，它们会直接被复制到最终的打包目录（默认是`dist/static`）下，所以必须使用绝对路径引用这些文件。
 *  `node_modules`：该文件下一般用于放置项目依赖的包。
 *  `config`：该文件下一般用于放置项目的配置文件。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 12]
 *  `build`：该文件下一般用于放置项目的打包工具。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 13]

Vue项目文件就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

[Vue]: https://kaven.blog.csdn.net/article/details/109508022
[Vue - vue create_vue ui_vue init_Vue]: https://kaven.blog.csdn.net/article/details/110262834
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]: /images/20221120/993d302da29b42daaf3a49bbb35981f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]: /images/20221120/2ee5129c656a439dac888cbdb9543584.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]: /images/20221120/9ec11a3e7d3d4bca8e1f86e82081510e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]: /images/20221120/af12121ebe244740a81dc74ed96b23a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 4]: /images/20221120/629bd8f7cd3f4993985f1e209cded56f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 5]: /images/20221120/fd0f6cf7f2774bfbb9606c95ddaf9f09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 6]: /images/20221120/6546c31f77074ad88aabc318686f044f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 7]: /images/20221120/6962dcc9dd664ee6b01213ec4797917c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 8]: /images/20221120/213d353e219249958d5b922b80cc27c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 9]: /images/20221120/607686ab2b0c496ba7190af80a22e00a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 10]: /images/20221120/c01b752c16cf4269854e45c3e5bab987.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 11]: /images/20221120/a0f1fee53f264c288bec63ee71a7ac8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 12]: /images/20221120/5270f9bfc7484b7abd7698047b209ae3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 13]: /images/20221120/ff2ebc1917194cc7965f96768052ba95.png