Vue文件名详解

最新推荐文章于 2024-06-07 10:38:09 发布
最新推荐文章于 2024-06-07 10:38:09 发布
阅读量602 收藏 1
点赞数
分类专栏： node.js基础 开发者社区 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llllinuuu/article/details/129306996
版权

文章目录

node_modules

node_modules存储第三方模块
node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。文件内容可能是我们封装好的一些JavaScript方法、json数据、编译过的C/C++拓展等，在关于node.js的误会提到过node.js的架构。其中http、fs、net等都是node.js提供的核心模块，使用C/C++实现，外部用JavaScript封装。require搜索module方式。

public

public 放公共资源的地方
有关Vue中public文件夹的作用

.browserslistrc文件

在使用脚手架搭建项目时，会自动生成.browserslistrc文件，该文件是配置兼容浏览器

配置参数解释：
“1%”：代表全球超过1%的人使用浏览器
“last 2 versions”：代表所有浏览器都兼容到最后两个版本
“not dead”：是指24个月内没有更新与维护的浏览器。

.gitignore

.gitignore文件的作用：定义忽略提交的文件
就是提交Git仓库时，告诉Git哪些文件不用添加到版本管理中

.gitignore 文件用来忽略被指定的文件或文件夹的改动，被记录在.gitignore文件里的文件或文件夹，是无法被 git 跟踪到的，换句话说，被忽略的文件是不会被放入到远程仓库里的。
也就是说，如果文件已经存在于远程仓库中，是无法通过 .gitignore 文件来忽略的。

.gitignore文件详解
1、所有空行或者以注释符号 # 开头的都会被Git忽略

