使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 项目

news2024/12/24 2:24:39

使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 项目

  • 使用Vite搭建
  • 配置Router
  • 配置 Element-Plus
  • 配置sass
  • 配置Pinia
  • 配置解析 @ 符号，并找到对应的路径
  • TypeScript忽略类型检查

使用Vite搭建

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

首先 npm 输入：

npm create vite@latest

在这里插入图片描述
Project name：项目名称
Select a framework：选择一个框架
Select a variant：选择 ts 或者 js

输入项目名称后选择 vue 选择 ts 后 cd 进入目录 npm install 安装依赖后，npm run dev 运行。
在这里插入图片描述
项目目录

在这里插入图片描述
与webpack搭建的是有些区别的，首先多了ts的配置文件，以及vite的配置文件vite.config.ts,还有vite呢拥有更好的打包编译性能。

在这里插入图片描述

这块可以看下使用webpack和vite搭建的区别

在这里插入图片描述
在这里插入图片描述

使用Vite创建的项目是没有配置Vuex（或者用Pinia）、VueRouter、Sass的，需要我们手动配置，我们可以看下package.json文件只有vite 、vue、ts等依赖。

在这里插入图片描述

配置Router

1、 首先，安装 Vue Router：

npm install vue-router@next

2、 在项目的根目录下创建一个新的目录，比如 src/router。

3、 在 src/router 目录下创建一个新的文件，比如 index.ts，并在其中配置路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
  {
    path:'/',
    name: 'index',
    component: () => import('../views/index.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

4、 在 src/main.ts 中导入并使用路由：

import { createApp } from 'vue'
import router from './router';
import './style.css'
import App from './App.vue'

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

这样就成功配置了 Vue Router，并创建了一个简单的路由。

配置 Element-Plus

Element-Plus

首先安装依赖：

npm install element-plus --save

在main.ts中引入element-plus

import { createApp } from 'vue'
import router from './router';
import ElementPlus from 'element-plus' // element-plus
import 'element-plus/dist/index.css' // element-plus
import './style.css'
import App from './App.vue'

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

配置sass

首先安装依赖：

npm install sass sass-loader

使用

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

配置Pinia

Pinia 与 Vuex 的比较
Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它 取而代之的是新的建议。
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

1、首先安装依赖

npm install pinia

2、在项目的根目录下创建一个新的目录，比如 src/store。

3、在 src/store 目录下创建一个新的文件，比如 index.ts，用于配置和创建 Pinia

import { defineStore } from 'pinia';

// 创建 Pinia Store
export const dataStore = defineStore('dataStore', {
  state: () => {
    return {
        msg: 'hello pinia'
    }
  },
});

4、在 src/main.ts 中导入并使用 Pinia：

import { createApp } from 'vue'
import router from './router';
import { createPinia } from 'pinia' // pinia
const pinia = createPinia() // pinia
import ElementPlus from 'element-plus' // element-plus
import 'element-plus/dist/index.css' // element-plus
import './style.css'
import App from './App.vue'

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

5、在Vue 组件中，可以使用 dataStore 函数来访问和操作 Pinia Store。

<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg)
</script>

在这里插入图片描述
6、访问state

在组件中首先引入：

import {dataStore} from './store'
let store = dataStore()

store.变量名的形式访问

7、访问getters
getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore() 中的 getters 属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用：

import { defineStore } from 'pinia';

// 创建 Pinia Store
export const dataStore = defineStore('dataStore', {
  state: () => {
    return {
        msg: 'hello pinia',
        num: 0
    }
  },
  getters:{
    addNum():number{
      return this.num+10
    }
  }
});

<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg) // 访问store中state变量
console.log(store.addNum) // 访问store中getters计算属性
</script>

在这里插入图片描述
8、getters如何传值？
getters 只是幕后的 computed 属性，因此无法向它们传递任何参数。 但是，可以从 getter 返回一个函数以接受任何参数：

import { defineStore } from 'pinia';

// 创建 Pinia Store
export const dataStore = defineStore('dataStore', {
  state: () => {
    return {
        msg: 'hello pinia',
        num: 0
    }
  },
  getters:{
    addNum():number{
      return this.num+10
    },
    addNum2(){
      return (number:number) => this.num + number
    }
  }
});

<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg) // 访问store中state变量
console.log(store.addNum) // 访问store中getters计算属性
console.log(store.addNum2(100)) // 访问store中getters计算属性并传值
</script>

在这里插入图片描述

9、Actions
相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：

import { defineStore } from 'pinia';

// 创建 Pinia Store
export const dataStore = defineStore('dataStore', {
  state: () => {
    return {
        msg: 'hello pinia',
        num: 0
    }
  },
  getters:{
    addNum():number{
      return this.num+10
    },
    addNum2(){
      return (number:number) => this.num + number
    }
  },
  actions:{
    actionFun(){
      console.log("我是store中actions的方法")
    }
  }
});

