vue2 项目文件功能分析

明天用来嘲笑昨天

已于 2022-12-21 10:06:47 修改

阅读量847

点赞数

文章标签：前端 vue.js

于 2022-12-21 09:16:43 首次发布

本文链接：https://blog.csdn.net/weixin_64761354/article/details/128392297

版权

开发项目中npm create 项目后会出现一系列文件,有些是以,vue / .js 为后缀的,有些则不是, 记录一下项目中文件的文件功能:

一、node_modules npm所下载的包文件位置

二、public 项目根目录文件, 保存index.html和一些脚本文件

三、src主文件(包含主要文件夹为api,assets,components,mixins,router,store,utils,views) 开发者代码基本都在这些文件夹中

四、其他配置文件(主要服务于为项目进行开发,打包,编译等功能配置)

settings.js全局项目全局配置(包括公共布局,网站名称,请求延迟信息等)类似公共变量

module.exports = {
  /**
   * @description 网站标题
   */
  title: '',
  /**
   * @description 是否显示 tagsView
   */
  tagsView: true,
  /**
   * @description 固定头部
   */
  fixedHeader: true,
  /**
   * @description 记住密码状态下的token在Cookie中存储的天数，默认1天
   */
  tokenCookieExpires: 1,
  /**
   * @description 记住密码状态下的密码在Cookie中存储的天数，默认1天s
   */
  passCookieExpires: 1,

.editorconfig配置编辑器(缩进格式,编码格式,注释格式)等配置

root = true
 
# unix风格的换行符，每个文件都以换行符结尾
[*]
end_of_line = lf
insert_final_newline = true
 
# 用大括号展开符号匹配多个文件
# 设置默认字符集
# 设置所有以.js,.py结尾的文件的编码格式
[*.{js,py}]
charset = utf-8
 
# 使用空格缩进，设置2个空格缩进
[*.py]
indent_style = space
indent_size = 2

.env.development 测试环境配置
.env.production 生产环境配置

 ? ENV = 'production'
 ? ENV = 'development'

# 如果使用 Nginx 代理后端接口，那么此处需要改为 '/'，文件查看 Docker 部署篇，Nginx 配置
# 接口地址，注意协议，如果你没有配置 ssl，需要将 https 改为 http
VUE_APP_BASE_API = 'http://xxx.xxx.x.xxx:xxxx'

.eslintignore 指定eslint语法检查忽略检查的文件

build/*.js
src/assets
public
dist
src/

.eslintrc.js 配置eslint检查规范的相应自定义配置

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint', //语法检查依赖
    sourceType: 'module'  //指定JS代码来源的类型
  },
  env: {
    browser: true,  //浏览器环境。
    node: true, //Node.js 全局变量和 Node.js 作用域。
    es6: true, //启用除了 modules 以外的所有 ECMAScript 6 特性
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
}

.gitignore git库忽略文件

.DS_Store
node_modules/
dist/
demo/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log

babel.config.js Babel配置文件 Babel使用 AST 把不兼容的代码编译成 ES15 版本

const plugins = ['@vue/babel-plugin-transform-vue-jsx','lodash']
plugins.push(['@babel/plugin-proposal-optional-chaining'])
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
  plugins.push('transform-remove-console')
}
module.exports = {
  plugins: plugins,
  presets: [
    '@vue/app'
  ]
}

jest.config.js 单元测试配置文件

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], //模块使用的文件扩展名数组，从左往右查找这些文件
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest' //js或jsx 语法转化
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'], //对vue的组件做snapshot测试时使用jest-serializer-vue 第三方模块对快照做格式化。
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  // 'collectCoverage': true,
  'coverageReporters': [
    'lcov',
    'text-summary'
  ],
  testURL: 'http://localhost/' //虚拟jsDom的路径  模拟浏览器地址
}

jsconfig.json 这个文件的配置可以对你的文件所在目录下的所有js代码做出个性化支持

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"] // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
        },
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules"]
}

package.json 是一个项目描述文件, 是一个严格的json文件，里面记录了当前项目的信息。比如: 项目名称、版本、作者、gitHub地址、当前项目依赖哪些第三方模块等。

{
  "name": "",    //项目名字
  "version": "",    //项目版本
  "description": "",    //描述
  "author": "",    //作者
  "license": "",
  // 项目命令
  "scripts": {    
    "dev": "vue-cli-service serve --open",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml",
    "new": "plop"
  },
    ......
}

plopfile.js 自动化工具Plop的配置文件(自动生成 Vue component、store、view) 等文件模板

const viewGenerator = require('./plop-templates/view/prompt')
const componentGenerator = require('./plop-templates/component/prompt')

module.exports = function(plop) {
  plop.setGenerator('view', viewGenerator)    //生成view
  plop.setGenerator('component', componentGenerator)    //生成component
}

postcss.config.js 对CSS进行转换适配插件的配置文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}

README.md 项目描述文件(不影响项目执行, 只对项目做解释性说明)

vue.config.js 项目全局配置文件(包括打包,代理,路径,文件设置)

module.exports = {
  publicPath: '/',    //项目更路径
  outputDir: '',    //打包后输出文件
  assetsDir: 'static',    //静态文件名, 不做wenpack打包处理
  //测试环境配置项
  devServer:{
    port: 8080,    //端口
    open: false,
    //前端代理
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx.xxx',    //目标地址
        changeOrigin: true,   
        //重写路径
        pathRewrite: {   
          '^/api': 'api'
        }
      },
    }
}