以井号(#)开头的行是注释，将被忽略，空行可用于提高文件的可读性并对相关的模式行进行分组

  1. “# 忽略编辑器配置目录”
  2. /.idea
  3. /.vscode

2、/ 开头或结尾的忽略
/ 位于头部的作用是只忽略当前目录下的内容；/ 放在尾部的作用是只忽略目录，而不忽略文件

头尾都没有 /
（忽略当前目录及下级目录中所有的 runtime，runtime 文件或目录都会被忽略）
runtime
前面有 /
（只忽略当前目录中的 runtime 文件或目录，不忽略下级目录中的 runtime 文件或目录）
/runtime
后面有 /
（只忽略当前目录和下级目录中的 runtime 目录，不忽略当前目录和下级目录中的 runtime 文件）
runtime/
头尾都有 /
（只忽略当前目录中的 runtime 目录）
/runtime/

3、glob 模式匹配忽略
在 .gitignore 文件中可以使用标准的 glob 模式匹配
以星号 * 通配多个字符

（忽略 vendor 目录下的所有文件）
/vendor/*
（忽略所有后缀名为 txt 的文件）
*.txt

以问号 ? 通配单个字符

（忽略文件名称为一个字符, 后缀名为 php 的文件）
?.php

以方括号 [ ] 包含单个字符的匹配列表

（忽略 125.php、135.php文件）
1[23]5.php

以叹号 ! 表示不忽略(跟踪)匹配到的文件或目录
！！！【注意项】注意写法 要忽略的文件夹一定要结尾 /* ，否则不忽略规则将无法生效

1.（忽略vendor目录下的所有文件）
/vendor/*
2.（不忽略vendor目录下的 1.php，在已忽略的文件夹中不忽略指定文件）
!/vendor/1.php
3.（不忽略vendor目录下 dev目录，在已忽略的文件夹中不忽略指定文件夹）
!/vendor/dev

4、.gitignore 全局忽略
git 允许创建全局 .gitignore 文件，所有本地 git 仓库都将遵守全局的忽略规则。

该文件的名称和位置没有要求，只要在 git 配置文件中路径指定正确即可。

例如，将 ~/.gitignore_global 设置为全局 git 忽略文件，可以执行以下操作:

创建文件
touch ~/.gitignore_global
将文件添加到 git 配置
git config --global core.excludesfile ~/.gitignore_global

5、忽略已提交到远程仓库的内容

删除暂存区中的文件或目录
1.git rm --cached <file
2.git rm -r --cached <folder

在 .gitignore 中添加忽略配置
1.<file
2./<folder

推送到远程仓库
1.git add .gitignore
2.git commit -m ‘忽略文件’
3.git push origin master

6、使用各种框架下的忽略规则

忽略编辑器配置文件

  1. .idea
  2. .vscode
  3. .hbuilderx

忽略特殊文件
.DS_Store 文件一般出现在 MacOS 中，是 Finder 用来存储文件夹的显示属性的，比如: 文件图标的摆放位置

  1. .DS_Store

ThinkPHP 5.0

  1. /runtime
  2. /vendor
  3. /thinkphp

Uni-App 项目

  1. unpackage
babel.config.js

babel是一个JS编译器，兼容低版本浏览器，引入babel，将es6转为es5
babel的配置文件（相当于翻译官，比如把ES6相关语法翻译为ES5，兼容性更好，一般不碰）
babel中文网

jsconfig.json

jsconfig.json文件主要用来配置一个默认根路径，以后可以通过该根路径快速访问到子路径
@就代表src根路径了

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}
package-lock.json和package.json

package-lock.json和package.json详解

README.md

README.md文件一般出现在项目的根目录下，其作用是对项目的主要信息进行描述。
如果一个项目你很长时间都没有动，突然你需要修改这个项目，那么通过README.md中对项目的描述能让你快速的再次上手；
或者别人拿到你的项目也能通过README.md文件的描述快速的了解该项目。

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

src
assets文件夹

一般用于存放静态资源（放置多个组件共用的静态资源），值得注意，放在在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。

components文件夹

一般放置非路由组件（全局组件）

router

设置路由
在router/index.js路由文件中配置路由，设置路由跳转规则

store

保存token和refresh_token的对象

styles

设置全局样式

utils

在这里插入图片描述
vue项目工程中，有很多公用的js函数，为了便于集中管理，可以在src下面新建一个utils文件夹统一管理。这样在使用时候直接调用这个utils文件夹的内容就行。

views

在src文件夹中的views文件夹是用来写各种页面代码的
分开管理，条例更加清晰。

App.vue

唯一的根组件（汇总所有组件）

main.js

入口文件，也是整个程序当中最先执行的文件

llllinuuu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
deadfile:简单的工具，可在任何JavaScript项目（ES5，ES6，React，Vue等）中查找未使用的文件
05-02
死文件 一个简单的工具，可以在任何JavaScript项目（ES5，ES6，React，Vue等）中查找死代码和未使用的文件。 易于使用 对ES5，ES6，React，Vue，ESM，CommonJs的开箱即用支持。 容错： Deadfile使用松散的代码解析，因此，如果代码中有错误，它仍然可以工作。 即使您使用一些随机的babel配置，它也会解析您的代码并找到导入。 语法支持：它支持导入/要求，甚至动态导入。 向您显示有关您导入的node_modules的警告，但未出现在package.json中 安装 使用以下命令安装deadfile cli： npm $ npm install -g deadfile 纱 $ yarn global add deadfile 像素 $ npx deadfile < file> 用法与范例 简单的： deadfile ./src/i
webpack基础五：.browserslistrc文件和browserslist插件说明，以及postcss的使用
a13085759937的博客
05-20 1994
一.browserslistrc文件说明 1. 有一个node插件叫做browserslist，可以通过npx browserslist 命令来查询浏览器版本，在查询时会根据.browserslistrc描述的版本进行查询，并在控制台打印出浏览器版本 示例： a.在node项目根目录下创建.browserslistrc文件 > 1% last 4 version not dead b.执行npx browserslist ...
前端工程化工具系列（十）—— Browserslist：浏览器兼容性配置工具
最新发布
天下布武
06-07 619
是一个能够在不同的前端工具间共享目标浏览器的配置，各工具根据该配置进行代码转译等操作。具体的这些前端工具为：Autoprefixer、Babel、postcss-preset-env、eslint-plugin-compat、stylelint-no-unsupported-browser-features、postcss-normalize、obsolete-webpack-plugin 等，他们会根据配置自动查找要兼容的所有目标浏览器或 Node.js 版本。
4. browserslist
m0_71902265的博客
10-30 2614
browserslist
各种配置文件的作用
weixin_45119097的博客
04-23 3900
各种配置文件的作用
vue项目文件命名规范推荐
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
04-08 4106
vue命名规范
vue登录注册实例详解
12-10
2.wepack生成html模版：vue init webpack ‘ 文件名’ 3.安装axios、js-cookie、element-ui、stylus等等常用插件 步骤二 1.在main.js中引入router、element-ui等 import Vue from 'vue' import store from './store...
vue文件树组件使用详解
12-29
本文实例为大家分享了vue文件树组件的实现方法，供大家参考，具体内容如下 本文主要是分析vue官方仓库里的文件树组件[vue github] demo可以查看 ... ... dblclick=changeType> //显示文件名
如何通过shell脚本自动生成vue文件详解
10-16
在执行`npm run create`时，脚本会提示用户输入文件名并询问是否创建组件或页面。然后，它会根据用户的选择复制相应的模板文件到`components`或`pages`目录，并进行必要的替换。如果文件夹已经存在，脚本会提示用户...
vue和webpack安装命令详解
08-27
filename: '[name].bundle.js' // 输出文件名 }, module: { rules: [ // 配置加载器 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ // 排除node_modules目录 } ] }, devServer: { // ...
详解vue-cli3使用
10-18
`vue.config.js` 还允许你配置其他属性，如生产环境的 source map、基础 URL (`baseUrl`)、输出目录 (`outputDir`)、静态资源目录 (`assetsDir`)、索引文件路径 (`indexPath`)、文件名是否带哈希 (`filenameHashing`...
浅谈 browserslist
u013262823的博客
03-01 7055
browserslist browserslist配置能够分享目标浏览器和nodejs版本在不同的前端工具。主要是为了表示当前项目的浏览器兼容情况。 官方默认配置: "browserslist": [ "&gt; 1%", "last 2 versions", "not ie &lt;= 8", "safari &gt;= 7" ] 对于部分配置参
vue命名规范
qq_53478650的博客
08-15 2303
例子：比如我有整个页面的布局为三个容器 上面一个最上面的头部栏 左侧是菜单 右边内容 那么这三个页面应该放在哪个文件夹里呢。中组合头部栏、菜单和内容区域，创建整体页面布局。整个项目的结构更清晰，各部分的功能和样式相互隔离，更易于维护和扩展。对于这种整体页面布局，您可以将不同部分的容器分别放在不同的文件夹中，以便更好地组织和管理。负责整体页面的内容。这种结构使得不同部分的代码更容易维护，并且可以在需要的地方引用这些布局和页面组件。中，您可以组合这些组件，构建整体的页面布局。
editorconfig常用配置
马优晨
12-25 7572
【通配符】 * 匹配除/之外的任意字符串 ** 匹配任意字符串 ? 匹配任意单个字符 [name] 匹配name中的任意一个单一字符 [!name] 匹配不存在name中的任意一个单一字符 {s1,s2,s3} 匹配给定的字符串中的任意一个(用逗号分隔) {n...
[前端].browserslistrc文件解析
前端
02-22 812
.browserslistrc文件使用说明.browserslistrc文件文件解析> 1%last 2 versionsnot dead 该文加并不是vue文件独有的，因为该文件相当于一个通用文件 .browserslistrc文件 > 1% last 2 versions not dead not ie 11 文件解析 package.json 文件里的 browserslist 字段 (或单独的 .browserslistrc 文件)，指定项目的目标浏览器的范围。这个值会被 @babel
Vue目录详解和文件命名规范(超详细)
qq_31066285的博客
08-10 2056
views文件夹内部的文件命名规范： 一般直接由页面中文名称翻译为英文名称，英文名称第一个单词的首字母小写，后面的每个单词的首字母大写，尽量不要使用index给文件夹命名。如果出现多个页面使用的文件，则在api,components中创建public文件夹，将这类文件存放在各自的public文件夹下。api文件夹内部文件命名规范： 参照views文件夹目录结构，若存在对应的文件，则使用views中的文件名称+API作为文件名。public： 放置系统的静态文件，比如，图片，全局配置文件。...
前端工程项目(Vue项目为例)目录文件命名规范（个人推荐）
weixin_48226213的博客
11-02 1776
例：person-manage.vue、new-information/index.vue、new-information/detail.vue。注意：Windows文件系统是不区分大小写的，而Linux区分，曾经发生：文件名小写，本地开发环境运行和打包都没问题，在CI上打包会报错找不到文件，使用大驼峰命名和引入文件时必须仔细区分好大小写。例：wx-config.js、request.js、design-pattern.ts、axios.d.ts。全部采用小写方式，以短横线分隔，有复数结构时使用复数形式。
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）
12-09 847
Webpack【Webpack中模式(Mode)、Webpack中使用DevServer、Webpack中devtool增强调试过程】(二)-全面详解（学习总结---从入门到深化）
vue.config.js 详解
05-16
`vue.config.js` 是 Vue CLI 3.x 以上版本中新增的配置文件，用于配置构建工具的行为。它是一个可选的配置文件，在项目根目录下创建即可。 以下是 `vue.config.js` 中可以配置的选项： ### publicPath - 类型：`string` - 默认值：`'/'` 应用部署的基础路径。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径下，例如 `https://www.example.com/`。如果你的应用被部署在一个子路径下，你需要在这里指定子路径。例如，如果你的应用被部署在 `https://www.example.com/my-app/`，那么将 `publicPath` 设置为 `'/my-app/'`。 ### outputDir - 类型：`string` - 默认值：`'dist'` 打包生成的文件输出的目录。当运行 `npm run build` 时，生成的文件将会被放置在此目录下。 ### assetsDir - 类型：`string` - 默认值：空字符串 静态资源文件夹的名称。该文件夹中的文件将会被复制到输出目录中，例如 `img/logo.png` 会被复制到 `dist/img/logo.png`。如果设置了 `publicPath`，则在 HTML 文件中引用静态资源时需要使用该路径。 ### indexPath - 类型：`string` - 默认值：`'index.html'` 指定生成的 `index.html` 文件的输出路径。相对于 `outputDir`。 ### filenameHashing - 类型：`boolean` - 默认值：`true` 是否使用文件哈希。如果设置为 `true`，则在文件名中包含哈希以实现缓存。 ### lintOnSave - 类型：`boolean | 'warning' | 'default' | 'error'` - 默认值：`true` 是否在保存时通过 eslint-loader 在每次构建时 lint 代码。设置为 `true` 或 `'warning'` 时，保存时会输出提示信息但不会阻止编译。设置为 `'default'` 时，保存时会输出提示信息并阻止编译。设置为 `'error'` 时，保存时会输出错误信息并阻止编译。 ### runtimeCompiler - 类型：`boolean` - 默认值：`false` 是否使用包含运行时编译器的 Vue 构建版本。设置为 `true` 可以使用 `template` 选项，但会增加应用的体积。 ### transpileDependencies - 类型：`Array<string | RegExp>` - 默认值：`[]` 需要被 babel 编译的依赖包名称或正则表达式列表。如果使用了某些第三方库，可能需要将它们加入到这个选项中。 ### productionSourceMap - 类型：`boolean` - 默认值：`true` 是否在生产环境中生成 source map。开启 source map 会影响构建性能，但可以方便地调试生产环境中的代码。 ### crossorigin - 类型：`string` - 默认值：空字符串 设置生成的 HTML 文件中的 `<link>` 和 `<script>` 标签的 `crossorigin` 属性。默认情况下，没有这个属性。如果需要设置，可以使用 `'anonymous'` 或 `'use-credentials'`。 ### configureWebpack - 类型：`Object | Function` - 默认值：空对象 修改内部的 Webpack 配置。如果值是一个对象，则它将被合并到最终的配置中。如果值是一个函数，则它会接收被解析的配置作为参数。该函数可以修改配置并返回新的配置，也可以返回一个被合并的配置对象。 ### chainWebpack - 类型：`Function` - 默认值：空函数 允许对内部的 Webpack 配置进行更细粒度的修改。该选项接收一个函数，该函数会在内部的 Webpack 配置被解析完成后执行。可以使用 [webpack-chain](https://github.com/neutrinojs/webpack-chain) API 对配置进行修改。 ### css - 类型：`Object` - 默认值：空对象 配置 CSS 相关选项。 #### css.modules - 类型：`boolean` - 默认值：`false` 是否开启 CSS modules。启用 CSS modules 后，类名将会被自动转换为哈希字符串，以避免样式冲突。 #### css.extract - 类型：`boolean | Object` - 默认值：`true` 是否将 CSS 提取为单独的文件。默认情况下，生产环境中会提取 CSS，开发环境中不会。如果设置为 `false`，则所有的 CSS 代码会被包含在 JavaScript 文件中。 如果设置为一个对象，则可以通过 `filename` 选项来指定提取出来的 CSS 文件名，以及 `chunkFilename` 选项来指定异步加载的 CSS 文件名。 #### css.sourceMap - 类型：`boolean` - 默认值：`false` 是否为 CSS 开启 source map。 #### css.loaderOptions - 类型：`Object` 向 CSS 相关的 loader 传递选项。例如： ```javascript module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/variables.scss";` } } } } ``` 上述配置表示向 `sass-loader` 传递了一个名为 `data` 的选项，该选项包含了一个 SCSS 变量文件的引用。 ### devServer - 类型：`Object` - 默认值：空对象 配置开发服务器行为。 #### devServer.port - 类型：`number` - 默认值：`8080` 开发服务器监听的端口号。 #### devServer.host - 类型：`string` - 默认值：空字符串 开发服务器监听的主机名。如果想让服务器可以被外部访问，应将该值设置为 `0.0.0.0`。 #### devServer.proxy - 类型：`string | Object` - 默认值：空对象 配置 devServer 的代理。可以使用字符串或对象来代理多个路径。例如： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } } ``` 上述配置表示将所有以 `/api` 开头的请求转发到 `http://localhost:3000`。`changeOrigin` 选项表示是否改变请求头中的 `host` 值。 #### devServer.before - 类型：`Function` 提供在服务器内部所有其他中间件之前执行自定义中间件的能力。该函数接收 app、server 和 compiler 3 个参数。例如： ```javascript module.exports = { devServer: { before(app) { app.get('/api/user', (req, res) => { res.json({ name: 'Vue.js' }) }) } } } ``` 上述配置表示在开发服务器启动后，访问 `/api/user` 路径时返回一个名为 `Vue.js` 的 JSON 数据。 ### pluginOptions - 类型：`Object` - 默认值：空对象 向插件传递选项。例如： ```javascript module.exports = { pluginOptions: { foo: { bar: true } } } ``` 上述配置表示向 `foo` 插件传递了一个名为 `bar` 的选项，该选项的值为 `true`。 以上是 `vue.config.js` 中的一些常用选项，还有其他选项可以在需要时查阅官方文档，进行更详细的配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值