构建Vite+Vue+Pinia+Axios+el-plus基础框架

构建Vite+Vue+Pinia+Axios+el-plus基础框架

环境准备

node.js (v16以上版本),vscode

1.构建项目

npm create vite@latest

输入项目名
在这里插入图片描述
选择Vue
在这里插入图片描述

选择TypeScript
在这里插入图片描述

选择后项目自动创建

2.ts文件引用提示错误及vue文件引用提示错误问题解决(如果使用的是vetur插件)

刚创建完的项目ts文件及vue文件打开会报引用错误:
在这里插入图片描述

下载volar插件:TypeScript Vue Plugin (Volar)和Vue Language Features (Volar)
禁用vetur插件

3.安装vue-router路由组件

3.1 npm i vue-router@4
3.2 src下创建文件夹router及在其内创建index.ts,内容如下:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "home",
            component: () => import("../views/Home.vue")
        }
    ]
})
export default router

3.3创建对应Home.vue内容如下:

<template>
    <div>
        <h1>This is HomePage!!</h1>
    </div>
</template>
  
<script setup lang='ts'>

</script>
  
<style lang='less' scoped>
</style>

3.4在main.ts中使用router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3.5 在App.vue中增加标签:

<RouterView></RouterView>

路由配置完成
关于路由的导航守卫等等高级用法请参考官网教程,地址如下:
https://router.vuejs.org/zh/guide/

4.安装状态管理组件pinia

4.1为什么使用pinia:这是官方推荐的状态管理组件,相比较于更早的vuex,它的写法更加简单、支持setup的语法,同时也支持原来vuex的大部分写法,代码管理更为简洁,开发效率更高,它的包体积也很小。
4.2 安装:npm i pinia
4.3 基本使用、持久化、在路由守卫中使用状态
4.3.1基本使用
新建文件src/store/index.ts内容如下:

import { createPinia } from 'pinia'

const pinia = createPinia()
export default pinia

在main.ts中注入
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import pinia from './store'

createApp(App).use(router).use(pinia).mount('#app')

在store目录下创建模块文件夹modules,新建文件demo.ts

import { defineStore } from 'pinia'
import { ref } from 'vue'

const useDemoStore = defineStore('demo', () => {
    const counter = ref(0)
    const increment = () => {
        counter.value++
    }
    return {
        counter,
        increment
    }
})
export default useDemoStore

在Home.vue中使用:

<template>
    <div>
        <h1>This is HomePage!!</h1>
        <h3>counter: {{ counter }}</h3>
        <button @click="add">
            点击增加
        </button>
    </div>
</template>
  
<script setup lang='ts'>
import useDemoStore from '../store/modules/demo'
import { storeToRefs } from 'pinia'
const demoStore = useDemoStore()
const { counter } = storeToRefs(demoStore)

const add = () => {
    demoStore.increment()
}
</script>
  
<style lang='less' scoped>
</style>

这里需要注意的是storeToRefs方法是用于响应式,如果直接解构demoStore会失去响应式效果。

4.3.2 持久化
状态管理持久化是因为存储的一些状态信息是保存在内存中的,这些信息在退出登录之前都应该保留,而刷新浏览器会导致状态回归初始值,所以需要对状态做持久化。具体方法如下:
A.安装组件 npm i pinia-plugin-persistedstate
B.引入组件
在创建pinia时使用修改store/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia

C.修改src/store/modules/demo.ts
在defineStore方法中增加第三个参数:

 {persist: true}

这个参数将会把状态存入localstorage中,刷新页面时会同步回状态。
此时状态已完成持久化。
如果需要将状态存储进sessionStorage中需要把persist修改为对象:

{
    persist: {
        key: 'aaa',
        storage: sessionStorage
    }
}

4.3.3 在路由守卫中使用状态
A.创建路由守卫文件src/router/guard/index.ts

import router from '../../router'
import useDemoStore from '../../store/modules/demo'
import { storeToRefs } from 'pinia'