<script setup lang="ts">
import {dataStore} from './store'
let store = dataStore()
console.log(store.msg) // 访问store中state变量
console.log(store.addNum) // 访问store中getters计算属性
console.log(store.addNum2(100)) // 访问store中getters计算属性并传值
store.actionFun() // 调用store中actions的方法
</script>

在这里插入图片描述

配置解析 @ 符号，并找到对应的路径

在tsconfig.json中配置如下：

在这里插入图片描述

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* 配置解析 @ 符号，并找到对应的路径 */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

在vite.config.ts配置如下：

在这里插入图片描述

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置解析 @ 符号，并找到对应的路径
  resolve: {
    alias: {
      '@': '/src',
    },
  }
})

TypeScript忽略类型检查

单行忽略(添加到忽略得哪行代码的前一行)

// @ts-ignore

跳过对某些文件的检查 (添加到该文件的首行)

// @ts-nocheck

对某些文件的检查(添加到要检查文件的前一行)

// @ts-check

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

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

相关文章

chatgpt赋能python：Python指定小数点位数的完整指南

chatgpt赋能python：Python指定小数点位数的完整指南

Python指定小数点位数的完整指南 Python是一种高级编程语言&#xff0c;广泛用于科学、统计和数学计算。在许多情况下&#xff0c;我们需要对浮点数进行更精确的计算。Python 中保留小数位数的能力很强&#xff0c;本文将向您介绍如何在 Python 中指定小数点后的位数。 为什么…
阅读更多...
购买服务器/安装宝塔

购买服务器/安装宝塔

1、服务器的选择 本人知道并了解一丢丢的就这四个平台&#xff1a; 1、阿里云 2、腾讯云 3、硅云 4、亚马逊 个人觉得阿里云是YYDS&#xff0c;啥都挺方便的&#xff0c;唯一不足就是有点小贵&#xff0c;但是新用户第一次购买还是很优惠的。 腾讯云有的云服务器是真的便宜&am…
阅读更多...
【Batch_size 与 梯度 之间的关系】

【Batch_size 与 梯度 之间的关系】

chatGPT 回答 梯度更新与批大小&#xff08;batch size&#xff09;之间有密切的关系。批大小是指在训练过程中一次迭代所使用的样本数量。 在深度学习中&#xff0c;梯度下降是一种常用的优化算法&#xff0c;用于更新模型参数以最小化损失函数。梯度是损失函数对于模型参数…
阅读更多...
Gradio Flagging模块解析与实践

Gradio Flagging模块解析与实践

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…
阅读更多...
基于html+css的图展示135

基于html+css的图展示135

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…
阅读更多...
大数据大作业（课程设计）

大数据大作业（课程设计）

题目&#xff1a;信息爬取字数统计及可视化 内容及要求&#xff1a; 配置Hadoop平台&#xff1b;利用爬虫技术爬取任一门户网站新闻栏目一定时间段内的新闻信息&#xff0c;保存为一个或多个文件并上传到Hadoop平台以本人学号命名的文件夹下&#xff1b;利用MapReduce框架编程完…
阅读更多...
CSS3-显示模式

CSS3-显示模式

显示模式 1 块级显示 2 行内显示 3 行内块显示 4 元素显示模式转换 5 拓展 1 块级显示 属性&#xff1a;display:block 显示特点&#xff1a; 1 独占一行&#xff08;一行只能显示一个&#xff09; 2 宽度默认是父元素的宽度&#xff0c;高度默认由内容撑开 3 可以设置宽高 代表…
阅读更多...
Cortext-M3系统：异常系统（5）

Cortext-M3系统：异常系统（5）

1、使用中断 在CM3中&#xff0c;NVIC为我们搞定了使用中断时的很多例行任务&#xff0c;如优先级检查、入栈/出栈、取向量等。不过在NVIC能行使职能之前&#xff0c;还需要我们做好如下的初始化工作&#xff1a;建立堆栈、建立向量表、分配各中断的优先级、使能中断。 1.1 建…
阅读更多...
node笔记_读取目录的文件

node笔记_读取目录的文件

文章目录 ⭐前言⭐fs.readdirSync&#x1f496; 读取目录 不加withFileTypes&#x1f496; 读取目录 加withFileTypes&#x1f496; 读取目录时 判断元素文件还是目录 ⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享关于node读取目录文件 往期文章 node_wind…
阅读更多...
【java】Jconsole 开启远程连接遇到的一些坑

【java】Jconsole 开启远程连接遇到的一些坑

