# wangComponentsVue3

**Repository Path**: Jennica824/wangComponentsVue3

## Basic Information

- **Project Name**: wangComponentsVue3
- **Description**: 工作过程中遇到的部分封装的组件整合在一起；
vue3+webpack5+ts
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-21
- **Last Updated**: 2025-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, webpack, TypeScript

## README

# okayDemo

### 1. 介绍
okay相关项目的新功能开发测试
用webpack5+vue3新建项目
#### 1. 相关组件：
1. Carousel：轮播图

### 2. 起步
```js
$ git clone https://gitee.com/Jennica824/okayDemo.git

$ cd okayDemo

// 初始化package.json
$ npm install y

// 安装webpack和webpack-cli
$ npm install webpack webpack-cli --save-dev
// webpack 核心功能
// webpack-cli 命令行工具

```

### 3. package.json
1. 
```js
{
+   "private": true, // 确保安装包是私有的，
-    // "main": "index.js", // 移除main入口，防止意外发布代码
}
```
2. `dependencies`

生产环境下，项目运行所需依赖，但是开发环境的依赖模块也可以配置到这里。

3. `devDependencies`

开发环境下，项目所需依赖。


### 4. 问题

#### 1. `npm install`,`npm install --save`和`npm install --save-dev`的区别：
- `npm install`，下载package.json中的内容，下载的依赖在node_modules文件夹中；
  
- `npm install --save`安装的依赖在[package.json]()的`dependencies`中添加，下载的依赖在[node_modules]文件夹中；
  
- `npm install --save-dev`安装的依赖在[package.json]()的`devDependencies`中添加，下载的依赖在[node_modules]文件夹中。

#### 2. `npm install --save scss-loader`和`npm install scss-loader --save`的区别：

#### 3. 依赖版本version

版本号由三部分组成：major(主版本号), minor(次版本号),patch(修补版本号)。

安装一些依赖包的时候，版本号前面都会带 ^ 或者 ~ 的符号，这两个符号代表意思如下：

~ ：会匹配到最小版本依赖包 ～1.2.3 会匹配所有 1.2.x 版本，但是不包括 1.3.0；

^ ：会匹配最新的大版本依赖包，比如 ^1.2.3 会匹配所有 1.x.x 的包，包括 1.3.0，但是不包括 2.0.0；

* ：安装最新版本的依赖包，比如 *1.2.3 会匹配 x.x.x；

指定特定的版本号：直接写1.2.3，前面什么前缀都没有；

### 5. 目录结构
```js
|-- config
|   |-- webpack.common.js                           // 公用配置
|   |-- webpack.dev.js                              // 开发时的配置
|   |-- webpack.prod.js                             // 打包构建时的配置
|   └── webpack.watch.js
|-- dist                                            // 打包文件夹
|   └── main.js                         
|-- node_modules
|-- public
|   |-- index.html
|   └── favicon.ico
|-- src
|   |-- router
|   |-- views
|   |-- App.vue
|   └── main.js                         
|-- webpack.config.js                            
|-- package.json
|-- package-lock.json
|-- README.md
└── README.en.md
```

### 6. webpack配置
#### 1. 配置`@`