vite+TypeScript+vue3+router4+Pinia+ElmPlus+axios+mock项目基本配置

1.vite+TS+Vue3

npm create  vite
Project name:... yourProjectName
Select a framework:>>Vue
Select a variant:>>Typescrit

2. 修改vite基本配置

配置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 编辑器提示 path 模块找不到,可以cnpm i @types/node --dev 即可// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],     // 默认配置resolve: {alias: {'@': resolve(__dirname, 'src')    // 配置别名;将 @ 指向'src'目录}},server: {port: 3000,       // 设置服务启动的端口号;如果端口已经被使用,Vite 会自动尝试下一个可用的端口open: true,       // 服务启动后自动打开浏览器proxy: {          // 代理'/api': {target: '真实接口服务地址',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')     // 注意代理地址的重写},// 可配置多个... }}
})

3.安装vue-router

cnpm install vue-router@4 --save

创建src/router/index.ts文件,使用路由懒加载,优化访问性能。

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: () => import('@/views/home.vue') // 建议进行路由懒加载,优化访问性能},{path: '/about',name: 'About',component: () => import('@/views/about.vue')}
]const router = createRouter({// history: createWebHistory(),    // 使用history模式history: createWebHashHistory(),	 // 使用hash模式routes
})export default router

main.ts 里面引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'createApp(App).use(router).mount('#app')

App.vue 文件中使用router-view 组件,路由匹配到组件会通过router-view 组件进行渲染。

<template><div id="nav"><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></div><router-view />
<template>

4.安装vuex 安装pinia

npm install vuex@next --save创建src/store/index.ts文件。
import { createStore } from 'vuex'const defaultState = {count: 0
}
const store = createStore({state () {return {count: 10}},mutations: {increment (state: typeof defaultState) {state.count++}}
})
export default store;
main.ts 里面引入vuex
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'const app = createApp(App);// 将store、router挂载到全局变量上, 方便使用
import { useStore } from "vuex";
import { useRoute } from "vue-router";
app.config.globalProperties.$store = useStore();
app.config.globalProperties.$router = useRoute();app.use(router).use(store).mount('#app')
<template><div>首页 {{count}}<p @click="handleSkip">点我</p></div>
</template><script>
import { getCurrentInstance, computed, ref } from 'vue';
export default {name: 'Home',setup() {const { proxy } = getCurrentInstance();// 使用storeconst count = computed(() => proxy.$store.state.count);const handleSkip = () => {// 使用routerproxy.$router.push('/about');}return {count: ref(count),handleSkip}}
}
</script>

pinia

yarn add pinia
# 或者使用 npm
npm install pinia

main.ts

import { createApp } from 'vue'
import './style.css'
import router from './router'
import { createPinia } from 'pinia'
import App from './App.vue'createApp(App).use(router).use(createPinia()).mount('#app')

@/store/counter.ts

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++},},
})

Home.vue

<template><div><p>home</p><button @click="increment">count:{{count}};double:{{double}}</button></div>
</template><script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../store/counter';
const counter = useCounterStore()const {count, double}  = storeToRefs(counter)//这样才是响应式的
const {increment } = counter
</script><style scoped></style>

5.安装 UI库

1.Element UI Plus

一个 Vue 3 UI 框架 | Element Plus

NPM

$ npm install element-plus --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

volar插件支持 获取对Element UI Plus 的提示 需要在tsconfig.json做如下设置

新增"types": ["element-plus/global"]

