Vue3+TS+Vite创建项目,并导入Element-plus和Sass

news2024/10/6 19:19:33

一、vue3创建项目

1.桌面新建一个文件夹Vue3-app
打开编辑器导入文件夹,编辑器打开终端输入或者命令行工具cd到项目目录下输入
npm init vue@latest 回车运行
在这里插入图片描述
这里我选择了TS+Vite来开发,并选择安装路由

2.cd到 vue-project目录下 输入
npm install 回车运行

3.安装完成后 输入
npm run dev 回车运行
浏览器打开localhost即可看到页面
在这里插入图片描述

二、安装element-plus

在vue-project文件终端下输入
npm install element-plus --save 运行
完成后可以在package.json里面可以看到已经安装成功
在这里插入图片描述
这里使用全局导入 在main.ts里面配置(如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。如果使用按需导入参考element-plus官方文档)

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

引入按钮组件,已经生效
在这里插入图片描述
在这里插入图片描述

三、安装sass sass-loader

终端下输入
npm install -D sass-loader sass 运行 成功后看到
在这里插入图片描述
在项目生成的about页面使用看效果
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

路径规划算法:基于晶体结构优化的路径规划算法- 附代码

路径规划算法:基于晶体结构优化的路径规划算法- 附代码 文章目录 路径规划算法:基于晶体结构优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要:本文主要介绍利用智能优化…

