vue3+vant自动导入+pina+vite+js+pnpm搭建项目框架

vue3+vant自动导入+pina+vite+js+pnpm搭建项目框架


文章目录

  • vue3+vant自动导入+pina+vite+js+pnpm搭建项目框架
    • 1. 安装pnpm(如果还没有安装):
    • 2. 创建项目目录并进入该目录:
    • 3. 初始化项目:
    • 4. 安装Vite作为构建工具:
    • 5. 创建Vite配置文件`vite.config.js`,并添加以下内容:
    • 6. 在`src`目录下创建`main.js`文件,添加以下内容:
    • 7. 创建`App.vue`文件,添加以下内容:
    • 8. 安装Vue 3:
    • 9. 安装Vant组件库:
    • 10. 安装Pina状态管理:
    • 11. 在`src`目录下创建`store.js`文件,添加以下内容:
    • 12. 在`main.js`文件中添加以下内容,以使用Pina状态管理:
    • 13. 安装其他依赖:
    • 14. gitee 地址:https://gitee.com/Beichenguren/vue3-h5

要搭建一个使用Vue 3、Vant组件库、Pina状态管理、Vite作为构建工具、JavaScript语言、pnpm作为包管理工具的项目框架,可以按照以下步骤进行操作:

1. 安装pnpm(如果还没有安装):

npm install -g pnpm

2. 创建项目目录并进入该目录:

mkdir my-project
cd my-project

3. 初始化项目:

pnpm init

这将生成一个package.json文件。

4. 安装Vite作为构建工具:

pnpm add -D vite

5. 创建Vite配置文件vite.config.js,并添加以下内容:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
import path from 'path'// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus  vant等
import Components from 'unplugin-vue-components/vite';// 注册 Vant 组件
import { VantResolver } from '@vant/auto-import-resolver';
// https://vitejs.dev/config/
export default defineConfig({base: './',// 指定输出路径 publicPath: './',// 指定输出路径build: {outDir: '../发布包/dist',// 指定输出路径cssCodeSplit: true,// 启用 CSS 代码拆分extract: true, // 是否使用css分离插件 ExtractTextPluginminify: 'terser', // 启用 terser 压缩 sourcemap: false, // 构建后是否生成 source map 文件 terserOptions: {compress: {drop_console: true, // 删除所有 consoledrop_debugger: true, // 删除 debugger  }}},resolve: {alias: {'@': path.resolve(__dirname, 'src')// @代替src}},plugins: [vue(),AutoImport({//安装两行后你会发现在组件中不用再导入ref,reactive等imports: ['vue', 'vue-router'],// 自动导入vue和vue-router相关函数//存放的位置dts: "src/auto-import.d.ts",// 生成位置}),Components({// 引入组件的,包括自定义组件// 存放的位置dts: "src/components.d.ts",// 生成位置// 全局注册 Vant 组件库resolvers: [VantResolver()],// 自动导入组件库}),{name: 'vite-plugin-babel',// 插件名称enforce: 'pre',// Vite 核心插件之前调用该插件},],server: {// host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址hot: true,// 保存文件时自动刷新strictPort: false,//通过server.strictPort控制端口冲突时是否自动刷新port: 8080, // 指定开发服务器端口open: true, // 启动时自动在浏览器中打开应用程序proxy: { // 配置自定义代理规则'/api': {target: 'http://jsonplaceholder.typicode.com',// 代理目标地址changeOrigin: true,// 是否需要代理跨域// rewrite: (path) => path.replace(/^\/api/, '')// 重写路径}},},
})

6. 在src目录下创建main.js文件,添加以下内容:

import { createApp } from 'vue'
// 1. 引入公共样式
import '@/styles/style.css'
import '@/styles/common.css'
// 2. 引入组件样式
import 'vant/lib/index.css';
//routes
import router from "@/router/index";
import Vconsole from "vconsole";
import pinia from '@/store/index'
import App from '@/App.vue'
// amfe-flexible会根据当前页面的尺寸去设置根元素的font-size
import 'amfe-flexible/index'const app = createApp(App)
//routes
app.use(router)
// pinia
app.use(pinia)// Vconsole
if (process.env.NODE_ENV !== 'production') {const vconsole = new Vconsole()window['vconsole'] = vconsole
}
router.beforeEach((to, _from, next) => {/* 路由发生变化修改页面title */if (to.meta.title) {document.title = to.meta.title;}next();
});app.mount('#app')

