开箱即用的Vite-Vue3工程化模板

前言

由于临近毕业肝毕设和论文,停更有一段时间了,不过好在终于肝完了大部分内容,只剩下校对工作

毕设采用技术栈Vue3,Vite,TypeScript,Node,开发过程中产出了一些其它的东西,预计会出一系列的文章进行介绍

废话不多了步入正题...

体验模板

模板仓库地址


线上预览

两步到位

本地引入

# 方法一
npx degit atqq/vite-vue3-template#main my-project cd my-project
# 方法二
git clone https://github.com/ATQQ/vite-vue3-template.git cd vite-vue3-template

启动

# 安装依赖
yarn install
# 运行
yarn dev

模板介绍

已包含特性

内置了常见的工程化项目所用的内容,后文只对其中的一些特性做简单介绍

目录介绍

.
├── __tests__
├── dist # 构建结果
├── public # 公共静态资源
├── src # 源码目录
│ ├── apis
│ ├── assets
│ ├── components
│ ├── pages
│ ├── router
│ ├── store
│ ├── @types
│ ├── utils
│ ├── shims-vue.d.ts
│ ├── env.d.ts
│ ├── main.ts
│ └── App.vue
├── README.md
├── index.html # 应用入口
├── jest.config.ts
├── LICENSE
├── package.json
├── tsconfig.json
├── cloudbaserc.json # 腾讯云CloudBase相关配置文件
├── vite.config.ts # vite配置文件
└── yarn.lock

Vite

Vite有多牛牪犇,我就不赘述了

简单的vite.config.ts配置文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
build: {
target: 'modules', // 默认值
// sourcemap: true,
},
server: {
port: 8080,
proxy: {
'/api/': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/api/, ''),
},
'/api-prod/': {
target: 'http://localhost:3001',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/api-prod/, ''),
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@components': path.resolve(__dirname, './src/components'),
},
},
})

@vue/compiler-sfc

这个就是前段时间比较争议的一个提案,不过真香,进一步了解

Vuex

采用分业务模块的方案

目录结构

src/store/
├── index.ts
└── modules
└── module1.ts
module1.ts
import { Module } from 'vuex'

interface State {
count: number
} const store: Module<State, unknown> = {
namespaced: true,
state() {
return {
count: 0,
}
},
getters: {
isEven(state) {
return state.count % 2 === 0
},
},
// 只能同步
mutations: {
increase(state, num = 1) {
state.count += num
},
decrease(state) {
state.count -= 1
},
},
// 支持异步,可以考虑引入API
actions: {
increase(context, payload) {
context.commit('increase', payload)
setTimeout(() => {
context.commit('decrease')
}, 1000)
},
},
} export default store
index.ts
import { createStore } from 'vuex'
import module1 from './modules/module1' // Create a new store instance.
const store = createStore({
modules: {
m1: module1,
},
}) export default store

main.ts中引入

import store from './store'
app.use(store)

视图中调用

import { computed } from 'vue'
import { useStore } from 'vuex' const store = useStore() // state
const count = computed(() => store.state.m1.count)
// getters
const isEven = computed(() => store.getters['m1/isEven'])
// mutations
const add = () => store.commit('m1/increase')
// actions
const asyncAdd = () => store.dispatch('m1/increase')

Vue-Router

目录结构

src/router/
├── index.ts
├── Interceptor
│ └── index.ts
└── routes
└── index.ts

拦截器与页面路由相分离

Interceptor/index.ts
import { Router } from 'vue-router'

