# vue2-cli-test1

**Repository Path**: zsm_address/vue2-cli-test1

## Basic Information

- **Project Name**: vue2-cli-test1
- **Description**: 第一个vue小项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-21
- **Last Updated**: 2022-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue2, vue-router, Vuex, vue-cli3, ES6

## README

# vue2-cli-test1

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


### vant

#### 完整引入

1. 安装依赖包

   ```bash
   # Vue 3 项目，安装最新版 Vant：
   npm i vant -S

   # Vue 2 项目，安装 Vant 2：
   npm i vant@latest-v2 -S

   ```

2. 在 main.js 文件中导入所有组件

   Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

   ```js
   import Vue from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css';

   Vue.use(Vant);
   ```

3. 在任意的组件中使用组件

   ```html
   <van-button type="primary">主要按钮</van-button>
   <van-button type="info">信息按钮</van-button>
   <van-button type="default">默认按钮</van-button>
   <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>
   ```

#### 按需引入

1. 安装依赖包

   ```bash
   # Vue 3 项目，安装最新版 Vant：
   npm i vant -S

   # Vue 2 项目，安装 Vant 2：
   npm i vant@latest-v2 -S

   ```

2. 安装插件

   ```bash
     npm i babel-plugin-import -D

   ```

3. 配置.babelrc 或者是 babel.config.js

   ```json
     // 在.babelrc 中添加配置
     // 注意：webpack 1 无需设置 libraryDirectory
     {
       "plugins": [
         ["import", {
           "libraryName": "vant",
           "libraryDirectory": "es",
           "style": true
         }]
       ]
     }

     // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
     module.exports = {
       plugins: [
         ['import', {
           libraryName: 'vant',
           libraryDirectory: 'es',
           style: true
         }, 'vant']
       ]
     };

   ```

4. 在 main.js 文件中注册组件

   ```js
   import { Button } from 'vant';
   ```

5. 可以在任意的组件中使用 ui

   ```html
   <van-button type="primary">主要按钮</van-button>
   <van-button type="info">信息按钮</van-button>
   <van-button type="default">默认按钮</van-button>
   <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>
   ```

#### 傻瓜式

    ```bash

    vue add vant

    ```