搭建vue3+vite+pinia项目步骤

news2025/2/24 10:37:24

方法一：使用vite生成项目（确保你的 node 版本是16.0.0或更高版本）

Vite 是一个新型的前端构建工具，专为现代前端开发优化。

第一步：创建项目，命令如下：
// 创建项目的命令
npm create vite@latest my-vue3-project -- --template vue
第二步：创建成功后进入到项目安装依赖：
cd my-vue3-project
npm install
第三步：依赖安装完成后运行项目：
npm run dev

运行成功后即可看到访问地址为：http://localhost:3000 ，通过地址可以看到 Vue 项目页面。

项目结构

无论你选择 Vue CLI 还是 Vite，项目结构大致相同：

  • src/: 源代码目录。
    • main.js: 项目的入口文件。
    • App.vue: 根组件。
    • components/: 存放组件的目录。
  • public/: 公共资源目录。
  • package.json: 项目的配置文件，包含依赖信息和脚本命令。
第四步：安装 vue-router 配置vue路由，安装命令如下 ：
npm install vue-router

1、修改 App.vue 文件，将默认的内容删除，加上我们需要的内容

<template>
    <router-view/>
</template>
<script setup>

</script>

<style scoped>

</style>

2、在 src 目录下创建 views 文件夹，并创建 home.vue 文件，用来存放我们的vue页面，当然真正开发过程中还是需要根据需求划分好页面目录哦~

<template>
    <div class="home">
        大家好！我是Vue3啊啊啊啊啊啊是！
    </div>
</template>
<script setup>

</script>

<style lang="less" scoped>
    
</style>

3、在 src 目录下创建 router 文件夹，并创建 index.js 文件，真正开发过程中随着路由的增多，可以划分不同模块的路由js文件，在 index.js 文件中引入哦

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

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/home',
            name: '/home',
            component: () => import('../views/home.vue'),
            meta: {
                title: '首页'
            }
        }
    ]
})

export default router

4、在 main.js 中引入路由

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


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

通过以上配置路由的配置就大功告成，启动项目，可以看见页面已经有了我们写的内容。

第五步：安装pinia，并配置 pinia，代替我们 vue2 中使用的 vuex
npm install pinia

1、在 src 目录下创建 store 文件夹，自定义js文件，例如图片的 user.js 可以用来缓存用户相关的数据（后续可以根据需求自定义不同模块的js文件）

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user',{
    state: () => {
        return {
            userInfo: {},
        }
    },
    getters: {},
    actions: {
        async getUserData(){
            // 异步或同步···
            this.userInfo = {
                name: '小破孩',
                age: 18
            }
        }
    },
})

2、在 main.js 中注册 pinia 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia' // 引入状态管理
const pinia = createPinia()


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

3、使用pinia，在vue文件中引入我们定义的pinia数据

<template>
    <div class="home">
        大家好！我是Vue3啊啊啊啊啊啊是！
    </div>
</template>
<script setup>
import { useUserStore } from '../store/user'
const userStore = useUserStore()
// 执行pinia中的getUserData方法
userStore.getUserData()
// 获取pinia中的userInfo数据
console.log('信息：',userStore.userInfo)

</script>

<style lang="less" scoped>
    
</style>
第六步：配置 less，让我们写样式时更方便，这里注意只需要安装less,不需要像 Webpack 那样还有安装 less-loader，vite已内置
npm install less

1、在 home.vue 文件中写 less 样式，测试下是否安装成功

<template>
    <div class="home">
        大家好！我是Vue3啊啊啊啊啊啊是！
        <div class="box">这是一块内容</div>
    </div>
</template>
<script setup>
import { useUserStore } from '../store/user'
const userStore = useUserStore()
// 执行pinia中的getUserData方法
userStore.getUserData()
// 获取pinia中的userInfo数据
console.log('信息：',userStore.userInfo)

</script>

<style lang="less" scoped>
    .home{
        color: pink;
        .box{
            color: yellowgreen;
            border: 1px solid yellowgreen;
        }
    }
</style>

如图下所示，已经安装成功！

第七步：使用 element-ui 组件库的 vue3 版本 element-plus
npm install element-plus

