vite搭建vue3、ts

·  阅读 108

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

前期准备

首先查看node版本,我的基本是最新的版本 image.png 再看看yarn版本 image.png

开始搭建

yarn create @vitejs/app
复制代码

image.png

image.png

启动项目

然后进入vscode,打开文件

yarn
yarn dev
复制代码

启动了项目就可以看到

image.png

修改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
复制代码

但一直都是这样的 image.png

后来我就尝试npm安装

npm i @types/node -D
复制代码

image.png 卡了很久,最后也没安装上

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

image.png

image.png

安装配置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

image.png

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

image.png

安装eslint

yarn add eslint -D
npx eslint --init
复制代码

执行了之后继续,我走的是下面这些选择 image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

我用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

image.png

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

image.png

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

解决两者冲突问题,需要用到 eslint-plugin-prettiereslint-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
复制代码

上面指令做了以下操作 image.png image.png

image.png 修改 .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配置 image.png

 "lint-staged": {
    "*.{vue,js,ts}": "eslint --fix"
  },
复制代码

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

image.png

安装 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"
复制代码

错误提交 image.png

image.png

跟你下面几个大佬搭建的

juejin.cn/post/695164…

juejin.cn/post/695543…

juejin.cn/post/696611…

分类:
前端
标签:
分类:
前端
标签: