vite搭建vue3项目

参考视频

1.使用npm搭建vite项目,会自动搭建vue3项目

npm create vite@latest
yarn create vite

2.手动搭建vue3项目

  • 创建一个项目名称的文件夹
  • 执行命令:npm init -y 快速的创建一个默认的包信息
  • 安装vite: npm i vite -D
    -D开发环境的依赖
    在这里插入图片描述
  • 安装vue,现在默认是vue3. 执行命令: npm i vue -D/-S都可以
  • 创建index.html文件,src=“入口js文件” ,添加id="app"挂载点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div><script type="module" src="./src/main.js"></script>
</body>
</html>
  • 创建src目录下的js入口文件main.js
  • 创建App.vue组件,并定义路由出口
<template><router-view /> <!--  定义路由出口 -->
</template>
  • 在main.js文件中引入App.vue文件
import { createApp } from "vue";
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
  • 由于html文件中不能跑App.vue文件,需要安装一个插件:执行命令 npm i @vitejs/plugin-vue -D ,如果npm run dev不报错不需要安装
    在这里插入图片描述

  • 配置vite.config.js文件,如果npm run dev不报错不需要配置以下代码

import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [Vue()]
})

3.在vite+vue3项目中使用vue-router和pinia

  • 安装vue-router,执行命令: npm i vue-router -D
  • src目录下创建router.js文件
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({routes: [],history: createWebHistory()
})export default router;

然后需要在入口js文件中挂载路由

入口main.js文件中
import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js'; // 导入路由
const app = createApp(App);
app.use(router); // ----挂载路由----
app.mount('#app');
  • 安装pinia 执行命令: npm i pinia -D
  • 创建pinia.js文件
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

还需要在入口main.js文件中挂载使用pinia

import { createApp } from "vue";
import App from './App.vue';
import router from './modules/router.js';
import pinia from './modules/pinia.js'; // 引入piniaconst app = createApp(App);
app.use(router);
app.use(pinia); // ------挂载pinia------
app.mount('#app');
  • 使用pinia
    先创建一个store/counter.js文件
import { defineStore } from "pinia";// defineStore第一个参数是它的id,
export const useCounterStore = defineStore('counter', {state() {return {num: 1, // 初始值为1}},actions: {// 只有actions了inc() {this.num++;}}
})

然后在需要使用的组件里使用

<script setup>
import { useCounterStore } from "../stores/counter.js";
const counter = useCounterStore();</script><template><div @click="counter.inc()">我是首页 {{ counter.num }}</div>
</template>

4.vite+vue3中使用按需加载

  • 为了解决在一个文件中引入多个组件,安装插件:unplugin-vue-components
npm i unplugin-vue-components -D

在vite.config.js文件中配置插件

import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite'; // 导入插件export default defineConfig({plugins: [Vue(), Components()] // -----挂载插件------
})

在需要使用的组件中:

<script setup>
// 安装了unplugin-vue-components插件后,components中的组件可以不用引入直接使用
// import Common from "../components/Common.vue";
</script><template>我是about页面<Common />
</template>
  • 在element-plus中使用按需加载
    在vite.config.js中配置
import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers'; // 配置element-plus, naiveUiexport default defineConfig({plugins: [Vue(), Components({resolvers: [ElementPlusResolver(), NaiveUiResolver()]})]
})

还需再安装element-plus:执行命令: npm i element-plus -D然后就可以再组件中使用点击一下 element-plusUI了

<el-button>element-plus按钮</el-button>

如果上面配置了NaiveUiResolver,则需要安装naive-ui,执行命令:npm i naive-ui -D
在组件中使用naive-ui会自动寻找依赖,不需要配置这些组件库直接用就好了

<n-button>naive-ui按钮</n-button>
  • 安装unplugin-auto-import插件可以不用import { ref } from ‘vue’;
npm i -D unplugin-auto-import

在vite.config.js文件中挂载插件

import { defineConfig } from "vite";
import Vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import AutoImport from "unplugin-auto-import/vite";
import { ElementPlusResolver, NaiveUiResolver } from 'unplugin-vue-components/resolvers';export default defineConfig({plugins: [Vue(),AutoImport({imports: ['vue', 'vue-router', 'pinia']}), // -------挂载插件-------需要imports值Components({resolvers: [ElementPlusResolver(), NaiveUiResolver()]})]
})

在组件中使用:

<script setup>
// import { ref } from "vue"; // 安装了插件后可以不用在导入ref
const counter = ref(100);
const inc = () => {counter.value ++;
}
</script><template><div @click="inc">Common组件{{counter}}</div>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nodejs下载指定版本

1.搜索nodejs打开官网nodejs官网&#xff08;除了去官网下载之外还可以使用nvm下载&#xff09; 2.点击downloads 3.往下滑点击Previous Releases(以前的版本) 4.找到你想下载的版本点开&#xff08;此处可能没你想要的具体版本&#xff0c;没关系找到大版本号相同的点开就行了…

【PowerQuery】Excel 的自动刷新功能-最低一分钟刷新

在Excel集成了PowerQuery之后,它提供了数据的手动刷新功能之外,也提供了数据的自动刷新功能。需要注意的是,PowerQuery提供的自动刷新功能是针对连接的,也就是说在PowerQuery自动刷新功能不是全局刷新功能,而是针对连接本身提供。接下来我们来看一下如何实现PowerQuery连接…

快速实现抖音上下滑动,你不知道的ViewPager2用法,信息量巨大,建议收藏点赞。老tier~

万能ViewPager2适配器–SmartViewPager2Adapter 特点功能 完全脱离xml&#xff0c;所有效果只需要通过api调用 具体功能&#xff1a;1. 两句代码实现抖音列表效果2. 无感且丝滑&#xff0c;动态从头部或者底部加载数据3. 设置上下加载监听&#xff0c;再达到预加载limit的时…

Python之面向对象(一)

目录 面向对象为什么要面向对象&#xff1f;要素 定义一些特性内存空间实例的创建与初始化创建实例方法__new__初始化实例方法__init__ 类的继承多态新式类与经典类 面向对象 为什么要面向对象&#xff1f; 方便版本更新迭代&#xff0c;程序结构清晰明了 要素 类&#xff…

Java(三)逻辑控制(if....else,循环语句)与方法

逻辑控制&#xff08;if....else&#xff0c;循环语句&#xff09;与方法 四、逻辑控制1.if...else(常用)1.1表达格式&#xff08;三种&#xff09; 2.switch...case(用的少)2.1表达式 3.while(常用)3.1语法格式3.2关键字beak&#xff1a;3.3关键字 continue&#xff1a; 4.for…

【web开发】6、Django(1)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、Django是什么&#xff1f;二、使用步骤1.安装Django2.创建项目3.创建app4.快速上手 数据库操作1.安装第三方模块2.自己创建数据库3.DJango链接数据库4.DJango操…

vue 部署到本机IIS 部署 SPA 应用

安装 URL Rewrite Works With: IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 URL Rewrite : The Official Microsoft IIS Site 目前电脑IIS是6版本的&#xff0c;以下的方法不太合适操作。目前用Nginx部署&#xff0c;够用了。 nginx配置参考&#xff1a; uni-app 前面项目&am…

2023年09月编程语言流行度排名

点击查看最新编程语言流行度排名&#xff08;每月更新&#xff09; 2023年09月编程语言流行度排名 编程语言流行度排名是通过分析在谷歌上搜索语言教程的频率而创建的 一门语言教程被搜索的次数越多&#xff0c;大家就会认为该语言越受欢迎。这是一个领先指标。原始数据来自…

无需麻烦验证,文字验证码一键通过

前言 文字验证码&#xff0c;简单易用&#xff0c;安全可靠&#xff01;不需要麻烦的图形识别。这种验证方式不仅方便快捷&#xff0c;而且能有效防止恶意攻击和机器人访问。无需担心复杂操作&#xff0c;只需几秒钟就能完成验证过程。保护您的个人信息和数据安全&#xff0c;…

QML与C++的交互操作

QML旨在通过C 代码轻松扩展。Qt QML模块中的类使QML对象能够从C 加载和操作&#xff0c;QML引擎与Qt元对象系统集成的本质使得C 功能可以直接从QML调用。这允许开发混合应用程序&#xff0c;这些应用程序是通过混合使用QML&#xff0c;JavaScript和C 代码实现的。除了从QML访问…

『SpringBoot 源码分析』run() 方法执行流程:(2)刷新应用上下文-准备阶段

『SpringBoot 源码分析』run() 方法执行流程&#xff1a;&#xff08;2&#xff09;刷新应用上下文-准备阶段 基于 2.2.9.RELEASE问题&#xff1a;当方法进行了注释标记之后&#xff0c;springboot 又是怎么注入到容器中并创建类呢&#xff1f; 首先创建测试主程序 package …

SpringBoot2.0(Spring读取配置文件常用方法,打war包在Tomcat中启动)

目录 一&#xff0c;SpringBoot中读取配置文件的常用方法1.1&#xff0c;使用Value读取1.2&#xff0c;使用ConfigurationProperties1.3&#xff0c;使用Environment1.4&#xff0c;自定义配置文件读取 二&#xff0c;SpringBoot部署war项目到tomcat9和启动原理 一&#xff0c;…

Day_13 > 指针进阶(2)

目录 1.函数指针数组 2.指向函数指针数组的指针 3.回调函数 qsort()函数 代码示例 void* 4.结束 今天我们在进阶指针的基础上&#xff0c;学习进阶指针的第二部分 1.函数指针数组 首先我们回顾一下指针数组 char* arr[5]://字符指针数组 - 数组 - 存放的是字符指针 in…

vagrant 虚拟机扩容磁盘

vagrant 虚拟机扩容磁盘 修改配置安装插件存储扩容 修改配置 参考博客:https://blog.csdn.net/marina_1/article/details/122238721 vagrant 版本 PS D:\vagrant\workplace\node2> vagrant --version Vagrant 2.3.7修改vagrant虚拟机配置文件Vagrantfile&#xff0c;添加磁…

【100天精通Python】Day56:Python 数据分析_Pandas数据清洗和处理(删除填充插值,数据类型转换,去重,连接与合并)

目录 数据清洗和处理 1.处理缺失值 1.1 删除缺失值&#xff1a; 1.2 填充缺失值&#xff1a; 1.3 插值&#xff1a; 2 数据类型转换 2.1 数据类型转换 2.2 日期和时间的转换&#xff1a; 2.3 分类数据的转换&#xff1a; 2.4 自定义数据类型的转换&#xff1a; 3 数…

【多线程】Timer任务定时器实现与盲等原子性问题的解决

目录 一、定时器 二、标准库中的Timer 三、代码实现 四、死锁 一、定时器 代码中的定时器通常是在一定的时间执行对应的代码逻辑 二、标准库中的Timer public static void main(String[] args){Timer timer new Timer();timer.schedule(new TimerTask() {Overridepublic…

2023国赛C题解题思路代码及图表:蔬菜类商品的自动定价与补货决策

2023国赛C题&#xff1a;蔬菜类商品的自动定价与补货决策 C题表面上看上去似乎很简单&#xff0c;实际上23题非常的难&#xff0c;编程难度非常的大&#xff0c;第二题它是一个典型的动态规划加仿真题目&#xff0c;我们首先要计算出销量与销售价格&#xff0c;批发价格之间的…

Text-to-SQL小白入门(四)指令进化大模型WizardLM

摘要 本文主要对大模型WizardLM的基本信息进行了简单介绍&#xff0c;展示了WizardLM取得的优秀性能&#xff0c;分析了论文的核心——指令进化方法。 论文概述 基本信息 英文标题&#xff1a;WizardLM: Empowering Large Language Models to Follow Complex Instructions中…

Linux下 /sys/class 一些操作

Linux下&#xff0c;/dev、/sys/class的区别 /dev下面有很多节点&#xff0c;每一个节点代表一个设备&#xff0c;/dev目录下面是按物理器件进行分类&#xff1b;而/sys/class下面的更多是按功能抽象出来的。 参考1 demo 在正点原子的基础上进行演示 #include <linux/ty…

【Spring面试】BeanFactory与IoC容器的加载

文章目录 Q1、BeanFactory的作用是什么&#xff1f;Q2、BeanDefinition的作用是什么&#xff1f;Q3、BeanFactory和ApplicationContext有什么区别&#xff1f;Q4、BeanFactory和FactoryBean有什么区别&#xff1f;Q5、说下Spring IoC容器的加载过程&#xff08;※&#xff09;Q…