vue 系列 -- vue-cli 项目各文件解读

ALKAOUA
518 阅读4分钟

vue 项目各文件解读

  • node_module：存储第三方的依赖模块
  • public：
    • static：静态资源目录，如图片、字体等
    • favion.ico：浏览器上的图标
    • index.html：整个项目默认的 html 模板
  • scripts：用于定义终端中的命令
  • src：这是我们要开发的目录，基本上要做的事情都在这个目录里
    • api：封装一些 api
    • assets：放置一些图片，如 logo 等
    • components：放置功能组件文件
    • config：项目配置文件
    • router：路由配置
    • store：vuex
    • styles：项目的 css 样式文件
    • utils：项目用的已封装的 js 文件
    • views：页面级别的组件（可以由更细的组件构成）
    • App.vue：项目入口文件（我们也可以直接将组件写在这里，而不使用 components 目录）
    • main.js：项目的核心文件
  • browserslistrc：设置浏览器的兼容
  • .editorconfig：定义编辑器语法规则
  • .gitignore：git 上传需要忽略的文件
  • .eslintrc.js：即 ESLint 文件，定义 vue 组件语法规范（安装 ESLint 插件会出现）
  • .eslintignore：规定 ESLint 忽略检查的规范
  • .prettierrc.js：即 Prettier 文件，定义 vue 组件语法规范（安装 Prettier 插件会出现）
  • .prettierignore：规定 Prettier 忽略检查的规范
  • .stylelintrc.js：即 StyleLint 文件，定义 css 语法规范
  • .styleignore：规定 StyleLint 文件忽略检查的规范
  • babel.config.js：Babel 的配置文件，vue 项目中普遍使用 ES6 语法，若要求兼容低版本浏览器，就需要引入 Babel，将 ES6 转换为 ES5
  • package-lock.json：是在 npm install 时自动生成的一份文件，用来记录当前状态下实际安装的各个依赖的具体来源和版本号
  • package.json：项目基本信息
  • README.md：项目说明
  • vue.config.js：vue 项目的基本配置信息

.xxx rc.js 文件：表示语法规范 .xxx ignore 文件：表示语法规范忽略检错部分 含 config 的文件夹 / 文件：配置项目的基本信息

例如 Github 上面的一个 demo：

image.png

如果各个文件不知道怎么设置 / 写代码，作用是什么，逐个去查去百度查更加详细的解读，像配置的文件一般会有模板可以用，在了解各个字段是什么作用后，适当增加、修改后就可以使你开发的项目更完美更完善

vue 项目部分文件的作用

package.json 文件

定义项目所需要的各种模块，以及项目的配置信息（如版本、名称、许可证等）

依赖包就是根据 package.json 来安装的

各字段含义：

  • "name": 包名
  • "version": 包的版本号
  • "main": 入口文件，一般都是 index.js
  • "scripts"：支持的脚本，默认是一个空的 test
  • "keywords"：关键字，有助于在人们使用 npm search 搜索时发现你的项目
  • "repository": 包代码的 repo 信息，包括 type 和 URL，type 可以是 git 或者 svn，url则是包的repo地址。
  • "dependencies": 生产环境依赖包列表
  • "devDependencies": 开发环境、测试环境依赖包列表
  • "engines": 声明项目需要的 node 或 npm 版本范围

npm install

npm install 默认安装最新版本，如果想要安装指定版本，可以在库名称后加 @版本号

使用下载好的包

下载后 node_modules 文件夹中就有要使用的包，我们就可以使用其中的代码了

比如在 Node.js 项目中，我们可以用 require(XXX) 引入它

npm run

npm run 是 npm run-script 的缩写

npm run xxx 中的 xxx 即是 "scripts" 对象的字段

  • serve：表示 启动本地服务器开发（可以让项目跑起来）
  • build：表示 构建一系列适合生产环境的代码用来部署
  • lint：表示 检查代码中有没有不符合标准的错误

详细内容见官方文档 Node.js -- package.json 指南

package-lock.json 文件

作用：

npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标识的具体版本下载依赖库包，就能确保所有依赖包与你上次安装的完全一样。

原来package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以package-lock.json文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本

详细内容见官方文档 Node.js -- package-lock.json 指南

参考文章

avatar
文章
阅读
粉丝