# vue2_webpack_basic

**Repository Path**: hkjGitee_admin/vue2_webpack_basic

## Basic Information

- **Project Name**: vue2_webpack_basic
- **Description**: Vue2 + Webpack 基线工程配置
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-16
- **Last Updated**: 2023-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目介绍

Vue2 + Webpack 基线工程，该项目配置了 Scss 预处理器、Element-UI 框架、vuex-persistedstate 缓存库、vuex-logger Vuex 日志输出插件、JSX 语法支持、SVG 图表封装、husky + commitlint + prettier + lint-staged 规范 Git 代码及 commit log 提交规范

## 项目依赖

### 生产环境依赖项

- vue2、vuex4、vue-router3
- axios、core-js、element-ui
- js-cookie、vuex-persistedstate

### 开发环境依赖项

- postcss、postcss-px-to-viewport、postcss-scss postcss-html
  > `postcss-px-to-viewport`: vw/vh 单位的响应式适配
  > `postcss-scss postcss-html`：让页面支持 SCSS 语法
- sass、sass-loader、style-resources-loader、vue-cli-plugin-style-resources-loader
  > 全局 SCSS 变量支持
- autoprefixer
  > 自动添加 CSS 前缀
- babel-plugin-transform-remove-console
  > 移除 console 日志
- @vue/babel-preset-jsx、@vue/babel-helper-vue-jsx-merge-props
  > JSX 语法支持
- eslint、prettier、eslint-config-prettier、eslint-plugin-prettier
  > eslint + prettier: 项目代码规范配置
- normalize.css
  > 基本重置 CSS 样式
- webpack-bundle-analyzer
  > 打包项目代码包体积分析
- yaml-loader
  > `.yml` 文件读取支持
- svg-sprite-loader、svgo
  > SVG 图标解析封装
- husky、lint-staged、commitlint
  > Git 项目 commit log 提交规范

## 项目配置

- .env.production：生产环境变量文件
- .env.test：测试环境变量文件
- .env.development：开发环境变量文件

## 项目运行指令

### 项目安装/运行

1、`npm install`：项目依赖项安装

2、`npm run dev`：开发环境运行

> 或者双击 start.bat 直接运行 `npm run dev` 指令运行项目

### 项目打包

- `npm run build:test`：打包测试环境代码
- `npm run build:prod`：打包生产环境代码

### 项目代码格式化修复

1、`npm run lint:fix`：使用 eslint 工具检测对 `src/`目录下的 `.js/.vue` 文件进行检测并修复
2、`npm run lint:style`：对 `src` 目录下的 `.css/.scss/.vue` 文件进行 `stylelint` 工具的 CSS 代码格式化
3、`npm run format`：对 `html\vue\ts\js\json\md` 文件进行 prettier 工具格式化

### 其他规则

- `npm run preview`：执行 `build/index.js` 文件查看项目打包后运行效果
- `npm run preinstall`：检测项目统一的包管理工具，默认 `npm`，不需要手动执行，`npm/yarn/pnpm` 时 Node.js 内部会自动运行 `npm` 的 `preinstall` hook 钩子来检测。

## 注意事项

如果 `git clone` 拉下项目后，在 VSCode IDE 工具中发出很多 `eslint` 代码格式化错误，需手动安装 `Prettier Code` 插件，同时配置 `setting.json`：

```json
{
	/* prettier 格式化 */
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"html",
		"vue",
		"typescript",
		"typescriptreact"
	],
	//每次保存的时候按照eslint格式进行修复
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": false
	},
	"prettier.semi": true, //去掉代码结尾的分号
	"prettier.singleQuote": true, //使用单引号替代双引号
	"prettier.printWidth": 180, // 超过最大值换行
	"prettier.tabWidth": 2, // 缩进字节数
	"prettier.useTabs": false, // 缩进不使用tab，使用空格
	"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
	"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号,always: 不省略括号
	"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
	"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
	"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
	"prettier.htmlWhitespaceSensitivity": "ignore",
	"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
	"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 单独放一行
	"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
	"prettier.requireConfig": true, // Require a 'prettierconfig' to format prettier
	"prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
	"javascript.format.insertSpaceBeforeFunctionParenthesis": false //让函数(名)和后面的括号之间加个空格
}
```