# mydblog

**Repository Path**: flymyd/mydblog

## Basic Information

- **Project Name**: mydblog
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-09
- **Last Updated**: 2022-02-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Vite + TypeScript + NaiveUI

## 一、初始搭建

### Vue3 + TS + Sass

````shell
npm init @vitejs/app 项目名 --template vue-ts
npm i sass -D
cd 项目名
npm i
````

### Vue-Router

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

创建src/router/index.ts

````typescript
import {
    createRouter,
    createWebHashHistory,
    RouteRecordRaw
} from 'vue-router'

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

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

export default router
````

### Vuex

````shell
npm i vuex@next
````

创建src/store/index.ts

````typescript
import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state: typeof defaultState) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state: typeof defaultState) {
      return 2 * state.count
    }
  }
})
````

### Axios

````shell
npm i axios
````

创建src/utils/axios.ts

````typescript
import Axios from 'axios'

const baseURL = 'https://api.github.com'

const axios = Axios.create({
    baseURL,
    timeout: 20000 // 请求超时 20s
})

// 前置拦截器（发起请求之前的拦截）
axios.interceptors.request.use(
    (response) => {
        /**
         * 根据你的项目实际情况来对 config 做处理
         * 这里对 config 不做任何处理，直接返回
         */
        return response
    },
    (error) => {
        return Promise.reject(error)
    }
)

// 后置拦截器（获取到响应时的拦截）
axios.interceptors.response.use(
    (response) => {
        /**
         * 根据你的项目实际情况来对 response 和 error 做处理
         * 这里对 response 和 error 不做任何处理，直接返回
         */
        return response
    },
    (error) => {
        if (error.response && error.response.data) {
            const code = error.response.status
            const msg = error.response.data.message
            console.error(`[Axios Error]`, error.response)
        } else {
            console.error(`${error}`)
        }
        return Promise.reject(error)
    }
)

export default axios
````

### Naive-UI

````shell
npm i -D naive-ui
npm i -D vfonts
````

### main.ts

````typescript
import { createApp } from 'vue'
import router from './router/index'
import store from './store/index'
import App from './App.vue'
// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'
const app = createApp(App);
app.use(router).use(store);
app.mount('#app');
````

### 开始一个demo

* 修改App.vue

  ````vue
  <template>
    <img alt="Vue logo" src="./assets/logo.png"/>
    <router-view/>
  </template>
  
  <script>
  
  export default {
    name: 'App',
    setup() {
    },
  }
  </script>
  ````

* 创建src/views/Home.vue

  ````vue
  <script setup lang="ts">
  import {defineComponent, ref} from 'vue'
  import {NButton} from 'naive-ui'
  defineProps<{ msg: string }>()
  const count = ref(0)
  </script>
  
  <template>
    <n-button type="primary" @click="count++">count is: {{ count }}</n-button>
  </template>
  ````

### 规范化

* EditorConfig

  在项目根目录下新建 .editorconfig文件

  ````
  # Editor configuration, see http://editorconfig.org
  
  # 表示是最顶层的 EditorConfig 配置文件
  root = true
  
  [*] # 表示所有文件适用
  charset = utf-8 # 设置文件字符集为 utf-8
  indent_style = space # 缩进风格（tab | space）
  indent_size = 2 # 缩进大小
  end_of_line = lf # 控制换行类型(lf | cr | crlf)
  trim_trailing_whitespace = true # 去除行首的任意空白字符
  insert_final_newline = true # 始终在文件末尾插入一个新行
  
  [*.md] # 表示仅 md 文件适用以下规则
  max_line_length = off
  trim_trailing_whitespace = false
  ````

* Prettier

  ````shell
  npm i prettier -D
  ````

  在项目根目录下新建.prettierrc文件

  ````json
  {
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": false
  }
  ````

* ESLint

  ````shell
  npm i eslint -D
  npx eslint --init
  ````

  配置如下

  ````
  √ How would you like to use ESLint? · style
  √ What type of modules does your project use? · esm
  √ Which framework does your project use? · vue
  √ Does your project use TypeScript? · No / Yes
  √ Where does your code run? · browser, node
  √ How would you like to define a style for your project? · guide
  √ Which style guide do you want to follow? · airbnb
  √ What format do you want your config file to be in? · JavaScript
  ````

  如果报错，先`npm i`一下再执行一遍

  配置Prettier优先级大于ESLint

  ````
  npm i eslint-plugin-prettier eslint-config-prettier -D
  ````

  修改.eslintrc.js

  ````javascript
  module.exports = {
    env: {
      browser: true,
      es2021: true,
      node: true,
    },
    extends: [
      'plugin:vue/essential',
      'airbnb-base',
      'plugin:prettier/recommended'
    ],
    parserOptions: {
      ecmaVersion: 13,
      parser: '@typescript-eslint/parser',
      sourceType: 'module',
    },
    plugins: [
      'vue',
      '@typescript-eslint',
    ],
    rules: {
    },
  };
  ````