7. 创建App.vue文件,添加以下内容:

<template><div id="app"><router-view /></div>
</template><style scoped lang="less">
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size: 16px;color: #333;
}
</style>

8. 安装Vue 3:

pnpm add vue@next

9. 安装Vant组件库:

pnpm add vant@next

10. 安装Pina状态管理:

pnpm add pina@next

11. 在src目录下创建store.js文件,添加以下内容:

import { createStore } from 'pina';const store = createStore();export default store;

12. 在main.js文件中添加以下内容,以使用Pina状态管理:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';createApp(App).use(store).mount('#app');

13. 安装其他依赖:

pnpm install

至此,你已经搭建好了一个使用Vue 3、Vant组件库、Pina状态管理、Vite作为构建工具、JavaScript语言、pnpm作为包管理工具的项目框架。你可以根据自己的需求继续开发和配置项目。

14. gitee 地址:https://gitee.com/Beichenguren/vue3-h5

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

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

相关文章

双向链表C语言实现

List.h文件 #pragma once #include<stdio.h> #include<stdlib.h> #include<assert.h> //结构 typedef int LTDatatype; typedef struct ListNode {LTDatatype data;struct ListNode* next;struct ListNode* prev; }LTNode; //声明接口和方法 void LTInit(LT…

cron表达式使用手册

cron表达式 我们在使用定时调度任务的时候&#xff0c;最常用的就是cron表达式。通过cron表达式来指定任务在某个时间点或者周期性执行。 范围&#xff1a; 秒&#xff08;0-59&#xff09;&#xff08;可选&#xff09; 分&#xff08;0-59&#xff09; 时&#xff08;0-…

ansible的常见用法

目录 ##编辑hosts文件 ##copy模块##复制过去 ##fetch模块##拉取 ##shell模块 ##好用 ##command模块## ##file模块### ##cron模块### ##crontab 计划任务 ##下载好时间插件 ##script模块 ##yum模块## ##yum下载源配置文件 /etc/yum.repos.d/CentOS-Base.repo ##ser…

Linux 使用 ifconfig 报错:Failed to start LSB: Bring up/down networking

一、报错信息 在运行项目时报错数据库连接失败&#xff0c;我就想着检查一下虚拟机是不是 Mysql 服务忘了开&#xff0c;结果远程连接都连接不上虚拟机上的 Linux 了&#xff0c;想着查一下 IP 地址看看&#xff0c;一查就报错了&#xff0c;报错信息&#xff1a; Restarting…

LeetCode34:在排序数组中查找元素的第一个和最后一个位置(Java)

目录 题目&#xff1a; 题解&#xff1a; 方法一&#xff1a; 方法二&#xff1a; 题目&#xff1a; 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&…

QCustomPlot移植android后实现曲线放大缩小

一.问题 1.QCustomPlot在windows系统上可以支持鼠标左键按下平移拖动,滚轮放大缩小,矩形放大功能; 但是到了android触摸屏上无法识别鼠标滚轮事件,同时控件也不识别多点触控的放大缩小,这就导致想要实现放大缩小比较困难。 本文会给出两种解决方法。 二.QCustomPlot介绍…

Netty学习——高级篇2 Netty解码技术

接上篇&#xff1a;Netty学习——高级篇1 拆包 、粘包与编解码技术&#xff0c;本章继续介绍Netty的其他解码器 1 DelimiterBasedFrameDecoder分隔符解码器 DelimiterBasedFrameDecoder 分隔符解码器是按照指定分隔符进行解码的解码器&#xff0c;通过分隔符可以将二进制流拆分…

粘性定位应用

现象&#xff1a;当页面滑动到某个位置时&#xff0c;图片吸顶。 思路&#xff1a;创建一个father背景。包含内容和需要吸顶的背景图 当滚轮运动距离大于800px时&#xff0c;将吸顶图的position设置为sticky&#xff0c;距离顶部改为0px。 html代码&#xff1a; <!DOCTYPE …

基于PyTorch神经网络进行温度预测——基于jupyter实现

导入环境 import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim import warnings warnings.filterwarnings("ignore") %matplotlib inline读取文件 ### 读取数据文件 features pd.read_csv(temps.…

