vite+vue3+ts搭建
vite2+vue3+ts搭建
安装
npm init @vitejs/app`
or
yarn create @vitejs/app
选择vue- vue-ts
安装依赖
npm install
启动项目
npm run dev
修改Vite配置
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: {
'@': resolve('./src')
}
},
base: './', // 打包路径
server: {
port: 4000, // 服务端口号
open: true, // 服务启动时是否自动打开浏览器
cors: true // 允许跨域
}
})
配置文件
如果使用 TS ，则需要先安装类型声明文件。
npm install --save-dev @types/node
/// <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
// declare module 'axios';
集成router
npm i vue-router@4
创建 src/router/index.ts 文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/home',
name: 'Home',
component: () => import(/* webpackChunkName: "Home" */ '../views/Home/Home.vue')
},
{ path: '/', redirect: { name: 'Home' } }
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
main.ts 文件中挂载
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
createApp(App).use(router).mount('#app')
集成Vuex
npm i vuex@next- 创建
src/store/index.ts文件
import {
createStore
} from 'vuex'
export default createStore({
state: {
token: "test",
//设置页面是否新窗口打开
SetPage: false
},
mutations: {
},
actions: {},
modules: {}
})
main.ts 文件挂载
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
import store from '@/store/index'
createApp(App).use(router).use(store).mount('#app')
集成 Axios
npm i axios- 配置
Axios
import axios from 'axios'
import qs from "qs";
import store from "../store/index";
import router from '../router';
//'http://129.204.92.64:8081/' 腾讯服务器
// axios.defaults.baseURL = 'https://localhost:44367/',
axios.defaults.baseURL = process.env.VUE_APP_API_URL,
axios.defaults.timeout = 12000;
// axios.defaults.headers.common['token'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*"; // 允许跨域
axios.interceptors.request.use(function (config: any) {
// 在发送请求之前做某件事
if (
config.method === "post" ||
config.method === "put" ||
config.method === "delete"
) {
// 序列化
config.data = qs.parse(config.data);
// console.log("qs:" + config.data);
}
// 若是有做鉴权token , 就给头部带上token
if (store.state.token) {
config.headers.Authorization = store.state.token;
// console.log("token:" + store.state.token);
}
return config;
}, (error: { data: { error: { message: any; }; }; }) => {
// Message({
// // 饿了么的消息弹窗组件,类似toast
// showClose: true,
// message: error,
// type: "error.data.error.message"
// });
return Promise.reject(error.data.error.message);
})
axios.interceptors.response.use(function (config: any) {
if (config.status === 200 || config.status === 204) {
return Promise.resolve(config);
} else {
return Promise.reject(config);
}
// return config;
},
function (error: { response: { status: any; }; }) {
// return Promise.reject(error)
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
// redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
case 403:
// 清除token
store.dispatch('FedLogOut').then(() => {
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
router.replace({
path: '/login',
query: {
// redirect: router.currentRoute.fullPath
}
})
})
break;
// 404请求不存在
case 404:
break;
// 其他错误，直接抛出错误提示
default:
}
return Promise.reject(error.response);
} else {
// 处理断网的情况
// eg:请求超时或断网时，更新state的network状态
// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
store.commit('changeNetwork', false);
}
}
)
export default axios
挂载
import axios from './api/axios'
// 全局ctx(this) 上挂载 $axios
app.config.globalProperties.$api = axios
集成CSS预编译器
npm i sass -D
环境变量配置
.env.development
// .env.development
//测试环境地址
NODE_ENV = development
VITE_API_DOMAIN = 'https://localhost:5001/'
.env.production
NODE_ENV = production
VITE_API_DOMAIN = 'http://8081/'//正式环境地址
在页面中使用
console.log(import.meta.env.VITE_APP_WEB_URL)
在 package.json 中使用
"scripts":{
"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production"
}
env.d.ts
interface ImportMetaEnv {
VITE_API_DOMAIN: string,
}
Tailwind CSS
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
创建配置文件
npx tailwindcss init -p
module.exports = {
// purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'], //删除未使用的CSS
purge: {
enabled: true,
content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
},
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
'cx': {
'max': '575px'
},
'xp': {
'min': '375px',
'max': '667px'
},
},
extend: {},
},
variants: {
extend: {},
},
// add DaisyUI plugin
plugins: [
require('daisyui'),
],
// config (optional)
daisyui: {
styled: true,
themes: false,
base: false,
utils: true,
logs: true,
rtl: false,
},
}
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Vite 默认为您生成的 ./src/index.css 文件
/* ./src/index.css */
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
// src/main.js
import './index.css'
整合代码规范插件eslint,prettier
安装依赖
yarn add babel-eslint -D
yarn add @vue/eslint-config-prettier -D
yarn add eslint -D
yarn add eslint-plugin-prettier -D
yarn add eslint-plugin-vue -D
yarn add prettier -D
复制代码
根目录建 .eslintrc.js
//.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
//在此处写规则
'no-unused-vars': 0, // 定义未使用的变量
},
};
复制代码
根目录建 .prettierrc.json
//.prettierrc.json
{
//此处填写规则
"singleQuote": true,//单引号
"seme": true,//分号
"tabWidth": 2,//缩进
"TrailingCooma": "all",//尾部元素有逗号
"bracketSpacing": true,//对象中的空格
}
复制代码
vscode 自动格式化
//settings.json
"editor.formatOnSave": true,//保存时格式化
"files.autoSave": "onFocusChange", //失去焦点时保存
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript"
],
配置GZIP压缩
安装依赖
yarn add vite-plugin-compression -D
修改 vite.config.js
//vite.config.js
import viteCompression from 'vite-plugin-compression'
plugins:[
...
viteCompression({
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz'
})
]
webpack代理配置
配置 vite.config.ts 文件
server: {
host: '0.0.0.0',
port: 3000,
open: true,
https: false,
proxy: {}
},
生产环境移除console
配置 vite.config.ts 文件
build:{
...
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
