vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成

简介: vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成

新建远程仓库(码云)

https://gitee.com/

得到远程仓库地址

https://gitee.com/sunshine39/ec-web-vue3.git

创建项目

  • vscode 安装插件 vue3-snippets-for-vscode
  • 安装 node v20.12.2
  • 设置淘宝镜像
npm config set registry https://registry.npmmirror.com

  • 开始创建项目
npm create vue@latest

  • 包名称默认使用的项目名称全小写的格式
  • 其他配置根据实际项目需要调整
  • 按提示,完成项目的依赖安装和启动
  cd EC-web-vue3
  npm install
  npm run format
  npm run dev

项目命名格式推荐

项目英文简写 - 前/后端标识符 - 框架名
  • EC 是 Enjoy Code 的简写
  • 前端标识符为 web
  • 框架使用的 vue3

提交项目到远程仓库

git init
git add .
git commit -m '第一次版本提交'
git remote add origin https://gitee.com/sunshine39/ec-web-vue3.git
git push -u origin "master"

安装 SASS

npm i -D sass

清除浏览器默认样式

npm i reset-css

src/main.ts 中导入即可

import 'reset-css'
 

清除模板代码

官方脚手架中下载的 vue 项目中含很多演示代码,可以参考以下方式清理。

  • 清空 src/assets/main.css 中的样式,assets 文件夹中,只留 main.css
  • 清空 src/components 文件夹
  • 新建文件夹 src/pages/index,在其中新建文件 index.vue,内容为
<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts"></script>

<template>
  <div class="page">
    <div class="title">首页</div>
  </div>
</template>

<style lang="scss" scoped>
.page {
  .title {
    color: red;
  }
}
</style>
  • 将 src/router/index.ts 中的内容修改为
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('../pages/index/index.vue')
    }
  ]
})

export default router
  • 清空文件夹 src/stores
  • 清空文件夹 src/views
  • 将 src/App.vue 的内容修改为
<template>
  <RouterView />
</template>

提高开发效率的必要集成

自动导入框架方法

https://blog.csdn.net/weixin_41192489/article/details/140018292


自动注册组件

https://blog.csdn.net/weixin_41192489/article/details/140019854


自动路由

https://blog.csdn.net/weixin_41192489/article/details/140007831


全局布局

https://blog.csdn.net/weixin_41192489/article/details/140016698


使用 CSS 框架 UnoCSS

https://blog.csdn.net/weixin_41192489/article/details/140034188

目录
相关文章
|
1月前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
131 7
|
3月前
|
监控 安全 测试技术
在实施自动化和持续集成的过程中,如何确保代码的安全性和合规性
在自动化和持续集成中,确保代码安全与合规至关重要。措施包括集成自动化安全工具、执行自动化合规检查、进行代码质量与安全检测、评估开源代码安全、实施基础设施即代码的安全标准、采用多层防御策略、加强安全教育与文化建设、使用合规性检测工具及许可证合规分析等,共同提升代码安全性与合规水平。
|
3月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
3月前
|
前端开发
create-react-app 如何使用 less/sass 和 react-css-modules?
本文详细介绍了在 create-react-app 项目中如何使用 less/sass 和 react-css-modules 来管理和应用样式。首先,通过安装相应依赖并配置 webpack 支持 less/sass;接着,介绍如何使用这些预处理器编写样式;最后,讲解了如何配置和使用 react-css-modules 实现样式的模块化管理,以及如何结合使用 less/sass 和 react-css-modules 提高开发效率和代码质量。
66 3
|
3月前
|
监控 安全 测试技术
在实施自动化和持续集成的过程中,如何确保代码的安全性和合规性?
在实施自动化和持续集成的过程中,如何确保代码的安全性和合规性?
|
4月前
|
安全 算法 Java
数据库信息/密码加盐加密 —— Java代码手写+集成两种方式,手把手教学!保证能用!
本文提供了在数据库中对密码等敏感信息进行加盐加密的详细教程,包括手写MD5加密算法和使用Spring Security的BCryptPasswordEncoder进行加密,并强调了使用BCryptPasswordEncoder时需要注意的Spring Security配置问题。
290 0
数据库信息/密码加盐加密 —— Java代码手写+集成两种方式,手把手教学!保证能用!
|
4月前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
178 0
|
4月前
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
453 0
|
4月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
61 0

热门文章

最新文章