vite+vue3快速构建项目+router、vuex、scss安装

news2024/9/23 13:27:30

安装 Vite

npm install -g create-vite-app

创建vue3项目

npm init vite@latest

在这里插入图片描述
npm i安装依赖

安装veux、router

npm install vue-router vuex

新建router/index.js(自己创建home、login对应页面文件)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/home/home.vue'

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')
    }
]

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

export default router

新建store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

在当前文件中如果有报错Vue无法找到模块vuex,在tsconfig.app.json文件中,添加如下配置:

"compilerOptions": {
    "paths": {
        "vuex": ["./node_modules/vuex/types"]
    },
}

在main.ts下引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(store).use(router)
app.mount('#app')

修改app.vue

<template>
    <router-view />
</template>

最后重新运行npm run dev

安装scss

npm i sass sass-loader --save-dev

最后npm run dev运行项目

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

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

相关文章

针对SVM算法初步研究

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;心态决定高度&#xff0c;细节决定成败…

Linux系统:mkdir命令

1、命令详解&#xff1a; mkdir命令是用来创建目录的&#xff0c;是make directory的缩写。 2、语法&#xff1a; mkdir [选项] 目录名 3、官方参数&#xff1a; 选项&#xff1a;-m, --modeMODE 设置新创建目录或文件的权限模式-p, --parents 创建多级目…

SEO之页面优化(一-页面标题)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、“新手上云”能够为你开启探索云世界的第一步 博客&#xff1a;阿幸SEO~探索搜索排名之道 现在讨论页面本身可以优化…

基于zabbix实现监控Jenkins过程---超详细

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…

【Lua学习】Lua最最基础的

Lua是什么&#xff1f; Lua是一种强大、高效、轻量级、可嵌入的脚本语言。它支持过程式编程、面向对象编程、函数式编程、数据驱动编程和数据描述。 Lua将简单的过程式语法与基于关联数组和可扩展语义的强大数据描述构造相结合。Lua是动态类型的&#xff0c;通过基于寄存器的虚…

C++ IO流全解析:标准库中的数据处理与文件读写艺术

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;C从入门到精通 目录 一&#xff1a; &#x1f525; C语言的输入与输出 二&#xff1a; &#x1f525; 流是什么 三&#xff1a; &#x1f525; CIO流&#x1f680; 3.1 C标准IO流&#x1f680; ist…

<<编码>> 第 10 章 逻辑与开关(Logic and Switches) 示例电路

串联电路 info::操作说明 鼠标单击开关切换开合状态 需要两个开关同时闭合才能接通电路 primary::在线交互操作链接 https://cc.xiaogd.net/?startCircuitLinkhttps://book.xiaogd.net/code-hlchs-examples/assets/circuit/code-hlchs-ch10-01-series-circuit.txt 并联电路 in…

windows下 MySQL8.4.2 LTS 解压版的安装使用

目录 一、下载二、解压三、创建 my.ini 文件四、安装 一、下载 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 二、解压 将下载包解压到 D 盘&#xff1a; 三、创建 my.ini 文件 D:\mysql-8.4.2-winx64 目录下创建 my.ini 文件&#xff1a; [mysql] # …

前端Vue框架实现html页面输出pdf(html2canvas,jspdf)

代码demo&#xff1a; <template><el-dialog class"storageExportDialog" :fullscreen"true" title"" :visible.sync"visible" v-if"visible" width"600px"><div id"exportContainer" …

第二期: 第一节 环境的搭建

1 找一个虚拟机。 下载工具链&#xff0c; 源码。 可以看到这个压缩包里&#xff0c;有 uboot kernel 工具链 &#xff0c;都有了。 将工具链 拷贝到 /usr/local/arm 目录下。 更改 .bashrc 2 先编译一遍&#xff0c;确定环境没问题。 压缩包里 有一个 uboot , kernle 一起…

unity3d入门教程二

