[JavaScript知识库]使用vite创建vue3项目全过程-2022详细介绍(sass vue-router vuex axios elementplus)

使用vite创建vue3项目全过程-2022详细介绍(sass, vue-router, vuex, axios, elementplus)

1. 创建项目

打开powershell，输入命令，然后根据提示选择自己所需内容

npm init vite

选择完后回车，即生成完成项目。
根据命令cd进入项目目录，安装依赖，然后运行，即得到了一个最基本的使用vite和typescript的vue3项目。

2. 配置 vite.config.ts

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

3. 配置 ts.config.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    // 添加baseUrl和paths，此注释需要删除否则报错
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4. 配置使用 Sass

运行命令，即可安装，相关loader vite已经集成，所以不需要安装

npm i sass -D

安装完成之后，使用在 style 标签声明 lang=“scss” 即可

<style lang="scss"></style>

5. 配置使用 vue-router

安装

npm i vue-router

创建文件 src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
        path: '/home',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ '@/components/HelloWorld.vue')
    },
    { path: '/', redirect: { name: 'Home' } }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

使用：在 src/main.ts中导入并注册

import router from '@/router/index'
const app = createApp(App)
app.use(router)

6. 配置使用 Vuex

安装

npm i vuex

创建文件 src/store/index.ts

import { createStore } from 'vuex'
const defaultState = {
    count: 0
}
// Create a new store instance.
export default createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        increment(state) {
            state.count += 1
        }
    },
    actions: {
        increment(context) {
            context.commit('increment')
        }
    },
    getters: {
        double(state: typeof defaultState) {
            return 2 * state.count
        }
    }
})

使用：在 src/main.ts中导入并注册

import store from '@/store/index'
const app = createApp(App)
app.use(store)

7. 配置使用 Axios

安装

npm i axios

创建 src/utils/request.ts
文件中使用到了elementplus，elementplus配置参照第8点

import axios from 'axios';
import { ElMessage } from 'element-plus'

// 创建axios实例
// 创建请求时可以用的配置选项
const request = axios.create({
    withCredentials: true,
    timeout: 1000,
    baseURL: ''
})
// axios的全局配置
request.defaults.headers.post = {
    'Content-Type': 'application/x-www-form-urlencoded'
}
request.defaults.headers.common = {
    'Auth-Type': 'company-web',
    'X-Requested-With': 'XMLHttpRequest',
    token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加请求拦截器（post只能接受字符串类型数据）
request.interceptors.request.use(
    // 统一设置用户身份 token
    (config) => {
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

// 错误处理
const errorHandle = (status: any, other: any) => {
    switch(status) {
        case 400:
            ElMessage.error('信息校验失败');
            break;
        case 401:
            ElMessage.error('认证失败');
            break;
        case 403:
            ElMessage.error('token校验失败');
            break;
        case 404:
            ElMessage.error('请求资源不存在');
            break;
        default:
            ElMessage.error(other);
            break;
    }
}

// 添加响应拦截器
request.interceptors.response.use(
    // 响应包含以下信息data,status,statusText,headers,config
    (res) => {
        res.status === 200 ? Promise.resolve(res) : Promise.reject(res);
    },
    (err) => {
        const { response } = err;
        if(response) {
            errorHandle(response.status, response.data);
            return Promise.reject(response);
        }
        ElMessage.error('请求失败'+err);
        return true;
    }
)

export default request;

使用：在需要的地方进行引入即可

import request from '@/utils/request'
<script setup lang="ts">
	const getData = () => {
      request.get('url').then((res: Object) => {
        console.log(res)
      })
    }
</script>

8. 配置使用 elementplus

安装

npm i element-plus --save

使用按需引入，自动引入
首先安装两个插件

npm i -D unplugin-vue-components unplugin-auto-import

在vite.config.ts中配置

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

注意：
在.ts文件和<script></script>中使用需要手动引入，如第7点中的使用
为了避免出现样式错误的情况，在src/main.ts中进行全局样式导入

import 'element-plus/theme-chalk/index.css'

参考文章
体验vite + vue3 + ts搭建项目的全过程
Vue3+Vite+Ts 项目实战