文章目录 背景一、JMX二、配置远程连接2.1、Java 程序启动2.2、tomcat 启动2.3、无法远程问题排查2.4、解决方案 三、关闭 tomcat 报错3.1、问题分析3.2、问题解决 总结 背景 最近在学习 JVM&#xff0c;其中涉及到性能、内存等指标分析需要使用工具分享&#xff0c;Java 提供…
阅读更多...
dvwa靶场通关（六）

dvwa靶场通关（六）

第六关&#xff1a;Insecure CAPTCHA&#xff08;不安全的验证码&#xff09; 不安全的验证码&#xff1f;不是这个意思&#xff0c;而是指验证码验证可以被绕过。怎么绕&#xff1f;一般都是验证码的验证和最终修改的验证分离&#xff0c;导致了中间过程&#xff08;验证码的…
阅读更多...
io.netty学习（八）零拷贝原理

io.netty学习（八）零拷贝原理

目录 零拷贝 传统I/O操作存在的性能问题 零拷贝技术原理 虚拟内存 mmap/write 方式 sendfile 方式 带有 scatter/gather 的 sendfile方式 splice 方式 总结 io.netty学习使用汇总 零拷贝 零拷贝&#xff08;Zero-Copy&#xff09;是一种 I/O 操作优化技术&#xff0c…
阅读更多...
总结906

总结906

学习目标&#xff1a; 月目标&#xff1a;6月&#xff08;线性代数强化9讲&#xff0c;背诵15篇短文&#xff0c;考研核心词过三遍&#xff09; 周目标&#xff1a;线性代数强化3讲&#xff0c;英语背3篇文章并回诵&#xff0c;检测 每日规划 今日已做&#xff1a; 1.回环背诵…
阅读更多...
chatgpt赋能python：Python捕捉按键：探索基础和应用

chatgpt赋能python：Python捕捉按键：探索基础和应用

Python捕捉按键&#xff1a;探索基础和应用 Python作为高级编程语言&#xff0c;可以用于各种任务&#xff0c;例如数据分析、机器学习、图形用户界面等等。其中&#xff0c;捕捉用户键盘输入是一个常见的任务&#xff0c;它可以用于实现简单的游戏、命令行应用和用户交互&…
阅读更多...
Redis持久化说明及其单台Linux服务器搭建Redis集群架构

Redis持久化说明及其单台Linux服务器搭建Redis集群架构

一.Redis持久化方式 1.1 RDB快照 说明&#xff1a;RDB快照主要以二进制文件的形式进行存储数据&#xff0c;主要以文件名dump.rdb进行存储&#xff0c;主要设置redis.conf里面设置’save 60 1000’命令可以开启&#xff0c; 表示在60秒内操作1000次进行一次备份数据。在客户端…
阅读更多...
《网络安全0-100》网络安全工具

《网络安全0-100》网络安全工具

网络安全工具 抓包工具 抓包工具是网络安全领域中常用的一种工具&#xff0c;用于捕获和分析网络数据包&#xff0c;帮助用户了解网络流量、发现网络攻击和漏洞等问题。以下是几个常用的抓包工具&#xff1a; Wireshark&#xff1a;Wireshark是一种开放源代码的网络协议分析工…
阅读更多...
软考A计划-系统集成项目管理工程师-信息化知识(五)

软考A计划-系统集成项目管理工程师-信息化知识(五)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…
阅读更多...
Unity核心6——Animation

Unity核心6——Animation

一、动画窗口 ​ 通过 Window --> Animation --> Animation 打开 Animation 窗口 ​ Animation窗口主要用于在 Unity 内部创建和修改动画&#xff0c;所有在场景中的对象都可以通过 Animation 窗口为其制作动画 ​ 原理&#xff1a; ​ 制作动画时&#xff1a;记录在…
阅读更多...
chatgpt赋能python：Python提供的68个内置函数：一个全面的指南

chatgpt赋能python：Python提供的68个内置函数：一个全面的指南

Python提供的68个内置函数&#xff1a;一个全面的指南 Python是一种强大的编程语言&#xff0c;具有出色的生态系统和强大的功能。它提供了许多内置函数&#xff0c;这些函数可以使你的编程任务变得更加容易和高效。本篇文章将介绍Python提供的68个内置函数&#xff0c;帮助你…
阅读更多...
chatgpt赋能python：Python排版快捷键：提高效率的必备技能

chatgpt赋能python：Python排版快捷键：提高效率的必备技能

Python排版快捷键&#xff1a;提高效率的必备技能 随着Python编程语言的广泛应用&#xff0c;作为开发者&#xff0c;我们不仅需要注重代码质量&#xff0c;还需要注重代码的可读性。在编写Python代码时&#xff0c;排版也是一项重要的任务。好的排版不仅使代码更易于理解&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023