declare module 'vue-router' {
interface RouteMeta {
// 是可选的
isAdmin?: boolean
// 是否需要登录
requireLogin?: boolean
}
} function registerRouteGuard(router: Router) {
/**
* 全局前置守卫
*/
router.beforeEach((to, from) => {
if (to.meta.requireLogin) {
if (from.path === '/') {
return from
}
return false
}
return true
}) /**
* 全局解析守卫
*/
router.beforeResolve(async (to) => {
if (to.meta.isAdmin) {
try {
console.log(to)
} catch (error) {
// if (error instanceof NotAllowedError) {
// // ... 处理错误,然后取消导航
// return false
// } else {
// // 意料之外的错误,取消导航并把错误传给全局处理器
// throw error
// }
console.error(error)
}
}
}) /**
* 全局后置守卫
*/
router.afterEach((to, from, failure) => {
// 改标题,监控上报一些基础信息
// sendToAnalytics(to.fullPath)
if (failure) {
console.error(failure)
}
})
} export default registerRouteGuard
routes/index.ts
import { RouteRecordRaw } from 'vue-router'
import Home from '../../pages/home/index.vue'
import About from '../../pages/about/index.vue'
import Dynamic from '../../pages/dynamic/index.vue' const NotFind = () => import('../../pages/404/index.vue')
const Index = () => import('../../pages/index/index.vue')
const Axios = () => import('../../pages/axios/index.vue')
const Element = () => import('../../pages/element/index.vue')
const routes: RouteRecordRaw[] = [
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFind },
{
path: '/',
name: 'index',
component: Index,
children: [
{ path: 'home', component: Home, name: 'home' },
{ path: 'about', component: About, name: 'about' },
{ path: 'axios', component: Axios, name: 'axios' },
{ path: 'element', component: Element, name: 'element' },
{
path: 'dynamic/:id',
component: Dynamic,
meta: {
requireLogin: false,
isAdmin: true,
},
name: 'dynamic',
},
],
},
] export default routes
router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import registerRouteGuard from './Interceptor'
import routes from './routes' const router = createRouter({
history: createWebHistory(import.meta.env.VITE_ROUTER_BASE as string),
routes,
}) // 注册路由守卫
registerRouteGuard(router) export default router

main.ts中引入

import router from './router'
app.use(router)

Axios

对axios的简单包装

ajax.ts
import axios from 'axios'

const instance = axios.create({
baseURL: import.meta.env.VITE_APP_AXIOS_BASE_URL,
}) /**
* 请求拦截
*/
instance.interceptors.request.use((config) => {
const { method, params } = config
// 附带鉴权的token
const headers: any = {
token: localStorage.getItem('token'),
}
// 不缓存get请求
if (method === 'get') {
headers['Cache-Control'] = 'no-cache'
}
// delete请求参数放入body中
if (method === 'delete') {
headers['Content-type'] = 'application/json;'
Object.assign(config, {
data: params,
params: {},
})
} return ({
...config,
headers,
})
}) /**
* 响应拦截
*/
instance.interceptors.response.use((v) => {
if (v.data?.code === 401) {
localStorage.removeItem('token')
// alert('即将跳转登录页。。。', '登录过期')
// setTimeout(redirectHome, 1500)
return v.data
}
if (v.status === 200) {
return v.data
}
// alert(v.statusText, '网络错误')
return Promise.reject(v)
})
export default instance

api目录结构

src/apis/
├── ajax.ts
├── index.ts
└── modules
└── public.ts

分业务模块编写接口调用方法,通过apis/index.ts对外统一导出

export { default as publicApi } from './modules/public'

注入全局的Axios实例,Vue2中通常是往原型(prototype)上挂载相关方法,在Vue3中由于使用CreateApp创建实例,所以推荐使用provide/inject 来传递一些全局的实例或者方法

main.ts

import Axios from './apis/ajax'

const app = createApp(App)

app.provide('$http', Axios)

视图中使用

import { inject } from 'vue'

const $http = inject<AxiosInstance>('$http')

polyfill.io

部分浏览器可能对ES的新语法支持程度不一致,存在一定的兼容问题,此时就需要使用polyfill(垫片)

polyfill.io是一个垫片服务,直接通过cdn按需引入垫片,不影响包体积

工作原理是通过解析客户端的UA信息,然后根据查询参数,判断是否需要垫片,不需要则不下发

简单使用

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script
src="https://polyfill.alicdn.com/polyfill.min.js?features=es2019%2Ces2018%2Ces2017%2Ces5%2Ces6%2Ces7%2Cdefault"></script>
</head> <body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body> </html>

查询参数在线生成->url-builder

由于官方服务是部署在非大陆,所以延迟较高,由于polyfill-service是开源的,所以可以自己进行搭建

国内大厂也有一些镜像:

element UI Plus

Vue3版本的Element UI 组件库,虽然有些坑,但勉强能用 O(∩_∩)O哈哈~

