vite+vue3+ts搭建项⽬使⽤ Vite 快速搭建
Npm
npm init @vitejs/app`
Yarn
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'
// 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
ts
/
*
* @Author: your name
* @Date: 2021-09-04 08:39:20
* @LastEditTime: 2021-09-04 09:07:30
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vue-vite-blog\src\env.d.ts
*/
/// <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';
// declare module 'qs';
集成路由
安装
npm i vue-router@4
创建src/router/index.ts⽂件
/*
* @Date: 2021-09-04 08:43:27
* @LastEditTime: 2021-09-04 08:49:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vue-vite-blog\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
1. npm i vuex@next
2. 创建src/store/index.ts⽂件
/*
* @Author: your name
* @Date: 2020-12-07 18:59:37
* @LastEditTime: 2021-08-09 09:57:17
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \blogs-s\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
1. npm i axios
/*
* @Author: Axios封装
* @Date: 2020-12-08 10:39:03
* @LastEditTime: 2021-09-04 09:04:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \blogs-s\src\api\index.ts
*/
import axios from 'axios'
import qs from "qs";
import store from "../store/index";
import router from '../router';
//'129.204.92.64:8081/' 腾讯服务器
// axios.defaults.baseURL = 'localhost:44367/',
axios.defaults.baseURL = v.VUE_APP_API_URL,
axios.defaults.timeout = 12000;
// axios.defaults.headersmon['token'] =  AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*"; // 允许跨域quest.use(function (config: any) {
// 在发送请求之前做某件事
if (
) {
// 序列化
config.data = qs.parse(config.data);
// console.log("qs:" + config.data);
}
// 若是有做鉴权token , 就给头部带上token
if (ken) {
config.headers.Authorization = ken;
/
/ console.log("token:" + ken);
}
return config;
}, (error: { data: { error: { message: any; }; }; }) => {
// Message({
//  //  饿了么的消息弹窗组件，类似toast
//  showClose: true,
//  message: error,
//  type: "message"
// });
ject(message);
})
sponse.use(function (config: any) {
if (config.status === 200 || config.status === 204) {
solve(config);
} else {
ject(config);
}
// return config;
},
function (error: { response: { status: any; }; }) {
// ject(error)
if (sponse.status) {
switch (sponse.status) {
// 401: 未登录
// 未登录则跳转登录页⾯，并携带当前页⾯的路径
// 在登录成功后返回当前页⾯，这⼀步需要在登录页操作。
case 401:
path: '/login',
query: {
// redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对⽤户进⾏提⽰
// 清除本地token和清空vuex中token对象
// 跳转登录页⾯
case 403:
// Toast({
//  message: '登录过期，请重新登录',
//  duration: 1000,
//  forbidClick: true
/
/ 清除token
store.dispatch('FedLogOut').then(() => {
// 跳转登录页⾯，并将要浏览的页⾯fullPath传过去，登录成功后跳转需要访问的页⾯
path: '/login',
query: {
// redirect: router.currentRoute.fullPath
}
})
})
break;
/
/ 404请求不存在
case 404:
// Toast({
//  message: '⽹络请求不存在',
//  duration: 1500,
//  forbidClick: true
// });
break;
// 其他错误，直接抛出错误提⽰
default:
// Toast({
/
/  message: ssage,
//  duration: 1500,
//  forbidClick: true
// });
}
sponse);
} else {
// 处理断⽹的情况
// eg：请求超时或断⽹时，更新state的network状态
// network状态在app.vue中控制着⼀个全局的断⽹提⽰组件的显⽰隐藏
// 关于断⽹组件中的刷新重新获取数据，会在断⽹组件中说明react router的state和search
storemit('changeNetwork', false);
}
}
)
export default axios
挂载
import axios from './api/axios'
// 全局ctx(this) 上挂载 $axios
集成CSS预编译器
npm i sass -D
安装 Tailwind CSS
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9创建配置⽂件
npx tailwindcss init -p
// fig.js
/*
* @Author: your name
* @Date: 2020-12-08 09:43:09
* @LastEditTime: 2021-09-02 08:54:26
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \fig.js
*/
// 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'
},
'min': '375px',
'max': '667px'
},
'dp': {
'min': '414px',
'max': '736px'
},
'sm': {
'min': '640px',
'max': '767px'
},
'md': {
'min': '768px',
'max': '1023px'
},
'lg': {
'min': '1024px',
'max': '1279px'
},
'xl': {
'min': '1280px',
'max': '1535px'
},
'2xl': {
'min': '1536px'
},
},
extend: {},
},
variants: {
extend: {},
},
// add DaisyUI plugin
plugins: [
require('daisyui'),
],
// config (optional)
daisyui: {
styled: true,
themes: false,
base: false,
utils: true,
logs: true,
rtl: false,
},
}
// fig.js
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。