{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

2.Ant Design Vue

Ant Design of Vue - Ant Design Vue (antdv.com)

$ npm install ant-design-vue@next --save
$ yarn add ant-design-vue@next

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(Antd).mount('#app');

3.Iview

npm install view-ui-plus --save

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'const app = createApp(App)app.use(store).use(router).use(ViewUIPlus).mount('#app')

4.Vant 移动端

npm i vant -S

import Vant from 'vant'
import 'vant/lib/index.css';
createApp(App).use(Vant).$mount('#app)

6.安装axios

npm install axios --save

封装公共请求方法

新建工具类 src/utils/request.ts

import axios from 'axios'interface ApiConfig {body: object;data: object
}async function request(url: string, options: ApiConfig) {// 创建 axios 实例const service = axios.create({baseURL: "", // api base_urltimeout: 6000 // 请求超时时间});// 请求拦截service.interceptors.request.use(config => {// 这里可设置请求头等信息if (options && options.body) {config.data = options.body;}return config;});// 返回拦截service.interceptors.response.use(response => {// 这里可进行返回数据的格式化等操作return response.data;});return service(url, options);
}
export default request;

使用方法

<script>
import request from "@/utils/request.ts"export default {setup() {request('/api/getNewsList').then(res => {console.log(res);// to do...});}
}
</script>

7.安装mockjs

安装

mock 模拟数据我们选用 mockjs 插件,vite 中需要安装 vite-plugin-mock 插件。

npm install mockjs --savenpm install vite-plugin-mock --save-dev

vite.config.ts 中引用插件

import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(),viteMockServe({supportTs: true,mockPath: './src/mock'})],   
})

使用mock

新建文件src/mock/index.ts,编写一下代码:

import { MockMethod } from 'vite-plugin-mock'
export default [{url: '/api/getNewsList',method: 'get',response: () => {return {code: 0,message: 'success',data: [{title: '标题111',content: '内容1111'},{title: '标题222',content: '内容2222'}]}}},// more...
] as MockMethod[]

然后我们就可以在工程中进行 mock 数据的访问了,这里我们使用之前创建公共 api 请求方法 request。

<script>
import request from "@/utils/request.ts"export default {setup() {request('/api/getNewsList').then(res => {console.log(res);// to do...});}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/212510.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言笔试例题_指针专练30题(附答案解析)

C语言笔试例题_指针专练30题(附答案解析) 指针一直是C语言的灵魂所在&#xff0c;是掌握C语言的必经之路&#xff0c;收集30道C语言指针题目分享给大家&#xff0c;测试环境位64位ubuntu18.04环境&#xff0c;如有错误&#xff0c;恳请指出&#xff0c;文明讨论&#xff01;&am…

基于SSM+JSP网上订餐管理系统(Java毕业设计)

大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的方法。无论你是…

Flask笔记三之连接使用数据库

本文首发于公众号&#xff1a;Hunter后端 原文链接&#xff1a;Flask笔记三之连接使用数据库 这一节介绍 Flask 与数据库的连接&#xff0c;以及接口里查询数据的操作。 这里使用的是 SQLAlchemy pymysql 实现与数据库的连接&#xff0c;SQLAlchemy 的详细介绍见之前的笔记有…

蓝桥杯2021年5月青少组Python程序设计国赛真题

30 个人在一条船上,超载&#xff0c;需要 15 人下船于是人们排成一队&#xff0c;排队的位置即为他们的编号。报数,从1开始,数到9的人下船。如此循环,直到船上仅剩15 人为止&#xff0c;问都有哪些编号的人下船了呢? 2】判断101-200之间有多少个素数&#xff0c;并输出所有素数…

Maven上传Jar到Nexus远程仓库的两种方式

Maven上传Jar到Nexus远程仓库的两种方式 文章目录 前言通过mvn clean deploy指令上传第一步 配置maven的setting.xml文件第二步 配置pom文件第三步 执行打包指令 手动上传 jar到远程仓库第一步 配置setting文件第二步 执行上传命令 前言 各个公司在开发项目时&#xff0c;一般…

Linux C/C++并发编程实战(8)CAS机制的ABA问题

文章目录 无锁队列中的ABA问题ABA问题解决方案 ABA问题&#xff1a;CAS在操作的时候会检查变量的值是否被更改过&#xff0c;如果没有则更新值&#xff0c;但是带来一个问题&#xff0c;最开始的值是A&#xff0c;接着变成B&#xff0c;最后又变成了A。经过检查这个值确实没有修…

Leetcode每日一题

https://leetcode.cn/problems/binary-tree-preorder-traversal/ 这道题目需要我们自行进行创建一个数组&#xff0c;题目也给出我们需要自己malloc一个数组来存放&#xff0c;这样能达到我们遍历的效果&#xff0c;我们来看看他的接口函数给的是什么。 可以看到的是这个接口函…

说说webpack中常见的loader?解决了什么问题?

在Webpack中&#xff0c;Loader是用于处理各种文件类型的模块加载器&#xff0c;它们用于对文件进行转换、处理和加载。常见的Loader解决了以下问题&#xff1a; 处理 JavaScript 文件&#xff1a;Babel Loader用于将最新的JavaScript语法转译为浏览器兼容的版本&#xff0c;以…

5_CSS三大特性盒子模型

第5章-盒子模型【比屋教育】 本课目标&#xff08;Objective&#xff09; 掌握CSS三大特性理解什么是盒子模型掌握内边距padding的用法掌握外边距margin的用法 1. CSS的层叠&#xff0c;继承&#xff0c;优先级 1.1 CSS层叠 层叠&#xff1a;是指多个CSS样式叠加到同一个元…

Web(8)SQL注入

Web网站&#xff08;对外门户&#xff09; 原理&#xff1a;not>and>or(优先级) 一.低级注入 order by的作用是对字段进行排序&#xff0c;如order by 5&#xff0c;根据第五个字段 进行排序&#xff0c;如果一共有4个字段&#xff0c;输入order by 5系统就会报错不 …

详细介绍开源固件-TF-A

什么是TF-A&#xff1f; TF-A&#xff08;Trusted Firmware-A&#xff09;是一种用于嵌入式系统的开源固件&#xff0c;而不是Linux的一部分。TF-A主要用于ARM架构的处理器和设备&#xff0c;它提供了一组安全和可信任的软件组件&#xff0c;用于引导和初始化系统。 如下是其…

GD32F30X-RT-Thread学习-线程管理

1. 软硬件平台 GD32F307E-START Board开发板MDK-ARM Keil 2.RT-Thread Nano 3.RT-Thread 内核学习-线程管理 ​ 在多线程操作系统中&#xff0c;可以把一个复杂的应用分解成多个小的、可调度的、序列化的程序单元&#xff0c;当合理地划分任务并正确地执行时&#xff0c;这…

qt可以详细写的项目或技术

1.QT 图形视图框架 2.QT 模型视图结构 3.QT列表显示大量信息 4.QT播放器 5.QT 编解码 6.QT opencv

Linux--RedHat--安装和配置C++环境

百度下载&#xff0c;安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1IgBfCCRxGYZ_PPiedad0xQ 提取码&#xff1a;ffff 下载后&#xff0c;建个目录&#xff0c;先解压好安装包&#xff01; &#xff08;两种方法&#xff09;执行如下命令&#xff1a; 参考…

Bypass open_basedir

讲解 open_basedir是php.ini中的一个配置选项&#xff0c;可用于将用户访问文件的活动范围限制在指定的区域。 假设open_basedir/var/www/html/web1/:/tmp/&#xff0c;那么通过web1访问服务器的用户就无法获取服务器上除了/var/www/html/web1/和/tmp/这两个目录以外的文件。…

Java——面试:String 和 StringBuffer 的区别?

相同点&#xff1a; String 和 StringBuffer&#xff0c;它们可以储存和操作字符串&#xff0c; 即包含多个字符的字符数据。 String 和 StringBuffer 的区别有以下几点&#xff1a; 1.String 类提供了数值不可改变的字符串。而 StringBuffer 类提供的字符串进行修改。 当你知…

洛谷 P8674 [蓝桥杯 2018 国 B] 调手表

文章目录 [蓝桥杯 2018 国 B] 调手表题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 题意解析CODE分析一下复杂度 [蓝桥杯 2018 国 B] 调手表 题目描述 小明买了块高端大气上档次的电子手表&#xff0c;他正准备调时间呢。 在 M78 星云&#xff0c;时间的计量…

JVM虚拟机:命令行查看JVM垃圾回收器的执行信息

在eclipse中打开命令行窗口 window->show view->Terminal 这样就打开了Terminal窗口&#xff0c;效果如下所示&#xff1a; java -XX:PrintCommandLineFlags -version 这个命令可以查看一些配置信息&#xff0c;其中最重要的配置信息就是&#xff0c;当前使用的G1回收器…

什么是漏洞扫描

漏洞扫描是指基于漏洞数据库&#xff0c;通过扫描等手段对指定的远程或者本地计算机系统的安全脆弱性进行检测&#xff0c;发现可利用漏洞的一种安全检测的 行为&#xff0c;也是一类重要的网络安全技术。它和防火墙、入侵检测系统互相配合&#xff0c;能够有效提高网络的安全性…

键盘打字盲打练习系列之成为大师——5

一.欢迎来到我的酒馆 盲打&#xff0c;成为大师&#xff01; 目录 一.欢迎来到我的酒馆二.关于盲打你需要知道三.值得收藏的练习打字网站 二.关于盲打你需要知道 盲打系列教程&#xff0c;终于写到终章了。。。一开始在看网上视频&#xff0c;看到up主熟练的打字技巧&#xff…