按需引入在使用过程中发现Dev和Prod环境下的样式表现有差异,固采用全量引入的方式

utils/elementUI.ts

import { App } from '@vue/runtime-core'

// 全量引入
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn' export default function mountElementUI(app: App<Element>) {
app.use(ElementPlus, { locale })
}

main.ts

import mountElementUI from './utils/elementUI'

mountElementUI(app)

开箱即用的Vite-Vue3工程化模板的更多相关文章

  1. 手把手带你实现基于 Vite+Vue3 的在线Excel表格系统

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...

  2. 如何开发一款基于 vite+vue3 的在线表格系统(下)

    在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容.在本篇中我们将从项目实战出发带大家了解Vite+Vue3 的在线表格系统的构建. 使用Vite初始化Vue3项目 在这里需要注意:根据 ...

  3. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  4. vite vue3 规范化与Git Hooks

    在 <JS 模块化>系列开篇中,曾提到前端技术的发展不断融入很多后端思想,形成前端的"四个现代化":工程化.模块化.规范化.流程化.在该系列文章中已详细介绍了模块化的发 ...

  5. 如何开发一款基于 Vite+Vue3 的在线表格系统(上)

    今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 Vue是什么?大多前端开发者对这个词已毫不陌生了 ...

  6. 一个实用的 vite + vue3 组件库脚手架工具,提升开发效率

    无论是 vue2 全家桶还是 vue3 + vite + TypeScript,组件库的使用几乎大家都会,但自己开发一个独立组件库就不是每个人都掌握的,因为搭建组件库的基础开发环境,就会让很多同学望而 ...

  7. Vite+TS带你搭建一个属于自己的Vue3组件库

    theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...

  8. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  9. Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】

    背景 目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已 ...

随机推荐

  1. 混合编程:如何用python11调用C++

    摘要:在实际开发过程中,免不了涉及到混合编程,比如,对于python这种脚本语言,性能还是有限的,在一些对性能要求高的情景下面,还是需要使用c/c++来完成. 那怎样做呢?我们能使用pybind11作 ...

  2. CSS水平布局

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. kmp&字典树 模板

    kmp: const int maxn=1e5+5; char s[maxn],p[maxn]; int nex[maxn]; int KmpSearch(char* s, char* p) { in ...

  4. ch2_8_3求解回文序列问题(递归实现)

    思路:回文序列中左右两边的值一定相等,所以可以将该问题分解为两边化为相同元素操作的次数和去掉两边相等元素后后剩下元素变成回文序列的操作次数. 题目: 如果一个数字序列逆置之后跟原序列是一样的就称这样的 ...

  5. [源码解析] 并行分布式框架 Celery 之 worker 启动 (1)

    [源码解析] 并行分布式框架 Celery 之 worker 启动 (1) 目录 [源码解析] 并行分布式框架 Celery 之 worker 启动 (1) 0x00 摘要 0x01 Celery的架 ...

  6. 13、Script file 'E:\Anaconda Distribution\Anaconda\Scripts\pip-script.py' is not present.

    pip-script.py文件缺失问题 问题: Script file 'E:\Anaconda Distribution\Anaconda\Scripts\pip-script.py' is not ...

  7. OAuth2.0授权码模式实战

    OAuth2.0是目前比较流行的一种开源授权协议,可以用来授权第三方应用,允许在不将用户名和密码提供给第三方应用的情况下获取一定的用户资源,目前很多网站或APP基于微信或QQ的第三方登录方式都是基于O ...

  8. 写个小程序01 | 注册微信小程序

    出于兴趣和学习目的,我想自己做一个基于"子弹笔记(Bullet Journal)"的小程序.由于个人开发经验很有限,只在课程作业中写过 web 前端,所以也不知道多久能写出来(逃) ...

  9. 高精度减法(c++)

    高精度减法 每当要进行精度较高的运算时,就要用到高精度. 下图是各个类型的数值范围: 如果想不起各个类型占多少字节,可以采用下面的方法: printf("%d %d",sizeof ...

  10. 201871010129-郑文潇 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告

    项目 内容 课程班级博客 https://edu.cnblogs.com/campus/xbsf/2018CST 这个作业要求链接 https://www.cnblogs.com/nwnu-daizh ...