新建远程仓库（码云）

 https://gitee.com/

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


得到远程仓库地址

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

创建项目

  • vscode 安装插件 vue3-snippets-for-vscode
  • 安装 node v20.12.2
  • 设置淘宝镜像
npm config set registry https://registry.npmmirror.com
  • 1.
  • 开始创建项目
npm create vue@latest
  • 1.

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

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

项目命名格式推荐

项目英文简写 - 前/后端标识符 - 框架名
  • 1.
  • 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"
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

安装 SASS

npm i -D sass
  • 1.

清除浏览器默认样式

npm i reset-css
  • 1.

src/main.ts 中导入即可

import 'reset-css'
  • 1.

清除模板代码

官方脚手架中下载的 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 将 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
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 清空文件夹 src/stores
  • 清空文件夹 src/views
  • 将 src/App.vue 的内容修改为
<template>
  <RouterView />
</template>
  • 1.
  • 2.
  • 3.

提高开发效率的必要集成

自动导入框架方法


自动注册组件


自动路由


全局布局


使用 CSS 框架 UnoCSS