从0创建一个vue3的项目

我们使用现在流行的pnpm来构建项目，pnpm我感觉是同类工具中最快的一个了，初始化项目只需要一两秒，下载包的速度是npm和yarn的好几倍。

1.使用npm安装pnpm

npm install -g pnpm

使用pnpm项目创建项目

pnpm create vue

然后选择你的配置，你会发现创建速度非常快，一眨眼就出来了

2.配置一下prettier

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    'no-undef': 'error'
  }

在设置里面加入保存自动修复

"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

3.配置git提交的检查工具husky

//git初始化

git init

//初始化 husky 工具配置

pnpm dlx husky-init && pnpm install

//修改 .husky/pre-commit 配置

pnpm lint

4.安装saas预处理器

pnpm add sass -D

5.配置组件库

pnpm add element-plus

配置组件自动导入

 pnpm add -D unplugin-vue-components unplugin-auto-import

配置vite文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/

export default defineConfig({

  plugins: [

    vue(),

    AutoImport({

      resolvers: [ElementPlusResolver()]

    }),

    Components({

      resolvers: [ElementPlusResolver()]

    })

  ],

  //配置统一请求地址

  resolve: {

    alias: {

      '@': fileURLToPath(new URL('./src', import.meta.url))

    }

  }

})

6.封装axios请求工具

pnpm add axios

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    if (res.data.code === 0) {
      return res
    }
    ElMessage({ message: res.data.message || '服务异常', type: 'error' })
    return Promise.reject(res.data)
  },
  (err) => {
    ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
    console.log(err)
    if (err.response?.status === 401) {
      router.push('/login')
    }
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

 7.创建vuex状态管理仓库