# viteCli

**Repository Path**: waywordcode/vite-cli

## Basic Information

- **Project Name**: viteCli
- **Description**: vue3.2+router4.0+vuex4.0+typescript+vite+andesign实现的项目环境demo
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-18
- **Last Updated**: 2024-05-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建。

## 创建 vite 项目

### 执行创建命令

执行 `vite` 项目创建命令，在创建导航过程中，选择 `vue+ts` 模式。

```
yarn create vite
yarn
yarn dev
```

### 修改 vite 配置文件

当以命令行方式运行 `vite` 时，`vite` 会自动解析项目根目录下名为 `vite.config.js` 的文件。这里，我们简单设置一下将 `@` 指向 `src` 以及开发时与后端联调必须进行的proxy代理设置。其它配置参数可参考官网。（cn.vitejs.dev/config/）

```tsx
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
    }
  },
  server: {
    port: 3000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    // 代理
    proxy: {
      '/api': {
        target: 'http://API网关所在域名',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})
```

## 安装 vue-router

### 执行安装命令

```
yarn add vue-router@4
```

### 创建router文件

创建 `src/router/index.ts` 文件，创建路由时，建议使用路由懒加载，优化访问性能。

```tsx
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/Home.vue') // 建议进行路由懒加载，优化访问性能
  },
  {
    path: '/demo',
    name: 'demo',
    component: () => import('@/views/Demo.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
```

### 引入router

在 `main.ts` 文件中 vue 示例中 use router

```tsx
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')
```

### 使用 router-view 组件

在 App.vue 文件中使用 `router-view` 组件，路由匹配到组件会通过 `router-view` 组件进行渲染。

```vue
<template>
  <router-view />
</template>
```

## 安装vuex

### 执行安装命令

```
yarn add vuex@next
 
```

### 创建store文件

创建 `src/store/index.ts` 文件

```tsx
import { createStore } from 'vuex'
const defaultState = {
  count: 0
}
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state: typeof defaultState) {
      state.count++
    }
  }
})
export default store; 
```

### 引入vuex

在 `main.ts` 文件中 vue 示例中 use store，这样我们就可以在页面编码中使用全局状态管理插件 `vuex` 啦。

```tsx
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'

createApp(App).use(router).use(store).mount('#app')
 
```

## 安装UI库 ant-design-vue

### 执行安装命令

```
yarn add ant-design-vue@next
 
```

### 引用 ant-design-vue

在 `main.ts` 中引入 `antd` 插件及 `css` 样式文件，在 vue 实例中 use 插件。这里我们使用了全局引用的方式，当然，也可以参考官网进行按需引用。（**2x.antdv.com/docs/vue/ge…**[2]

```tsx
import { createApp } from 'vue'
import Antd from "ant-design-vue";
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import "ant-design-vue/dist/antd.css";

createApp(App).use(router).use(store).use(Antd).mount('#app')
 
```

### 使用 ant-design-vue

引用后，我们就可以在组件中进行使用了

```vue
<template>
  <a-button type="primary">按钮</a-button>
</template>
 
```

## 安装axios

### 执行安装命令

```yaml
yarn add axios
 
```

### 创建公共请求方法

我们将工具类方法放到 `utils` 文件夹中，创建文件 `src/utils/request.ts`

```tsx
import axios from 'axios'

interface ApiConfig {
  body: object;
  data: object
}
async function request(url: string, options: ApiConfig) {
  // 创建 axios 实例
  const service = axios.create({
    baseURL: "", // api base_url
    timeout: 6000 // 请求超时时间
  });
  // 请求拦截
  service.interceptors.request.use(config => {
    // 这里可设置请求头等信息
    if (options && options.body) {
      config.data = options.body;
    }
    return config;
  });
  // 返回拦截
  service.interceptors.response.use(response => {
    // 这里可进行返回数据的格式化等操作
    return response.data;
  });
  return service(url, options);
}
export default request;
 
```

### 使用请求方法

```tsx
<script>
import request from "@/utils/request.ts"

export default {
  mounted() {
    request('/api/getUser')
  }
}
</script>
 
```

## 安装 mock 工具

`mock` 模拟数据我们选用 `mockjs` 插件，`vite` 中需要安装 `vite-plugin-mock` 插件。

### 执行安装命令

```
yarn add mockjs
yarn add vite-plugin-mock -D
 
```

### vite.config.ts 中引用插件

```tsx
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    viteMockServe({ supportTs: true })
  ],
})
 
```

### 使用 mock

在 `src/mock` 文件中创建 `index.ts` 文件，添加如下代码示例代码

```tsx
import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getList',
    method: 'get',
    response: () => {
      return {
          code: 0,
          message: 'ok',
          data: ['aa', 'bb']
      }
    }
  },
] as MockMethod[]
 
```

这样我们就可以在工程中进行 `mock` 数据的访问了，这里我们使用在前文中创建公共 api 请求方法 request。

```tsx
import request from "@/utils/request.ts"

request('/api/getList').then(res => {
  console.log(res);
})
 
```

## 结束

来源：前端进阶之旅