Linux第90步_异步通知实验

“异步通知”的核心就是信号&#xff0c;由“驱动设备”主动报告给“应用程序”的。 1、添加“EXTI3.c” #include "EXTI3.h" #include <linux/gpio.h> //使能gpio_request(),gpio_free(),gpio_direction_input(), //使能gpio_direction_output(),gpio_get_v…

Java基础-知识点2(面试|学习)

Java基础-知识点2 Java为什么是单继承的equals与的区别equals的等价关系 Java 访问修饰符publicprotecteddefaultprivate Final、Static、this、superFinalStaticthissuper 深拷贝、浅拷贝浅拷贝深拷贝 引用类型有哪些&#xff1f;Java 泛型泛型类&#xff08;Generic Class&am…

有序二叉树的增删改查(源代码讲解)

有序二叉树的相关实体类 TreeNode类 二叉树结点类&#xff0c;包含三个属性&#xff1a;value&#xff0c;leftChild&#xff0c;rightChild 有序二叉树类就包括这样一个根节点 剩下的getter和setter方法&#xff0c;有参无参构造&#xff0c;toString方法都是老生长谈&…

PySide6和PyQt5的show()不仅仅是展示这么简单

看一段代码&#xff1a; import sys from PySide6.QtWidgets import QApplication, QMainWindow, QFrameclass MainWindow(QMainWindow):def __init__(self):super().__init__()# 创建主窗口self.setWindowTitle("Main Window")self.setGeometry(100, 100, 800, 600…

使用Java中的Condition+ ReentrantLock进行高效地协调线程

Condition 是 Java 中用于更细粒度的线程同步控制的一个接口&#xff0c;与传统的内置锁监视器方法&#xff08;wait(), notify(), notifyAll()&#xff09;相比&#xff0c;它提供了更高级的功能&#xff0c;允许更加灵活的线程管理。它通常与显式锁&#xff08;如 ReentrantL…

使用simulink进行汽车软件建模的经验介绍

使用Simulink进行汽车软件建模的经验介绍可以从多个方面进行阐述。首先,Simulink提供了一个强大的平台,支持车辆模型的搭建和仿真,包括但不限于商用车整车模型、自动驾驶仿真框架的构建。这表明Simulink能够满足不同自动驾驶开发任务的需求,通过选择不同的车辆、传感器模型…

Redis入门到通关之Hash命令

文章目录 ⛄介绍⛄命令⛄RedisTemplate API❄️❄️添加缓存❄️❄️设置过期时间(单独设置)❄️❄️添加一个Map集合❄️❄️提取所有的小key❄️❄️提取所有的value值❄️❄️根据key提取value值❄️❄️获取所有的键值对集合❄️❄️删除❄️❄️判断Hash中是否含有该值 ⛄…

阐述嵌入式系统的基本组成:硬件层、驱动层、操作系统层和应用层

大家好&#xff0c;今天给大家介绍阐述嵌入式系统的基本组成&#xff1a;硬件层、驱动层、操作系统层和应用层&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 嵌入式系统是一种能…

Java集合(一)--Map(2)

ConcurrentHashMap与HashTable 底层实现 在JDK1.7时&#xff0c;底层采用的是分段数组&#xff0b;链表的形式&#xff0c;在JDK1.8之后&#xff0c;采用的是与HashMap相同的形式&#xff0c;数组链表/红黑树。而HashTable采用的是数组链表的形式。 如何实现线程安全 Concu…

DeblurGANv2-master文件组成

DeblurGANv2-master文件夹 **Config&#xff1a;**config.yaml是项目的配置文件&#xff1a;包括训练集的路径设置&#xff0c;验证集路径设置&#xff0c;对数据集内图片的处理&#xff0c;数据集增强等&#xff1b;backbone的选择&#xff0c;backbone冻结的轮数&#xff1b;…

如何访问远程服务器?

在现代技术时代&#xff0c;随着信息化的快速发展&#xff0c;远程访问服务器已经成为了不可或缺的一种需求。无论是企业还是个人用户&#xff0c;都需要通过远程访问来管理、传输和获取数据。本文将介绍一种名为【天联】的工具&#xff0c;它能够通过私有通道进行远程服务器访…