vite搭建vue3、ts

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

前期准备

首先查看node版本，我的基本是最新的版本 再看看yarn版本

开始搭建

yarn create @vitejs/app

启动项目

然后进入vscode，打开文件

yarn
yarn dev

启动了项目就可以看到

修改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') // 设置 `@` 指向 `src` 目录
    }
  },
  base: './', // 设置打包路径
  server: {
    port: 4000, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  }
})

安装@types/node

编辑器一直提示 path 模块找不到，让我安装@types/node，我尝试直接

yarn add @types/node -D

但一直都是这样的

后来我就尝试npm安装

npm i @types/node -D

卡了很久，最后也没安装上

最后没办法，更换了淘宝源，用cnpm安装，因为这个的问题，后面的安装都是cnpm安装的

安装配置vue-router@4

yarn add vue-router@4  

创建目录

└── src/ 
    ├── router/ 
        ├── index.ts // 路由配置文件
    ├── views/
        ├── home.vue // 路由配置文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import home from '../views/home.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: home
    }
]

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

export default router

在 main.ts 文件中挂载路由配置

import { createApp } from 'vue'
import App from './App.vue'

import router from './router'

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

安装vuex@next

yarn add vuex@next

└── src/
    ├── store/
        ├── index.ts  // store 配置文件

import { createStore, MutationTree, ActionTree, GetterTree } from 'vuex'
// import { getUser } from '../ajax/apis'

interface defaultState {
    token: string
}
interface Response {
    [key: string]: any
}

function initialState(): defaultState {
    return {
        token: ''
    }
}
const state: defaultState = initialState()

const mutations: MutationTree<defaultState> = {
    SET_TOKEN(state, payload) {
        state.token = payload
    }
}

const actions: ActionTree<defaultState, defaultState> = {
    async getUser({ commit }) {
        // const { token } = (await getUser()) as Response
        const token = 'token'
        commit(token)
    }
}
const getters: GetterTree<defaultState, defaultState> = {
    hasUser(state) {
        return state.token
    }
}
export default createStore({
    state,
    mutations,
    actions,
    getters,
    modules: {}
})

在 main.ts 文件中挂载 Vuex 配置

app.use(router).use(store).mount('#root') // 将页面挂载到 root 节点

安装element-plus

yarn add element-plus

在 main.ts 文件中挂载 element-plus

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

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

安装axios

cnpm i axios -S   

└── src/ 
    ├── ajax/ 
        ├── apiMethods.ts // 路由配置文件
        ├── apis.vue 
        ├── http.vue 

// apiMethods
import http from './http'

export function apiGet<T>(url: string, params?: any) {
    return new Promise(async (resolve) => {
        const res = await http.get<T>(url, params)
        resolve(res.data)
    })
}
export function apiPost<T>(url: string, data?: any) {
    return new Promise(async (resolve) => {
        const res = await http.post<T>(url, data)
        resolve(res.data)
    })
}

export function apiPut<T>(url: string, data?: any) {
    return new Promise(async (resolve) => {
        const res = await http.put<T>(url, data)
        resolve(res.data)
    })
}

export function apiDelete<T>(url: string, params?: any) {
    return new Promise(async (resolve) => {
        const res = await http.delete<T>(url, params)
        resolve(res.data)
    })
}

// api
import { apiPost, apiGet, apiDelete, apiPut } from './apiMethods'

export const getUser = (params?: any) => apiPost('/user', params)

export const apiLogin1 = (params?: any) => apiGet('/auth', params)

export const apiLogin2 = (params?: any) => apiPut('/auth', params)

export const apiLogin3 = () => apiDelete('/auth')

//http
import axios from 'axios'

import store from '../store/index'

const http = axios.create({
    baseURL: '',
    timeout: 3000
})

http.interceptors.request.use(
    (config) => {
        config.headers['Authorization'] = store.state.token
            ? 'Bearer ' + store.state.token
            : 'Bearer'
        return config
    },
    (error) => {
        Promise.reject(error)
    }
)

http.interceptors.response.use(
    (config) => {
        return config.data
    },
    (error) => {
        return Promise.reject(error.response)
    }
)

export default http

安装sass

yarn add sass -D

直接安装为开发依赖即可。Vite 内部已帮我们集成了相关的 loader，不需要额外配置

代码规范

EditorConfig + Prettier + ESLint

设置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

vscode安装EditorConfig for VS Code

设置Prettier

yarn add prettier -D

创建.prettierrc.json

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

安装配置后可以试一次格式化

# 格式化所有文件（. 表示所有文件）
npx prettier --write .

vscode安装Prettier - Code formatter

安装eslint

yarn add eslint -D
npx eslint --init

执行了之后继续，我走的是下面这些选择

我用npm安装不上，所以取消直接安装了，用了cnpm

cnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint eslint-plugin-import@^2.22.1 @typescript-eslint/parser@latest -D

安装完后，生成了.selintrc.json

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

vscode安装ESLint

然后你得重启vscode才能生效，反正我的是

ESLint 配置中使用了 Airbnb JavaScript 风格指南校验其规则之一是代码结束后面要加分号，而我们在 Prettier 配置文件中加了代码结束后面不加分号的配置项，这样就有冲突了，会出现用 Prettier 格式化后的代码，ESLint 检测到格式有问题的，从而抛出错误提示。

解决两者冲突问题，需要用到 eslint-plugin-prettier 和 eslint-config-prettier。

• eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
• eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。 最后形成优先级：Prettier 配置规则 > ESLint 配置规则。

yarn add eslint-plugin-prettier eslint-config-prettier -D

在 .eslintrc.json 添加 prettier 插件

module.exports = {
  ...
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

这样，我们在执行 eslint --fix 命令时，ESLint 就会按照 Prettier 的配置规则来格式化代码，轻松解决二者冲突问题。

发现各种文件都有报错，这边添加了几个规则

"rules": {
        "import/no-unresolved": "off",
        "import/extensions": "off",
        "import/no-absolute-path": "off",
        "import/no-extraneous-dependencies": "off",
        "vue/no-multiple-template-root": "off", // 允许多个根元素
        "no-param-reassign": [
            "error",
            {
                "props": true,
                "ignorePropertyModificationsFor": [
                    "state",
                    "config"
                ]
            }
        ]
    }

集成husky 和 lint-staged

yarn add husky -D
npx husky-init

上面指令做了以下操作

修改 .husky/pre-commit hook 文件的触发命令：

eslint --fix ./src --ext .vue,.js,.ts

上面这个 pre-commit hook 文件的作用是：当我们执行 git commit -m "xxx" 时，会先对 src 目录下所有的 .vue、.js、.ts 文件执行 eslint --fix 命令，如果 ESLint 通过，成功 commit，否则终止 commit。

如果只要 ESLint 修复自己此次写的代码，而不去影响其他的代码。需借助一个神奇的工具 lint-staged 。

安装

yarn add lint-staged -D

package.json配置

 "lint-staged": {
    "*.{vue,js,ts}": "eslint --fix"
  },

.husky/pre-commit hook 的触发命令为：npx lint-staged

安装 commitlint 验证提交规范

安装

npm i @commitlint/config-conventional @commitlint/cli -D

配置

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

错误提交

跟你下面几个大佬搭建的

juejin.cn/post/695164…

juejin.cn/post/695543…

juejin.cn/post/696611…