# vue3-blog

**Repository Path**: jxmlearner/vue3-blog

## Basic Information

- **Project Name**: vue3-blog
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-26
- **Last Updated**: 2022-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite 博客

参照：https://www.jianshu.com/p/667278b30db1

## 一、初始化项目

```shell
npm create vite@latest
cd vue3-blog

## 使用yarn来安装包
yarn install
yarn add sass -D
```

## 配置别名

```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})
```

## prettier 和 editorconfig 配置

`.prettierrc`

```js
{
  "bracketSpacing": true,
  "printWidth": 300,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}
```

`.editorconfig`

```js
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
```

## 安装路由

```bash
yarn add vue-router@next
```

配置路由

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

const routes = [{ path: '/', name: 'home', component: () => import('@/views/Home.vue') }]

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

export default router
```

使用路由

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

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

## element-plus

[element-plus 文档](https://element-plus.gitee.io/zh-CN/)

```bash
yarn add element-plus
```

使用

```js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(ElementPlus, { size: 'small' })
app.mount('#app')
```

## dayjs、axios、nprogress

```bash
yarn add dayjs axios nprogress
```

## 安装 ESlint

- 配置 `ESlint`

```bash
npx eslint --init
```

- `package.json` 增加 `lint` 脚本命令

```js
"lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix",
```

这里会安装 eslint 需要的包,因为默认会使用 npm 安装，所以手动安装包

```bash
yarn add eslint-plugin-vue@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 -D
```

## husky + lint-staged

```bash
npx mrm@2 lint-staged
```

`package.json` 文件修改

```js
"lint-staged": {
    "src/**/*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      "git add"
    ]
  }
```

上面的一切操作 husky 时会报错，跟 node 版本有关，需要 14 以上的，目前没有环境验证

### 安装 v-md-editor

```bash
yarn add @kangc/v-md-editor@next
```

（https://ckang1229.gitee.io/vue-markdown-editor/zh/quick-start.html#安装支持-vue3-的版本）介绍，安装 v-md-editor