Vite2 + Vue3 + TypeScript + Pinia +ElementPlus搭建项目

兼容性注：Vite 需要 Node.js 版本 >= 12.0.0。

打开创建项目文件目录 cmd 操作以下命令

# npm 6.x npm init @vitejs/app projectName --template  # npm 7 , 需要额外的双横线： npm init @vitejs/app projectName -- --template  # yarn yarn create @vitejs/app projectName --template  


//yarn yarn add sass --dev  //npm npm i sass -D 

直接使用，不像webpack 还要安装sass-loader

//npm npm install vue-router  //yarn yarn add vue-router 

1. 在 src 文件下新增 router 文件夹 => index.ts 文件

import { 
         createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'  const routes: RouteRecordRaw[] = [   { 
             path: '/',     name: 'Login',     component: () => import('xxxx'), // 注意在这里带 文件后缀.vue   }, ]  const router = createRouter({ 
           history: createWebHistory(),   routes, })  export default router   

2. mian.ts 引入

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

const app = createApp(App)

//链式
app.use(router).mount('#app')

yarn add axios

npm i axios -S

在 src 文件下新增 utils 文件夹，service.ts 和 request.ts 

• service.ts：用与创建axios实例，统一配置请求拦截器、响应拦截…

/** * axios 请求配置 */
import axios, { 
         AxiosRequestConfig, AxiosResponse } from 'axios'
import { 
         ElNotification } from 'element-plus'

/** * 请求失败后的错误统一处理 * @param status 请求失败的状态码 */
const errorHandle = (status: number) => { 
        
    // 状态码判断
    switch (status) { 
        
        case 302: ElNotification.error('接口重定向了！');
            break;
        case 400:
            ElNotification.error("发出的请求有错误，服务器没有进行新建或修改数据的操作==>" + status)
            break;
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。 
        case 401: //重定向
            ElNotification.error("token:登录失效==>" + status)
            break;
        // 403 token过期
        // 清除token并跳转登录页
        case 403:
            ElNotification.error("登录过期,用户得到授权，但是访问是被禁止的==>" + status)
            break;
        case 404:
            ElNotification.error("网络请求不存在==>" + status)
            break;
        case 406:
            ElNotification.error("请求的格式不可得==>" + status)
            break;
        case 408: ElNotification.error(" 请求超时！")
            break;
        case 410:
            ElNotification.error("请求的资源被永久删除，且不会再得到的==>" + status)
            break;
        case 422:
            ElNotification.error("当创建一个对象时，发生一个验证错误==>" + status)
            break;
        case 500:
            ElNotification.error("服务器发生错误，请检查服务器==>" + status)
            break;
        case 502:
            ElNotification.error("网关错误==>" + status)
            break;
        case 503:
            ElNotification.error("服务不可用，服务器暂时过载或维护==>" + status)
            break;
        case 504:
            ElNotification.error("网关超时==>" + status)
            break;
        default:
            ElNotification.error("其他错误错误==>" + status)
    }
}

//axios创建实例
const service = axios.create({ 
        
    //默认地址
    baseURL: "",
    // baseURL: "",
    //请求超时时间
    timeout: 3000,
    //配置请求头
    headers: { 
         'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' }
});

// 请求拦截器
service.interceptors.request.use((config:AxiosRequestConfig) => { 
        
    //处理业务代码 ex:是否存在token
    return config
}, (error) => { 
        
    // 错误抛到业务代码
    error.data = { 
        }
    error.data.msg = '服务器异常，请联系管理员！'
    return Promise.resolve(error)
})

//响应拦截器
service.interceptors.response.use((response: AxiosResponse) => { 
        
    const status = response.status

    if (status < 200 || status >= 300) { 
        
        // 处理http错误，抛到业务代码
        errorHandle(status)
    }
    return response
}, (error) => { 
        
    // 错误抛到业务代码
    error.data = { 
        }
    error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'
    return Promise.resolve(error)
})

export default service

• request.ts：用于封装get、post、delete、put方法

/** * request 请求封装 */

import service from "./service"

export default { 
        
    get(url: string, data = { 
        }) { 
        
        return new Promise((resolve, reject) => { 
        
            service
                .get(url, { 
         params: data })
                .then(response => { 
        
                    resolve(response.data);
                })
                .catch(err => { 
        
                    reject(err);
                });
        });
    },
    delete(url: string, data = { 
        }) { 
        
        return new Promise((resolve, reject) => { 
        
            service
                .delete(url, { 
         params: data })
                .then(response => { 
        
                    resolve(response.data);
                })
                .catch(err => { 
        
                    reject(err);
                });
        });
    },
    post(url: string, data = { 
         }) { 
        
        return new Promise((resolve, reject) => { 
        
            service
                .post(url, data)
                .then(response => { 
        
                    resolve(response.data);
                })
                .catch(err => { 
        
                    reject(err);
                });
        });
    },
    put(url: string, data = { 
         }) { 
        
        return new Promise((resolve, reject) => { 
        
            service
                .put(url, data)
                .then(response => { 
        
                    resolve(response.data);
                })
                .catch(err => { 
        
                    reject(err);
                });
        });
    }
}

以后发送请求就直接使用，request.ts

//NPM
$ npm install element-plus --save
// Yarn
$ yarn add element-plus

2. mian.ts 引入

import { 
         createApp } from 'vue'
import App from './App.vue'
//引用element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus).mount('#app')

npm install pinia --save

yarn add pinia

1. 在 src 文件下新增 store文件夹 => index.ts 文件

/** * pinia 创建 */
import { 
         createPinia } from 'pinia'
const store = createPinia()
export default store

2. mian.ts 引入

import { 
         createApp } from 'vue'
import App from './App.vue'
//引入pinia
import store from './store'
const app = createApp(App)
app.use(store).mount('#app')

项目根目录分别新建:.env 、.env.development 、.env.production 

• .env

# port 端口号
VITE_PORT = 8888

# open 运行 npm run dev 时自动打开浏览器
VITE_OPEN = false

# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可
VITE_PUBLIC_PATH = ''

• .env.developmen

# 本地环境
ENV = 'development'

# 本地环境接口地址
VITE_API_URL = 'http://localhost:8888/'

• .env.production

# 线上环境
ENV = 'production'

# 线上环境接口地址
VITE_API_URL = 'URL'

使用：

console.log(import.meta.env.VITE_API_URL)
//输入命令 npm run dev 系统会识别.env.developmen文件下的VITE_API_URL地址
//输入命令 npm run build 系统会识别.env.production文件下的VITE_API_URL地址
 

1. Eslint 支持

• 下载依赖

# eslint 安装
yarn add eslint --dev
# eslint 插件安装
yarn add eslint-plugin-vue --dev

yarn add @typescript-eslint/eslint-plugin --dev

yarn add eslint-plugin-prettier --dev

# typescript parser
yarn add @typescript-eslint/parser --dev

注意: 如果 eslint 安装报错:

可以尝试运行以下命令:

yarn config set ignore-engines true

• 在根目录下新建 .eslintrc.js