unity3d入门教程二 5.1游戏对象5.2对象的显示顺序5.3对象的轴心5.4对象的父子关系6.1图片素材的准备6.2图片的切割6.3图片与渲染器7.1组件7.2transform组件 5.1游戏对象 游戏制作是在编辑器中进行的 游戏脚本是进行控制对象移动的 5.2对象的显示顺序 方法1&#xff1a;调整 Or…

【重学 MySQL】二十五、等值连接vs非等值连接、自连接vs非自连接

【重学 MySQL】二十五、等值连接vs非等值连接、自连接vs非自连接 等值连接&#xff08;Equijoin&#xff09; vs 非等值连接&#xff08;Non-equijoin&#xff09;等值连接&#xff08;Equijoin&#xff09;非等值连接&#xff08;Non-equijoin&#xff09; 自连接&#xff08;…

常见的ROM(只读存储器)及其区别(超详细)

目录 1. 掩模 ROM (Mask ROM) 2. 可编程 ROM (Programmable ROM, PROM) 3. 可擦写可编程 ROM (Erasable Programmable ROM, EPROM) 4. 电可擦写可编程 ROM (Electrically Erasable Programmable ROM, EEPROM) 5. 闪存 (Flash Memory) 6. NVRAM (Non-Volatile RAM) 各类 ROM 的主…

CTF—杂项题目

1.ctfshow-Misc入门-misc17 1 用010editer打开图片后没有直接搜到ctf&#xff1b; 2 用binwalk分析文件发现有一个bzip2的隐藏文件并将其分离&#xff1b; 3 得到一个压缩文件D86.bz2&#xff1b; 4 但使用解压命令进行解压时&#xff0c;显示文件受损&#xff1b; 5 参考别人…

gbase8s之onlog相关文章

原因&#xff1a;总是在工作中会遇到抬杠的研发说insert没入库&#xff0c;特此写一篇onlog相关的文章 语法如下&#xff1a; onlog -l -d /data2/logbackup/gbase-0003_0_Log0000002093 --获取普通表的partnum: select ltrim(lower(hex(partnum)),0x) partnum from systabl…

数模方法论-整数规划

一、基本概念 整数规划是一种特殊的线性规划&#xff0c;其中某些或所有决策变量必须是整数。线性规划的概念可以阅读下面文章&#xff1a; 数模方法论-线性规划-CSDN博客https://blog.csdn.net/qq_41489047/article/details/142134282 这种方法用于解决那些要求解变…

[数据集][目标检测]高铁受电弓检测数据集VOC+YOLO格式1245张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;1245 标注数量(xml文件个数)&#xff1a;1245 标注数量(txt文件个数)&#xff1a;1245 标注…

YoloV10改进策略:上采样改进|动态上采样|轻量高效,即插即用(适用于分类、分割、检测等多种场景)

摘要 本文使用动态上采样改进YoloV10&#xff0c;动态上采样是今天最新的上采样改进方法&#xff0c;具有轻量高效的特点&#xff0c;经过验证&#xff0c;在多个场景上均有大幅度的涨点&#xff0c;而且改进方法简单&#xff0c;即插即用&#xff01; 论文&#xff1a;《DySa…

【第30章】Spring Cloud之Sentinel动态规则扩展

文章目录 前言一、规则管理及推送二、DataSource 扩展1. 引入依赖2. 规则文件3. 定义数据源信息 三、服务定义和测试1. 服务定义2. 并发测试3. 控制台查看规则 总结 前言 之前我们定义的流控和熔断规则应用每次重启之后就丢失了&#xff0c;是因为在控制定义规则这些规则仅在内…

Dotnet Publish 报错 - the process cannot access the file

Dotnet Publish 报错 - the process cannot access the file 问题描述&#xff1a; 我在使用自动化部署工具 Jenkins 时&#xff0c;遇到需要使用 dotnet publish 命令来发布.net core 项目时&#xff0c;报错了&#xff1a; The process cannot access the file because it …