基于高斯混合模型聚类的风电场短期功率预测方法(Pythonmatlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

MySQL 学习笔记 1:存储过程

MySQL 学习笔记 1:存储过程 图源:ubiq.co 存储过程可以看做是将一组 SQL打包执行,并返回最终的执行结果。 其优点是:因为存储过程中的 SQL 是同时一次执行,所以没有数据一致性的问题。其次,不需要由客户端…

【Docker】Centos安装docker-compose

下载 直接从GitHub下载docker到本地的/usr/local/bin/目录下,赋予读写权限,检查,就可以使用了; # 下载到/usr/local/bin/docker-compose目录下 sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1…

实现死锁检测组件

文章目录 一、死锁1.1 死锁的定义1.2 死锁产生的条件 二、死锁检测2.1 资源分配图2.2 有向图2.3 死锁检测组件 -- hook 三、死锁设计3.1 有向图3.1.1 数据结构3.1.2 图的基本操作接口3.1.3 判断有向图是否成环 3.2 hook3.2.1 重载系统的锁接口3.2.2 加锁前——lock_before3.2.3…

DevExpress开发练习-皮肤选择

安装devexpress支持&#xff1a; DevExpress 21.2.6 默认状态设置为最大化。 设置ribbon属性&#xff1a; /// <summary> /// 设置Ribbon属性 /// </summary> /// <param name"ribbon"></param> private void SetRibbon(RibbonControl ri…

react-flow基础使用及dagre库的使用

前言 最近项目中需要用到拓扑图的展示&#xff0c;最开始选用的是antv的拓扑图组件。antv组件虽然此很方便&#xff0c;但是在布局的时候总是会有莫名其妙的bug&#xff0c;然后自己也想法去解决&#xff08;看前辈经验、官方issue&#xff09;&#xff0c;最后还是不能解决。…

【安卓12源码】WMS的作用及其启动流程

一、WMS 的作用 WMS 在 Android 系统的地位&#xff0c;它作为中间层&#xff0c;连接了上层的 View 框架和下层的 SurfaceFingler。 WMS 主要职责 窗口管理&#xff1a;负责启动、添加、删除窗口&#xff0c;管理窗口大小、层级&#xff0c;核心成员有&#xff1a;WindowCont…

短视频矩阵系统源码开发规则

抖音seo源码部署&#xff08;前端vue jquery layui 后端php&#xff09;组成 抖音SEO源码开发规则是为了提高抖音内容在搜索引擎的排名&#xff0c;增加曝光和流量而制定的一系列准则。 这些开发规则包括但不限于以下几点&#xff1a; 首先&#xff0c;优化关键词&#xff…

Mac OS 源码编译安装Nginx

下载软件 访问地址&#xff1a; https://nginx.org 根据自己的需求下载合适的安装包 首先建个临时目录 nginx-src 并下载所需软件的源码进行配置 mkdir nginx-src cd nginx-src wget https://nginx.org/download/nginx-1.18.0.tar.gz wget https://ftp.pcre.org/pub/p…

前端框架Layui的使用讲解(Layui搭建登录注册页面)

目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面&#xff08;公用页面&#xff09; jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭…

DevOps(一)

DevOps 1. DevOps起源1.1 瀑布开发模型1.2 敏捷开发模型 2. DevOps到底是什么&#xff1f;3. DevOps与虚拟化、容器、微服务4. CI/CD是什么 &#xff1f;4.1 CI 持续集成&#xff08;Continuous Integration&#xff09;4.2 CD 持续交付&#xff08;Continuous Delivery&#x…

JAVA基础方法-substring+indexof

substring用法&#xff1a; 1.public String substring(int beginIndex, int endIndex) 第一个参数int为开始的索引&#xff0c;对应String数字中的开始位置&#xff0c; 第二个参数是截止的索引位置&#xff0c;对应String中的结束位置。 public static void main(String[]…

react中styled-components 全局样式设置

前言 使用 styled-components 库时&#xff0c;你可以使用它的 createGlobalStyle 函数来设置全局样式。下面是一个示例&#xff1a; 安装 styled-components npm install styled-components导入 createGlobalStyle 在你的代码文件中导入 createGlobalStyle&#xff1a; i…

信息安全-应用安全-软件成分安全分析(SCA)能力的建设与演进

1. 前言 SCA 概念出现其实很久了。简单来说&#xff0c;就是针对现有的软件系统生成粒度非常细的 SBOM&#xff08;Software Bill of Materials 软件物料单&#xff09;清单&#xff0c;然后通过⻛险数据去匹配有没有存在⻛险组件被引用。目前&#xff0c;市面上比较出色的商业…

laravel6.x文档阅读手册

laravel中文文档6.x 目录 一、入门指南 安装 服务器要求 安装 Laravel Laravel 使用 Composer 来管理项目依赖。因此&#xff0c;在使用 Laravel 之前&#xff0c;请确保你的机器已经安装了 Composer。 通过 Laravel 安装器 首先&#xff0c;通过使用 Composer 安装 Lara…

Django_加载settings配置

当使用下面命令启动django服务时&#xff0c;setting会自动加载 python manage.py runserver 通过查看manage.py可以找到加载代码为 os.environ.setdefault(DJANGO_SETTINGS_MODULE, settings的路径id) 知道settings加载原理后&#xff0c;在调试时可以不用启动http服务&…

如何用 Jenkins+Docker 实现一键自动化部署

本文章实现最简单全面的Jenkinsdockerspringboot 一键自动部署项目&#xff0c;步骤齐全&#xff0c;少走坑路。 环境&#xff1a;centos7git(gitee) 简述实现步骤&#xff1a;在docker安装jenkins&#xff0c;配置jenkins基本信息&#xff0c;利用Dockerfile和shell脚本实现…

滴...这里有一道数据库操作型面试题,已到达,请查收~

系列文章传送门&#xff1a; 【七天入门数据库】第一天 MySQL的安装部署 【七天入门数据库】第二天 数据库理论基础 【七天入门数据库】第三天 MySQL的库表操作 题目&#xff1a;单表查询&#xff0c;根据提供的素材&#xff0c;按下列要求查询相关数据。 题目素材&#x…

前端vue入门(纯代码)27_路由的query参数

安静地努力&#xff01;&#xff01;&#xff01; 【25.Vue Router--路由的query参数】 多级路由在src/router/index.js中【三级路由】的配置如下&#xff1a; // 该文件专门用于创建整个应用的路由器 import VueRouter from "vue-router"; //引入组件 import Abo…