vue3+vite 项目的创建

news2024/9/20 22:23:28

这里要提醒一下,如果我们要使用 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.coloradmin.cn/o/1480502.html

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

相关文章

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:图片边框设置)

设置容器组件的图片边框样式。 说明: 从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 borderImage borderImage(value: BorderImageOption) 设置组件的图片边框。 卡片能力: 从API version 9开始…

2.2_4 调度算法的评价指标

文章目录 2.2_4 调度算法的评价指标(一)CPU利用率(二)系统吞吐量(三)周转时间(四)等待时间(五)响应时间 总结 2.2_4 调度算法的评价指标 注:要理解…

CentOs的yum报错: except KeyboardInterrupt, e:

1.报错 File “/bin/yum”, line 30 except KeyboardInterrupt, e: ^^^^^^^^^^^^^^^^^^^^ 2.原因:yum需要用python2编译,如果服务器安装的是python3.6并作为默认编译器的话,就会出现这个错误。 3.解决方法:whereis python 4.修改y…

【EI会议征稿通知】第三届新能源、储能与电力工程国际学术会议(NESP 2024)

第三届新能源、储能与电力工程国际学术会议(NESP 2024) 2024 3rd International Conference on New Energy, Energy Storage and Power Engineering (NESP 2024) 近几十年来,全球能源消耗迅速增加,因此寻找和开发性能优良的环保…

如何根据我的世界/Minecraft玩家数量选择合适的服务器配置,包括内存和CPU核心数的实际案例分析?

根据Minecraft玩家数量选择合适的服务器配置,首先需要考虑的是服务器的处理能力,这主要由CPU和内存决定。对于Minecraft服务器来说,CPU核心数直接影响到服务器能够同时处理的任务数量,而内存容量则决定了服务器能承载的人数。 对…

P1160 队列安排题解

题目 一个学校里老师要将班上N个同学排成一列,同学被编号为1∼N,他采取如下的方法: 先将1号同学安排进队列,这时队列中只有他一个人; 2∼N号同学依次入列,编号为i的同学入列方式为:老师指定编…

我写了个ImageWindow应用

文章目录 0 引言1 应用简介2 主要功能和特点2.1 多图像同/异步像素级对比2.2 支持多达30种图像格式2.3 高效率的图像处理性能 3 简明使用教程3.1 软件下载安装与更新3.1.1 软件下载与安装3.1.2 软件更新 3.2 多视窗添加并自动最优排列3.3 多样化图像导入方式3.4 自动切换显示模…

如何实现WordPress后台显示文章、分类目录、标签等的ID?

我们平时在使用WordPress的过程中,偶尔需要用到文章的ID,或分类目录ID,或标签ID,或媒体库ID,或评论ID,或用户ID等,但是WordPress后台默认是不显示它们的ID的。 今天boke112百科就跟大家分享如何…

Linux 下安装Jupyter

pip3 install jupyter pip3 install ipython -------------------------------------------- pip3 install jupyterlab jupyter lab pip3 list | grep jupyterlab 启动: python3 -m jupyter lab 2.安装朱皮特 pip3 install -i https://pypi.douban.com/simpl…

力扣1107 每日新用户统计

力扣SQL查询案例——在过去90天内,每个日期首次登录的用户数 目录 题目描述 解题思路 完整代码 题目描述 Traffic 表: ------------------------ | Column Name | Type | ------------------------ | user_id | int | | activity …

计算机二级MySQL-错题、知识点合集04

计算机二级MySQL 第四章 索引 主键约束,不允许为空也不允许重复。 NOT NULL非空约束属于自定义完整约束 PRIMARY KEY 属于实体完整性约束 FOREIGN KEY外键约束 外键与其引用的主键应分别属于不同的表,可以属于同一个关系;一个关系中可以定…

如何在Window系统部署BUG管理软件并结合内网穿透实现远程管理本地BUG

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

css5定位

css 一.定位1.概念(定位定位模式边位移)2.静态位移static(不常用)3.相对定位relative(不脱标)(占位置)4.绝对定位absolute(脱标)(不占位置&#x…

Unity(第十七部)Unity自带的角色控制器

组件Character Controller 中文角色控制器 using System.Collections; using System.Collections.Generic; using UnityEngine;public class player : MonoBehaviour {private CharacterController player;void Start(){player GetComponent<CharacterController>();}v…

leetcode刷题(javaScript)——栈相关场景题总结

在LeetCode刷题中&#xff0c;栈是一个非常有用的数据结构&#xff0c;可以解决许多问题&#xff0c;包括但不限于以下几类问题&#xff1a; 括号匹配问题&#xff1a;例如检查括号序列是否有效、计算表达式的值等。逆波兰表达式求值&#xff1a;使用栈来实现逆波兰表达式的计算…

Linux线程【1概念】

目录 前言&#xff1a; 正文&#xff1a; 1.什么是线程&#xff1f; 1.1基本概念 1.2线程理解 1.3进程与线程的关系 1.4线程使用 2.重谈地址空间 2.1页表的大小 2.2、内存与磁盘的交互 2.3深入页表 2.4小结 3.线程概念总结 3.1、再谈线程 3.2线程的优点 3.3…

MYSQL 解释器小记

解释器的结果通常通过上述表格展示&#xff1a; 1. select_type 表示查询的类型 simple: 表示简单的选择查询&#xff0c;没有子查询或连接操作 primary:表示主查询&#xff0c;通常是最外层的查询 subquery :表示子查询&#xff0c;在主查询中嵌套的查询 derived: 表示派…

pip降级在pycharm中

PyCharm依赖于"–build-dir"参数安装第三方库&#xff0c;但该参数在最新的23.0版pip中已删除 解决办法就是降级pip&#xff0c;PyCharm中选择File&#xff0c;找到编译器&#xff0c;点击pip&#xff0c;勾选对应版本即可 或者在cmd中执行运行python -m pip install…

android开发软件下载,2024年Android开发陷入饱和

谈起性能优化&#xff0c;我想问&#xff0c; 什么是性能优化&#xff1f;你的理解呢&#xff1f; **首先什么是性能&#xff1a;**在同一个手机里面&#xff0c;同样功能的app&#xff0c;哪个跑的快&#xff0c;哪个不卡&#xff0c;哪个就性能高。我们这篇文章就是解决那些…

SQL注入漏洞解析--less-6

1.第六关了。 2.这个和第五关有点像&#xff0c;只是换成了双引号&#xff0c;接下来的都一样&#xff0c;看我操作(换个函数试一下extractvalue&#xff0c;他的报错位置在第二个&#xff0c;那我就利用一下) 3.爆库名 ?id1"%20and%20extractvalue(1,concat(0x7e,(sele…