# Vue

**Repository Path**: hale459/Vue

## Basic Information

- **Project Name**: Vue
- **Description**: Vue相关学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-04
- **Last Updated**: 2022-02-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript, Axios

## README

# VUE3

## 一、项目初始化

- vite创建vue3项目

```shell
npm init vite@latest Blog-vue -- --template vue-ts
```

- 启动项目

```shell
cd Blog-vue
npm install
npm run dev
```

## 安装相关依赖并配置

#### Vite配置

- 安装`@types/node`

```shell
npm install @types/node --save-dev
```

```typescript
//  vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from "path";

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve(__dirname, './src'),
            "@assets": resolve(__dirname, "src/assets"),
            "@components": resolve(__dirname, "src/components"),
            "@images": resolve(__dirname, "src/assets/images"),
            "@views": resolve(__dirname, "src/views"),
            "@store": resolve(__dirname, "src/store"),
        }
    },
    server: {
        host: '127.0.0.1',
        port: 3000,
        open: true,
        proxy: {
            '/api': {
                target: '你的服务器地址',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
});
```

#### Typescript配置

```json
//在tsconfig.json中添加以下配置
{
  "noImplicitAny": true,
  "noImplicitThis": true,
  "strictNullChecks": true,
  "skipLibCheck": true,
  "suppressImplicitAnyIndexErrors": true,
  "paths": {
    "@/*": [
      "src/*"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}
```

#### Reset.css配置

- 安装

```shell
npm install reset.css --save
```

- 使用

```vue
//  App.vue
<style>
@import "reset.css";
</style>

```

#### 全局样式表配置

> 新建`src\assets\css\global.css`样式文件

- 配置

```css
/*全局公共样式表*/

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #333;
}

ul, li {
    list-style: none;
}
```

- 使用

```vue
//  App.vue
<style>
@import "assets/css/global.css";
</style>
```

#### Less/Sass配置

- 安装

`less`

```shell
npm install less less-loader -D
```

`sass`

```shell
npm install sass sass-loader -D
```

- 使用

```vue

<style scoped lang="less">

</style>
```

或者

```vue

<style scoped lang="sass">

</style>
```

#### nProgress配置

- 安装

```shell
npm install nprogress --save
```

- 配置

> 由于需要使用到`router`，所以我这里直接配置在`router.ts`中，也可以单独写配置文件

```ts
//  utils/index.ts
import {createRouter, createWebHistory} from 'vue-router'
import nProgress from 'nprogress';
import 'nprogress/nprogress.css'

//  NProgress配置
router.beforeEach((to, from, next) => {
    nProgress.start();
    next();
})

router.afterEach(() => {
    nProgress.done();
})

nProgress.configure({
    // @ts-ignore
    ease: 'linear',
    speed: 500,
    showSpinner: true  // 是否使用进度环
});

export default router;
```

- 设置进度条颜色

```vue
// App.vue
<style>
/*设置进度条颜色  不配置时为默认颜色*/
#nprogress .bar {
  background: red !important;
}
</style>
```

#### Axios配置

- 安装

```shell
npm install axios vue-axios --save
```

- 配置

```ts
//  utils/axios.ts
import axios, {AxiosRequestConfig, AxiosResponse} from "axios";

//初始化axios
axios.create({
    baseURL: '服务器地址',  //设置服务器地址
    timeout: 6 * 1000, // 超时设置
    withCredentials: true, // 检查跨站点访问控制
})

//设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//配置请求拦截器
axios.interceptors.request.use(
    (request: AxiosRequestConfig) => {
        console.log("请求成功");
        return request;
    }, ((error: any) => {
        console.log(error);
        return Promise.reject(error);
    }))

//配置响应拦截器
axios.interceptors.response.use(
    (response: AxiosResponse) => {
        console.log("响应成功");
        return response;
    }, ((error: any) => {
        console.log(error);
        return Promise.reject(error);
    }))

export default axios

```

- 使用

```ts
//  main.ts
import {createApp} from 'vue'
import App from './App.vue';
import axios from "./utils/axios";
import VueAxios from "vue-axios";

createApp(App)
    .use(VueAxios, axios)
    .mount('#app');

```

- 使用例子

```vue

<script setup lang="ts">
import {ref} from "vue";
import axios from "../utils/axios";

const text = ref('')

function test() {
  axios.get('/api/test').then(res => {
    if (res.data !== null) {
      text.value = "连接成功";
    }
  }).catch(err => {
    text.value = "连接失败";
  })
}

</script>

<template>
  <button @click="test">测试Axios</button>
  <p>{{ text }}</p>
</template>

<style scoped lang="less">
p {
  color: red;
}
</style>
```

#### Vue-Router

- 安装

```shell
npm install vue-router@4
```

- 配置

```ts
//  src/router/index.ts
import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'

const routes: Array<RouteRecordRaw> = []

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

export default router
```

- 使用

```ts
//  main.ts
import {createApp} from 'vue'
import App from './App.vue'
// 默认引入其中的index.ts
import router from './router'

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

```

#### Pinia

- 安装

```shell
npm install pinia
```

- 配置

```ts
//  store/index.ts
import {defineStore} from "pinia";

export const useMainStore = defineStore('main', {
    // 存储全局状态
    state: () => {
        return {}
    },

    // 封装计算属性 具有缓存功能
    getters: {},

    // 封装业务逻辑 修改state
    actions: {}
});

```

- 使用

```ts
//  main.ts
import {createApp} from 'vue'
import App from './App.vue';
import {createPinia} from "pinia";

createApp(App)
    .use(createPinia())
    .mount('#app');

```

#### Element Plus

官网：[Element Plus](https://element-plus.gitee.io/zh-CN/)
组件：[组件使用](https://element-plus.gitee.io/zh-CN/component/button.html)

- 安装

```shell
npm install element-plus --save
```

- 使用

```ts
// main.ts
import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

> 配置自动导入

- 安装

```shell
npm install unplugin-vue-components unplugin-element-plus -D
```

- 配置

```ts
//  vite.config.ts
import {defineConfig} from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        ElementPlus({
            importStyle: 'sass',
            useSource: true
        }),
        Components({
            resolvers: [ElementPlusResolver()]
        })
    ]
})
```

> 图标使用

- 安装

```shell
npm install @element-plus/icons-vue
```

- 使用

```ts
//  main.ts
import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as Icons from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus)
    .mount('#app')

Object.keys(Icons).forEach((key) => {
    app.component(key, Icons[key]);
})
```

```vue

<el-icon>
<baseball/>
</el-icon>
  ```