1、在 main.js 中注册 element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia' // 引入状态管理
const pinia = createPinia()

// 引入并注册 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}



createApp(App)
.use(router)
.use(pinia)
.use(ElementPlus,{locale: zhCn})
.mount('#app')

2、在vue文件中使用组件，测试是否安装成功

<template>
    <div class="home">
        大家好！我是Vue3啊啊啊啊啊啊是！
        <div class="box">这是一块内容</div>
        <el-button type="primary">按钮</el-button>
    </div>
</template>
<script setup>
import { useUserStore } from '../store/user'
const userStore = useUserStore()
// 执行pinia中的getUserData方法
userStore.getUserData()
// 获取pinia中的userInfo数据
console.log('信息：',userStore.userInfo)

</script>

<style lang="less" scoped>
    .home{
        color: pink;
        .box{
            color: yellowgreen;
            border: 1px solid yellowgreen;
        }
    }
</style>
第八步：配置 axios，让接口请求更为方便
npm install axios

1、在 src 目录下，创建 api 文件夹，并在api文件夹里创建 index.js 文件，index.js 文件代码如下：

import axios from 'axios'

axios.interceptors.request.use((config) => {
    // 拦截请求，做需要的处理
    return config
},(error) => {
    // 拦截http code异常等，可以做提示处理
})
axios.interceptors.response.use(
    (res => {
        // 拦截响应，做需要的处理，比如根据后端返回的code做全局提示处理，封装返回值等等
        return res
    },
    (errror) => {
        // 拦截http code异常等，可以做提示处理
    })
)

export default axios

2、在 main.js 中引入我们封装好 axios 的 api 文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './api/index' // 引入api文件
import { createPinia } from 'pinia' // 引入状态管理
const pinia = createPinia()

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}



createApp(App)
.use(router)
.use(pinia)
.use(ElementPlus,{locale: zhCn})
.mount('#app')

3、在 vite.config.js 中配置开发时代理，解决跨域问题

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
// const url = 'http://10.65.58.18/'
// const path = require('path')
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',  // 允许通过 IP 地址访问（此配置是项目运行后可以通过IP访问项目）
    port: 3000,       // 你可以指定其他端口
  //   proxy: {
  //     '/': {
  //       target:  url, // 需要代理的后端地址
  //       changeOrigin: true, // 发送请求头中host会设置target
  //     }
  //   }
  }
})
项目完整目录结构：

方法二：使用vue的脚手架生成项目，步骤如下图：

至此完成！！！

测试有效！！！感谢支持！！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue项目打包部署后 浏览器自动清除缓存问题（解决方法）

vue项目打包部署后 浏览器自动清除缓存问题（解决方法）

vue打包部署后 浏览器缓存问题&#xff0c;导致控制台报错ChunkLoadError: Loading chunk failed的解决方案 一、报错如下&#xff1a; 每次build打包部署到服务器上时&#xff0c;偶尔会出现前端资源文件不能及时更新到最新&#xff0c;浏览器存在缓存问题&#xff0c;这时在…
阅读更多...
JavaSE 面向对象程序设计进阶 Lambda表达式 2024年详解

JavaSE 面向对象程序设计进阶 Lambda表达式 2024年详解

