当前位置: 首页 > news >正文

vue3+vite 项目的创建

这里要提醒一下,如果我们要使用 vue3 的组合式api 的写法的话, 那么我们使用的 vue 版本不能低于 vue3.2 版本,不能低于 vue3.2 版本,不能低于 vue3.2 版本

vue2 已停止维护了, 现在全面拥抱vue3
之前用 vue-cli 创建的 vue2项目很方便的, 但是,它所使用的是webpack 的工具,不是 vite

所以我们要自己来创建一个 vue3 + vite 项目
首选创建一个 vite 项目 ,创建的时候,会让你选择使用 vue 还是 react

npm create vite@latest

在这里插入图片描述
输入项目的名称,之后选择 vue
在这里插入图片描述
然后选择语法, 我一般使用的是 JavaScript
在这里插入图片描述
至此一上vite项目就算建好了
然后就是 cd 目录, 之后 npm install


以上只是一个单纯的 vue + vite 项目
我们要使用的话, 还要安装 vue-router sass sass-loader pinia 都要自已装上

说明一下, vite 的 index.html 文件不是在 public 目录下, 不影响,一样的用。

下面是安装vue-router 的过程

npm install vue-router

rotuer.js 文件

import {createRouter,createWebHashHistory} from "vue-router";const routes = [{path:"/home",name:"home",component:import("../pages/HomeView.vue")}
]const router = createRouter({history:createWebHashHistory(),routes
})export default router;

同时修改 App.vue 文件

在这里插入图片描述
同时修改main.js文件

在这里插入图片描述

http://www.lryc.cn/news/308672.html

相关文章:

  • Windows Server 2022 使用ApacheDS用户认证
  • 【Oracle】Oracle清理日志空间
  • 数据抽取平台pydatax介绍--实现和项目使用
  • 容易发生内存泄漏的八个场景,你都知道吗?
  • 掌握 Vue3 中的 setup 函数
  • BUUCTF AWD-Test1
  • 百亿诈骗案频出,欧科云链用“技术责任”拓宽Web3安全边界
  • 一个实时波形图的封装demo(QT)(qcustomplot)
  • Java进阶-反射
  • 力扣180 连续出现的数字
  • C++面试 -操作系统-架构能力:内存问题分析与性能优化
  • 基于springboot+vue的共享汽车管理系统(前后端分离)
  • All Roads Lead to Rome (30)
  • GO语言学习笔记(与Java的比较学习)(四)
  • 在实训云平台上配置云主机
  • 什么是隔离式栅极驱动器?
  • 蓝桥杯算法赛 第 6 场 小白入门赛 解题报告 | 珂学家 | 简单场 + 元宵节日快乐
  • 附加Numpy数组
  • 收银系统源码-智慧新零售,ERP进销存功能详解
  • STM32使用PB3, PB4引脚的注意事项
  • OSCP靶场--DVR4
  • 【嵌入式——QT】日期与定时器
  • 如何决定使用HashMap还是TreeMap?
  • 平台工程与安全
  • 智能咖啡厅助手:人形机器人 +融合大模型,行为驱动的智能咖啡厅机器人(机器人大模型与具身智能挑战赛)
  • js处理IOS虚拟键盘弹出后输入框被遮住
  • 脚手架工程使用ElementUI
  • 163邮箱SMTP端口号及服务器地址详细设置?
  • 【STM32】STM32学习笔记-独立看门狗和窗口看门狗(47)
  • 计算机网络——IPV4数字报