# webpack-vue

**Repository Path**: wangzhaoyv/webpack-vue

## Basic Information

- **Project Name**: webpack-vue
- **Description**: vue3 + webpack 单页应用
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-02-13
- **Last Updated**: 2022-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, webpack5, 多页面

## README

### 项目简介

项目使用 webpack5 + vue + pxToRem + less 创建的单页面项目，项目运行有问题请耐心看完运行部分

### 项目目录介绍

```text
webpack-vue
├── public
│   ├──html
│   │    └── 页面文件夹名称.html
├── src
│   ├── entry
│   │    ├── 页面文件夹
│   │    │      └── index.js 【入口文件，将写的vue组件引入渲染】
│   ├── components 【公共组件】
│   ├── style  【公共样式】
│   ├── assets 【公共资源】
├── webpack.config.js  【webpack配置文件】
├── babel.config.json  【babel配置文件】
├── postcss.config.js  【postcss配置文件】
├── .browserslistrc    【适配的浏览器】
└── package.json
```

### 项目运行

```javascript
npm install
```

> 这里安装`image-webpack-loader`包用 npm 安装可能有问题,如果运行错误运行下面命令

```javascript
// 卸载安装包
npm uninstall image-webpack-loader

// 使用cnpm安装
cnpm install image-webpack-loader -D
```

```javascript
// 运行
npm run dev

// 打包
npm run build
```

### 页面访问

http://localhost:8080/index.html

### 页面创建

- 在 html 文件夹下创建一个 demo.html
- 在 entry 文件夹下创建一个 demo 文件夹
- 在 demo 文件夹下创建 index.js
- 新建 Vue 组件，作为主体组件

* 重新运行项目
* 访问 http://localhost:8080/demo.html

### 页面功能简单介绍

- 图片压缩 `image-webpack-loader`

* babel 转化代码

- pxToRem 功能 `px2rem-loader` `lib-flexible`

* 自动补齐前缀 `autoprefixer`

- 新特性垫片 `core-js`

* 垫片按需自动引入 `"useBuiltIns": "usage"`