Lambda表达式 作用 简化匿名内部类的书写 排序包装类数组 改写匿名内部类 代码实现 import java.util.Arrays; import java.util.Comparator;public class Main {public static void main(String[] args) {Integer[] arrnew Integer[]{2,1,3,4};Arrays.sort(arr,(Integer o1…
阅读更多...
大模型成为软件和数据工程师

大模型成为软件和数据工程师

前言 想象一下这样一个世界&#xff1a;人工智能伙伴负责编码工作&#xff0c;让软件和数据工程师释放他们的创造天赋来应对未来的技术挑战&#xff01; 想象一下&#xff1a;你是一名软件工程师&#xff0c;埋头于堆积如山的代码中&#xff0c;淹没在无数的错误中&#xff0…
阅读更多...
PyCharm

PyCharm

一、介绍 PyCharm 是 JetBrains 公司开发的一款功能强大的 Python 集成开发环境&#xff08;IDE&#xff09;。它专为 Python 开发设计&#xff0c;提供了一系列强大的工具和功能&#xff0c;帮助开发者更高效地编写、调试和维护 Python 代码。以下是对 PyCharm 的详细介绍&am…
阅读更多...
spring boot 接口参数解密和返回值加密

spring boot 接口参数解密和返回值加密

spring boot 接口参数解密和返回值加密 开发背景简介安装配置yml 方式Bean 方式 试一下启动项目返回值加密参数解密body 参数解密param和form-data参数解密 总结 开发背景 虽然使用 HTTPS 已经可以基本保证传输数据的安全性&#xff0c;但是很多国企、医疗、股票项目等仍然要求…
阅读更多...
SEELE框架：图像中主体重定位的创新方法

SEELE框架：图像中主体重定位的创新方法

现有的图像编辑工具多集中于静态调整&#xff0c;如替换图像中的特定区域或改变整体风格&#xff0c;对于动态调整——特别是图像中主体的位置变化则显得力不从心。这种局限性激发了对更加先进和灵活的图像编辑技术的探索。复旦大学数据科学学院的研究团队提出了一种名为SEELE的…
阅读更多...
ZW3D二次开发_CAM_设置参数并输出NC文件

ZW3D二次开发_CAM_设置参数并输出NC文件

ZW3D可以输出NC文件&#xff0c;代码示例如下&#xff1a; int index;int ret cvxCmInqIndexFromName(CM_OUT, (char*)"NC", &index);//获取参数svxNcSetting ncSet;ret cvxCmGetOutputNCSet(index, &ncSet);//设置参数strcpy_s(ncSet.filename, "C:\…
阅读更多...
4个免费文章生成器，为你免费一键生成原创文章

4个免费文章生成器，为你免费一键生成原创文章

在当今的创作领域&#xff0c;创作者们常常陷入各种困境。灵感的缺失、内容创新的压力&#xff0c;每一项都如同沉重的枷锁&#xff0c;束缚着他们的创作步伐。但随着免费文章生成器的出现&#xff0c;宛如一场及时雨&#xff0c;为创作者们带来了新的希望和转机。免费文章生成…
阅读更多...
Runway Gen-3 实测，这就是 AI 视频生成的 No.1！视频高清化EvTexture 安装配置使用!

Runway Gen-3 实测，这就是 AI 视频生成的 No.1！视频高清化EvTexture 安装配置使用!

Runway Gen-3 实测，这就是 AI 视频生成的 No.1！视频高清化EvTexture 安装配置使用! 由于 Runway 作为一个具体的工具或平台，其详细信息在搜索结果中没有提供，我将基于假设 Runway 是一个支持人工智能和机器学习模型的创意工具，提供一个关于使用技巧和类似开源项目的文稿总…
阅读更多...
上网行为管理系统是什么？有哪些好用的上网行为管理系统？

上网行为管理系统是什么？有哪些好用的上网行为管理系统？

IT经理&#xff08;ITM&#xff09;: 大家好&#xff0c;今天我们聚在这里&#xff0c;是为了讨论一个对我们公司来说越来越重要的议题&#xff1a;上网行为管理系统&#xff08;WBS&#xff09;。我们知道&#xff0c;员工的网络使用已经不仅仅是个人行为&#xff0c;它直接影…
阅读更多...
S32K3 工具篇4：如何在S32DS中使用lauterbach下载

S32K3 工具篇4：如何在S32DS中使用lauterbach下载

S32K3 工具篇4&#xff1a;如何在S32DS中使用lauterbach下载 1. TRACE32软件下载与配置2. 如何在S32DS里面构建劳德巴赫的接口2.1 新建工程带有lauterbach2.2 已有工程没有lauterbach 劳德巴赫lauterbach是一款非常经典强悍的调试器&#xff0c;还带有trace功能&#xff0c;在汽…
阅读更多...
CAN_TxStatus_Pending报错问题

CAN_TxStatus_Pending报错问题

最近用STM32F407最小电路板测试CAN通讯遇到点小问题&#xff1a;回环模式测试没有问题的基础上&#xff0c;两块相同的最小系统板之间也可以通讯。但把其中一块板子换成USB转CAN分析仪时(或者其他板子)&#xff0c;怎么也调不通。 思考良久&#xff0c;硬件测试正常&#xff0c…
阅读更多...
只需几个演示就能对齐大模型，杨笛一团队提出的DITTO竟如此高效

只需几个演示就能对齐大模型，杨笛一团队提出的DITTO竟如此高效

人类的教育方式&#xff0c;对大模型而言也很适用。 养育孩子时&#xff0c;古往今来人们都会谈到一种重要方法&#xff1a;以身作则。也就是让自己成为孩子模仿学习的范例&#xff0c;而不是单纯地告诉他们应该怎么做。在训练大语言模型&#xff08;LLM&#xff09;时&#xf…
阅读更多...
防勒索病毒袭击，及时定期备份势在必行——易备防勒索备份成功案例

防勒索病毒袭击，及时定期备份势在必行——易备防勒索备份成功案例

上海某贸易有限公司是于 2010 年 6 月在上海成立的全日资企业&#xff0c;注册资金一亿日元。总公司位于日本东京&#xff0c;从事独立开发制造和销售使用纯天然的植物制成的化妆品、健康食品、日用小商品。 该公司使用用友优普 U8 供应链及电商系统&#xff0c;该系统部署于阿…
阅读更多...
CV02_超强数据集：MSCOCO数据集的简单介绍

CV02_超强数据集：MSCOCO数据集的简单介绍

1.1 简介 MSCOCO数据集&#xff0c;全称为Microsoft Common Objects in Context&#xff0c;是由微软公司在2014年推出并维护的一个大规模的图像数据集&#xff0c;旨在推动计算机视觉领域的研究&#xff0c;尤其是目标识别、目标检测、实例分割、图像描述生成等任务。该数据集…
阅读更多...
什么是OSPFv2 ?

什么是OSPFv2 ?

什么是OSPF ? 开放式最短路径优先 OSPF&#xff08;Open Shortest Path First&#xff09;是IETF组织开发的一个基于链路状态的内部网关协议&#xff08;Interior Gateway Protocol&#xff09;。 目前针对IPv4协议使用的是OSPF Version 2&#xff08;RFC2328&#xff09;&a…
阅读更多...
CAN总线（上）

CAN总线（上）

CAN总线&#xff08;Controller Area Network Bus&#xff09;控制器局域网总线 CAN总线是由BOSCH公司开发的一种简洁易用、传输速度快、易扩展、可靠性高的串行通信总线&#xff0c;广泛应用于汽车、嵌入式、工业控制等领域 CAN总线特征&#xff1a; 两根通信线&#xff08;…
阅读更多...
mars3d加载wms服务或者wmts服务注意事项

mars3d加载wms服务或者wmts服务注意事项

1.wms只支持4326、3857、4490的标准切片&#xff0c;其他坐标系不支持 Mars3D三维可视化平台 | 火星科技 2.wmts同理&#xff0c;Mars3D三维可视化平台 | 火星科技 3.对应级别tilematrix找到的瓦片tilerow&tilecol这两个参数使用常见报错无效参考&#xff1a; 【Mars3d】…
阅读更多...
JAVA 八大warrp包装类

JAVA 八大warrp包装类

一、介绍 二、自动拆箱与手动拆箱 //jdk5前是手动装箱和拆箱//手动装箱 int -> Integerint n1 100;Integer integer new Integer(n1);//只要new就shibuInteger integer1 Integer.value0f(n1)//手动拆箱//Integer -> intint i integer.intValue(); ​//jdk5后&#xff…
阅读更多...
源代码防泄漏之反向沙箱方案的经验分享

源代码防泄漏之反向沙箱方案的经验分享

反向沙箱&#xff08;Reverse Sandbox&#xff09;是一种安全技术&#xff0c;主要用于检测和分析恶意软件的行为。与传统沙箱不同&#xff0c;反向沙箱的重点在于模拟恶意软件的预期运行环境&#xff0c;以诱导恶意软件展示其真实行为。这种技术可以帮助安全专家更深入地理解恶…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023