【vue】项目基础环境搭建、css样式重置与公用

nodejs环境

nodejs是当下前端工程化开发必不可少的环境, 使用 nodejs的 npm功能来管理依赖包

查看node 和 npm的版本

 node -v #查看node版本npm  -v #查看npm版本

git版本控制

git版本控制工具是目前最为流行的分布式版本管理工具,代码的**提交, 检出, 日志**, 都需要通过git完成
git --version #查看git安装版本

npm淘宝镜像

npm是非常重要的npm管理工具,由于npm的服务器位于国外, 所以一般建议 将 npm设置成国内的淘宝镜像
 npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址npm config get registry  #查看镜像地址

vscode编辑器

vscode编辑器插件 + vetur + eslint
  • 除此之外, eslint需要在vscode中进行一些参数的配置

{ "eslint.enable": true,"eslint.run": "onType","eslint.options": {"extensions": [".js",".vue",".jsx",".tsx"]},"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}

 

重置样式(normalize.css)

一般浏览器必须将一些最低样式应用于元素,也就是说每个浏览器对初级元素,都有自己设置的初始化样式,而normalize就是可以对不同浏览器的样式进行规范化,删除了浏览器的不一致性,保留了一组优化后 可以依赖的基本样式,在默认的HTML元素样式上提供了跨浏览器的高度一致性

执行 npm i normalize.css 安装重置样式的包

在 main.js 导入 normalize.css 即可

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'+import 'normalize.css'createApp(App).use(store).use(router).mount('#app')

公用样式(common.less)

// 重置样式
* {box-sizing: border-box;}html {height: 100%;font-size: 14px;}body {height: 100%;color: #333;min-width: 1240px;font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif}ul,h1,h3,h4,p,dl,dd {padding: 0;margin: 0;}a {text-decoration: none;color: #333;outline: none;}i {font-style: normal;}input[type="text"],input[type="search"],input[type="password"], input[type="checkbox"]{padding: 0;outline: none;border: none;-webkit-appearance: none;&::placeholder{color: #ccc;}}img {max-width: 100%;max-height: 100%;vertical-align: middle;}ul {list-style: none;}#app {background: #f5f5f5;user-select: none;}.container {width: 1240px;margin: 0 auto;position: relative;}.ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.ellipsis-2 {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}.fl {float: left;}.fr {float: right;}.clearfix:after {content: ".";display: block;visibility: hidden;height: 0;line-height: 0;clear: both;}

在main.js中引用就行

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import 'normalize.css'
+import '@/assets/styles/common.less'createApp(App).use(store).use(router).mount('#app')

 

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

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

相关文章

Matplotlib数据可视化(二)

目录 1.rc参数设置 1.1 lines.linestype取值 1.2 lines.marker参数的取值 1.3 绘图中文预设 1.4 示例 1.4.1 示例1 1.4.2 示例2 1.rc参数设置 利用matplotlib绘图时为了让绘制出的图形更加好看,需要对参数进行设置rc参数设置。可以通过以下代码查看matplotli…

C++11并发与多线程笔记(8) condition_variable、wait、notify_one、notify_all

C11并发与多线程笔记(8) condition_variable、wait、notify_one、notify_all 1、条件变量condition_variable、wait、notify_one、notify_all1.1 std::condition_variable1.2 wait()1.3 notify_one()1.4 notify_all() 2、深入思考 1、条件变量condition_…

JS内存泄漏

JS内存泄漏 1.意外的全局变量 全局变量的生命周期很长,直到页面关闭,它都存活,所以全局变量上的内存一直都不会被回收 当全局变量使用不当,没有及时回收(手动赋值null),或者拼写错误等将某个变…

[Machine Learning] decision tree 决策树

(为了节约时间,后面关于机器学习和有关内容哦就是用中文进行书写了,如果有需要的话,我在目前手头项目交工以后,用英文重写一遍) (祝,本文同时用于比赛学习笔记和机器学习基础课程&a…

【算法学习】两数之和II - 输入有序数组

题目描述 原题链接 给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 < index1 < …

Springboot MultipartFile文件上传与下载

yml文件配置是否可以上传及上传附件大小 servlet:multipart:# 允许文件上传enabled: true# 单个文件大小max-file-size: 20MB# 设置总上传的文件大小max-request-size: 50MB /*** param files* param request* Description 上传文件* Throws* Return java.util.List* Date 202…

南大通用数据库(Gbase 8s) 创建UDR外部函数

一、在使用 date_format、from_unixtime、to_days、yearweek 函数时&#xff0c;Gbase 8s 数据库不支持&#xff0c;可以使用创建 UDR 外部函数来实现 二、登录命令控制台或者使用 navicat 连接 Gbase 数据库 这里使用 navicat &#xff0c;点击新增连接选择 PostGreSql 驱动…

动手学深度学习—卷积神经网络LeNet(代码详解)

1. LeNet LeNet由两个部分组成&#xff1a; 卷积编码器&#xff1a;由两个卷积层组成&#xff1b;全连接层密集块&#xff1a;由三个全连接层组成。 每个卷积块中的基本单元是一个卷积层、一个sigmoid激活函数和平均汇聚层&#xff1b;每个卷积层使用55卷积核和一个sigmoid激…

LeetCode--HOT100题(35)

目录 题目描述&#xff1a;23. 合并 K 个升序链表&#xff08;困难&#xff09;题目接口解题思路1代码解题思路2代码 PS: 题目描述&#xff1a;23. 合并 K 个升序链表&#xff08;困难&#xff09; 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合…

UDP 的报文结构以及注意事项

UDP协议 1.UDP协议端格式 1.图中的16位UDP长度,表示整个数据报(UDP首部UDP数据)的最大长度 2.若校验和出错,会直接丢弃 2.UDP的报文结构 UDP报文主体分为两个部分:UDP报头(占8个字节)UDP载荷/UDP数据 1.源端口号 16位,2个字节 2.目的端口号 16位,2个字节 3.包长度 指示了…

sd-webui安装comfyui扩展

文章目录 导读ComfyUI 环境安装1. 安装相关组件2. 启动sd-webui3. 访问sd-webui 错误信息以及解决办法 导读 这篇文章主要给大家介绍如何在sd-webui中来安装ComfyUI插件 ComfyUI ComfyUI是一个基于节点流程式的stable diffusion的绘图工具&#xff0c;它集成了stable diffus…

两个list如何根据一个list中的属性去过滤掉另一个list中不包含这部分的属性,用流实现

你可以使用Java 8的流来实现这个功能。假设你有两个包含对象的List&#xff0c;每个对象有一个属性&#xff0c;你想根据一个List中的属性值来过滤掉另一个List中不包含这个属性值的对象。下面是一种使用流的方式来实现这个功能 import java.util.ArrayList; import java.util…

什么是闭包(closure)?为什么它在JavaScript中很有用?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 闭包&#xff08;Closure&#xff09;是什么&#xff1f;⭐ 闭包的用处⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&…

IO流面试题

题目一&#xff1a; 在磁盘中新建一个文件(如果目录结构不存在&#xff0c;则创建目录) 文件名&#xff1a;data.txt 文件日录&#xff1a;C:\demo\test\files (盘符不限) linux目录~/demo/test/files 题二 在新建的data.txt中添加如下内容&#xff1a; 张三,测试,2019-02-18 …

windows10 安装WSL2, Ubuntu,docker

AI- 通过docker开发调试部署ChatLLM 阅读时长&#xff1a;10分钟 本文内容&#xff1a; window上安装ubuntu虚拟机&#xff0c;并在虚拟机中安装docker&#xff0c;通过docker部署数字人模型&#xff0c;通过vscode链接到虚拟机进行开发调试.调试完成后&#xff0c;直接部署在云…

优漫动游零基础如何学习好UI设计

智能时代的来临&#xff0c;很多企业都越来越注重用户体验这一块&#xff0c;想要有一个吸引用户的好页面&#xff0c;UI设计师岗位不可或缺&#xff0c;如今越来越多的人想要学习UI设计技术&#xff0c;那么对于零基础小白如何学习好UI设计呢? 零基础小白如何学习好UI设计…

变更通知在开源SpringBoot/SpringCloud微服务中的最佳实践

目录导读 变更通知在开源SpringBoot/SpringCloud微服务中的最佳实践1. 什么是变更通知2. 变更通知的场景分析3. 变更通知的技术方案3.1 变更通知的技术实现方案 4. 变更通知的最佳实践总结5. 参考资料 变更通知在开源SpringBoot/SpringCloud微服务中的最佳实践 1. 什么是变更通…

Ubuntu在自己的项目中使用pcl

1、建立一个文件夹&#xff0c;如pcl_demos&#xff0c;里面建立一个.cpp文件和一个cmake文件 2、打开终端并进入该文件夹下&#xff0c;建立一个build文件夹存放编译的结果并进入该文件夹 3、对上一级进行编译 cmake .. 4、生成可执行文件 make 5、运行该可执行文件 6、可视…

最强自动化测试框架Playwright(30)-JS句柄

在 Playwright 中&#xff0c;JSHandle 是一个表示浏览器中 JavaScript 对象的类。它提供了与网页中的 JavaScript 对象进行交互和操作的方法。 可以通过调用 Playwright中的 evaluateHandle 或 evaluate 方法来获取 JSHandle from playwright.sync_api import sync_playwrig…

微服务中间件-分布式缓存Redis

分布式缓存 a.Redis持久化1) RDB持久化1.a) RDB持久化-原理 2) AOF持久化3) 两者对比 b.Redis主从1) 搭建主从架构2) 数据同步原理&#xff08;全量同步&#xff09;3) 数据同步原理&#xff08;增量同步&#xff09; c.Redis哨兵1) 哨兵的作用2) 搭建Redis哨兵集群3) RedisTem…