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天前
|
人工智能 自然语言处理 API
Cline:29.7K Star!一文详解VSCode最强开源AI编程搭子:一键生成代码+自动跑终端+操控浏览器...
Cline 是一款集成于 VSCode 的 AI 编程助手,支持多语言模型,实时检查语法错误,帮助开发者提高编程效率。通过智能化手段,Cline 可以生成代码、执行终端命令、调试 Web 应用,并扩展更多功能。
63 5
|
1月前
|
人工智能 开发框架 自然语言处理
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
Eko 是 Fellou AI 推出的开源 AI 代理开发框架,支持自然语言驱动,帮助开发者快速构建从简单指令到复杂工作流的智能代理。
304 12
Eko:一句话就能快速构建复杂工作流的 AI 代理开发框架!快速实现自动操作电脑和浏览器完成任务
|
1月前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
2月前
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
108 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
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 提高开发效率和代码质量。
58 3
|
4月前
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
166 0
|
4月前
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
444 0
|
4月前
|
Web App开发 前端开发 JavaScript
为什么浏览器兼容性在开发网站时很重要?
浏览器兼容性在网站开发中确实非常重要。
|
5月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
6月前
|
Rust 安全 JavaScript
Rust 和 WebAssembly 搞大事啦!代码在浏览器中运行,这波操作简直逆天!
【8月更文挑战第31天】《Rust 与 WebAssembly:将 Rust 代码运行在浏览器中》介绍了 Rust 和 WebAssembly 的强大结合。Rust 是一门安全高效的编程语言,而 WebAssembly 则是新兴的网页技术标准,两者结合使得 Rust 代码能在浏览器中运行,带来更高的性能和安全性。文章通过示例代码展示了如何将 Rust 函数编译为 WebAssembly 格式并在网页中调用,从而实现复杂高效的应用程序,同时确保了内存安全性和跨平台兼容性,为开发者提供了全新的可能性。
219 0

热门文章

最新文章