Vue3项目从0-1项目(手把手教学)

简介: Vue3项目从0-1项目(手把手教学)

学完vue3之后一直感觉手痒痒想用vue3做项目,正好最近公司不是很忙,就以公司现开发项目为模板将公司项目升级3.0。


项目搭建


01. 搭建项目


vue create qitaijk3.0


e96ab97d36a34ad4be0ec4c05db53dce.png


选择自定义第三个


e625ae120af44754b362ea2e07b32651.png


选择125678(空格选中)回车确定


1dd2fa69584b4625bf059b7a56bfbda6.png


选择3

99b2c3ea6b6941cd9fb62de0b727905c.png


选择n

3e40abc56b1944eda83d09defb52ffc6.png


选择less

98d8b813b1304c08b38b6cfc78d514a8.png


选择第三个 Standard config

a33b55644e2f4c1d9ccbdd37d9fca887.png


两个都选中

9e86f7df5467468d8264157c23721eaf.png


选择第一个

f89df3608e644d8e8d28256def3014c4.png


选择n

b0e6bcf5efed45f88fa28cc9abd1b032.png


到这里搭建就已经完成了


以上用户可根据自己喜好进行配置。新手建议跟随作者进行配置


完成之后可以先尝试运行项目


也可以使用npm run serve 我这边使用的是yarn

32e64ea94c32491db18f8d84c4063b57.png


dc005cbe32974a389b513b46bf31ef2a.png



Vuex配置


完成了上面配置 接下里我们就进入到vuex的配置中


首先因为vuex的数据我们需要做持久化,所以首先下载vuex持久化插件

npm i vuex-persistedstate
yarn add vuex-persistedstate


老规矩,还是分模块


在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 database.js


user.js

// 用户模块
export default {
  namespaced: true,
  state () {
    return {
      setUser: {
      }
    }
  },
  mutations: {
    setUser (state, setUser) {
      state.setUser = setUser
    }
  }
}


22f123b374b04bffb3a100be84f57b08.png


database.js

// 分类模块
export default {
  namespaced: true,
  state () {
    return {
      database: []
    }
  }
}


b29a823e09364296b77d5b7f0d075f84.png


store/index.js


然后接下来在store的首页引入持久化插件进行使用

import { createStore } from 'vuex'
// 引入持久化插件
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import database from './modules/database'
export default createStore({
  modules: {
    user,
    database
  },
  plugins: [
    createPersistedstate({
      key: 'haihaina', // 存储的名字
      paths: ['user', 'database'] // 持久化的模块
    })
  ]
})


92795b2e44f14569b404d31d844486ec.png


axios


接下来就到了封装axios


首先第一步还是需要下载axios

npm i axios
yarn add axios


新建 src/utils/request.js 模块


// 1. 创建一个新的axios实例

// 2. 响应拦截器:2.1. 剥离无效数据  2.2. 处理token失效

// 3. 导出一个函数,调用当前的axsio实例发请求,返回值promise


// 1. 创建一个新的axios实例
import axios from 'axios'
// 导出基准地址
export const baseURL = '公司项目的地址'
const instance = axios.create({
  // axios 的一些配置,baseURL  timeout
  baseURL,
  timeout: 5000
})
instance.interceptors.request.use(config => {
  return config
}, err => {
  return Promise.reject(err)
})
// 2. 响应拦截器:2.1. 剥离无效数据  2.2. 处理token失效
instance.interceptors.response.use(
  // res => res.data  取出data数据,将来调用接口的时候直接拿到的就是后台的数据
  res => res.data,
  err => {
    return Promise.reject(err)
  })
// 3. 导出一个函数,调用当前的axsio实例发请求,返回值promise
// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求:请求地址,请求方式,提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}


4f5eee5c051d4f14b58d2ea8b185057b.png


到这里我们Vue3的项目就已经基本上完成啦,下面就可以按照自己公司项目需求进行项目的路由的设计,如果这篇文章对您有所帮助,欢迎点赞收藏。


目录
打赏
0
0
0
0
3
分享
相关文章
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
390 5
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
200 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
175 17
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
45 0
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
186 6
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
437 0
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
235 2
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问