// 全局前置守卫
router.beforeEach((to, from) => {
    const demoStore = useDemoStore()
    const { counter } = storeToRefs(demoStore)
    // 从 store 中获取其他值,再决定返回值
    // 这里演示获取 store 中 counter 的值
    console.log('counter:' + counter.value)
    return true
})

B.在main.ts中引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import pinia from './store'
import './router/guard/index'

createApp(App).use(router).use(pinia).mount('#app')

以上则为路由守卫中使用状态方法。

5.集成element-plus

5.1安装 npm i element-plus
5.2 引入,方式分为全局引入和按需引入,全局引入省事但是包体积较大,按需引入(自动引入)是官方推荐方式,这里只介绍自动引入方式,想了解其他方式可参考element-plus官网。
5.2.1 安装自动引入组件 npm install -D unplugin-vue-components unplugin-auto-import
5.2.2 修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  }),]
})

至此配置已完成,可以使用了。
5.2.3 使用
修改Home.vue的button改为element-plus的按钮样式,无需做任何额外引用
在这里插入图片描述

运行效果:
在这里插入图片描述

6.集成axios用于与后端交互

6.1安装 npm i axios
6.2配置跨域在vite.config.ts中增加代理

  server: {
    open: true,
    host: '127.0.0.1',
    port: 5173,
    https: false,
    proxy: { // 配置跨域
      '/demo': {
        target: 'https://www.baidu.com/',
        ws: true,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/demo/, '')
      }
    }
  }

6.3在对应页面使用例如

import axios from 'axios'
axios.get("demo").then((res) => {
    console.log(res)
})

至此基础框架搭建完成,更多封装用法及其他用法后续再介绍。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vite是一个用于快速构建现代化的Web项目的构建工具,它专注于开发阶段的快速热重载,并使用ES模块作为原生的开发模式。Vue3是Vue.js的最新版本,它在性能、开发体验和可维护性上都有所提升。 针对你提到的具体的库和框架: - Vue Router是Vue.js官方的路由管理器,用于实现页面之间的导航和路由控制。你可以通过npm安装vue-router,并在项目中进行配置和使用。 - Pinia是Vue.js的状态管理库,它提供了一种简单而强大的方式来管理应用程序的状态。你可以集成Pinia到你的Vue项目中,以便更好地组织和共享你的应用程序状态。 - Axios是一个基于Promise的HTTP客户端,用于通过网络发送异步请求。你可以使用Axios来处理与服务器的通信,并获取数据来更新你的Vue应用程序。 - Element Plus是一套基于Vue3的组件库,包含了丰富的UI组件,可以帮助你快速搭建漂亮的用户界面。你可以在项目中安装和使用Element Plus来实现各种交互效果和用户界面。 如果你想使用ViteVue3和以上提到的库和框架来创建一个项目,你可以按照以下步骤进行: 1. 安装Vite:通过npm全局安装Vite,然后使用Vite命令初始化一个新的项目。 2. 配置Vite:根据你的项目需求,在Vite的配置文件中添加Vue Router、Pinia、AxiosElement Plus的相关配置。 3. 安装和配置Vue Router:通过npm安装Vue Router,并在项目中配置和使用Vue Router来管理应用程序的路由。 4. 集成Pinia:通过npm安装Pinia,并在项目中引入和配置Pinia,以便在应用程序中使用Pinia来管理状态。 5. 使用Axios:通过npm安装Axios,并在项目中引入和配置Axios,以便进行网络请求和数据获取。 6. 引入Element Plus:通过npm安装Element Plus,并在项目中按需引入和使用Element Plus的组件,以搭建漂亮的用户界面。 希望以上信息对你有帮助,祝你在使用ViteVue3和这些库和框架时取得成功!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vite-vue-ts精简模版集成pinia+svg+router+@src](https://download.csdn.net/download/ldy889/85018930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vite+vue3+ts+vue-router+pinia+axios+element-plus](https://blog.csdn.net/zy_080400/article/details/127125359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值