最近正在学习vue3小兔鲜，需要相关学习资料的可以点链接
https://docs.qq.com/doc/DUmhUVERtUHpLaG1a
下面试学习笔记

项目起步

项目预览地址

小兔鲜儿商城：http://erabbit.itheima.net/#/

创建项目

目标：使用 vite 初始化小兔鲜项目

核心步骤：

• 初始化项目

yarn create vue
或
npm init vue

• 一顿操作

√ Project name: ... vue3-ts-pinia-router-eslint
√ Add TypeScript? ... Yes ✅
√ Add JSX Support? ... Yes ✅
√ Add Vue Router for Single Page Application development? ... Yes ✅
√ Add Pinia for state management? ... Yes ✅
√ Add Vitest for Unit Testing? ... No ❌
√ Add Cypress for both Unit and End-to-End testing? ... No ❌
√ Add ESLint for code quality? ... Yes ✅
√ Add Prettier for code formatting? ... Yes ✅

• 进入到 rabbit-vue3-ts 项目中，安装依赖包

yarn

• eslint 格式化项目文件

yarn lint

• 启动项目

yarn dev

创建 Vue3 项目命令对比

Vue3 基础阶段命令

• 能使用，但是配置太简单了，学习 Vue3 基础可以，项目还需要额外配置很多东西，效率低。

yarn create vite
# 或
npm init vite

Vue3 项目阶段命令

• Vue3 官方推荐方式，可以根据项目情况按需选择配置，推荐使用。

yarn create vue
# 或
npm init vue

常见问题

• Node 版本问题

yarn create vue 的依赖包要求 Node 15+ 以上，建议大家直接升级到 Node 16 版本。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nKx63uUw-1668071786610)(media/image-20220218091016277.png)]

• VsCode 插件
  • 安装插件 vue.volar 和 vue.vscode-typescript-vue-plugin
  • 禁用插件 octref.vetur 和 @builtin typescript，禁用后记得重启。

Git 版本管理

初始化和开发分支准备

# 初始化项目仓库
git init

# 将所有文件添加到暂存区
git add .

# 提交到仓库
git commit -m '初始化提交'

# 🚨 新建 dev 分支并切换 - 用于开发
git checkout -b dev

使用 gitee 管理项目

**目标：**能够使用 git 管理项目，并且能够将代码上传到码云

核心步骤：

• 在码云上创建项目rabbit-vue3-ts

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I92sr5Mr-1668071786612)(media/image-20211229155056153.png)]

• 设置仓库别名

git remote add origin xxxxxxx

• 推送到远程仓库

# 推送主分支
git push -u origin "master"

# 推送开发分支
git push -u origin "dev"

目录调整

**目标：**能够调整项目的目录结构，规范开发环境。

目录调整

删除文件

• src 目录下所有文件

新建文件

• src/App.vue 根组件

<template>
  <h1>Vue3+TS+VueRouter4+Pinia-新版小兔鲜儿</h1>
</template>

• src/main.ts

// Vue 项目入口文件
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

项目文件夹规范

• utils 用于存放工具相关
• assets/images 用于存放图片相关
• assets/styles 用于存放样式相关
• router 用于存放路由相关
• store用于存放数据相关
• views用于存放页面级别的组件
• components用于存放公共的组件
• types用于存放 ts 的公共类型

axios 请求库

**目的：**基于 axios 封装一个请求工具，调用接口时使用。

• 安装 axios

yarn add axios

• 新建 src/utils/request.ts 模块，代码如下

import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  timeout: 50000
})

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    return response
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

• 在App.vue文件中进行测试

<script setup lang="ts">
import request from "./utils/request";
import { onMounted } from "vue";

onMounted(async () => {
  const res = await request.get("/home/index");
  console.log(res);
});
</script>

<template>
  <h1>Vue3+TS小兔鲜儿</h1>
</template>

样式处理-less 变量与 mixins

目标： 能够使用 less 变量定义项目中常用的颜色，使用 mixins 定义项目中常用的样式

核心步骤

• 安装 less

yarn add less

• 新建变量 src/assets/styles/variables.less

// 主题
@xtxColor: #27ba9b;
// 辅助
@helpColor: #e26237;
// 成功
@sucColor: #1dc779;
// 警告
@warnColor: #ffb302;
// 价格
@priceColor: #cf4444;

• 混入 src/assets/styles/mixins.less

// 鼠标经过上移阴影动画
.hoverShadow () {
  transition: all 0.5s;
  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
}

• 在 App.vue 中测试

<style lang="less">
// 必须导入 variables.less
@import "@/assets/styles/variables.less";
@import "@/assets/styles/mixins.less";

h1 {
  color: @warnColor;
  .hoverShadow();
}
</style>

Vite 配置 - 自动导入样式

🚨问题：variables.less和mixins.less 两个 less 文件是需要在多个组件中去使用的。但是如果组件中不导入，直接使用会报错。

目标： 通过 vite 配置自动导入项目中的less变量和mixins

**参考文档：**https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions

核心步骤：

• 修改vite.config.ts 文件，增加内容

export default defineConfig({
// ...省略
+  css: {
+    // https://cn.vitejs.dev/config/shared-options.html#css-preprocessoroptions
+    preprocessorOptions: {
+      less: {
+        additionalData: `
+          @import "@/assets/styles/variables.less";
+          @import "@/assets/styles/mixins.less";
+        `,
+      },
+    },
+  },
})

• 修改 App.vue 中的代码

<style lang="less" scoped>
- @import "@/assets/styles/variables.less";
- @import "@/assets/styles/mixins.less";
h1 {
  background-color: @warnColor;
  .hoverShadow();
}
</style>

• yarn dev 重启脚手架，浏览器刷新查看效果。

样式处理-标签样式重置

**目标：**能够使用功能 normalize.css重置项目中的样式

简介

• normalize.css 使浏览器呈现所有标签样式更加一致，符合现代标准。

核心步骤

• 安装 normalize.css

yarn add normalize.css

• 使用 normalize.css

main.ts 导入 normalize.css 即可。

import { createApp } from 'vue'
import App from './App.vue'

+ import 'normalize.css'

createApp(App).mount('#app')

• 在 App.vue 中测试

<template>
  <div>
    <p>哈哈哈</p>
    <ul>
      <li>123</li>
      <li>456</li>
    </ul>
    <h1>这是大标题</h1>
  </div>
</template>

通过效果会发现，h1 ul 等样式还是保留的，但是不一致的样式已经被重置了，确保不同的浏览器统一标签样式

样式处理-公共样式

**目标：**能够给项目设置通用的样式。虽然有了重置样式，但是项目中依旧需要项目的通用样式。

核心步骤

• 新建文件 src/assets/styles/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;
  //  background: #ebebeb;
}

ul {
  list-style: none;
}

#app {
  background-color: #f5f5f5;
}

.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;
}

// 闪动画
.shan {
  &::after {
    content: '';
    position: absolute;
    animation: shan 1.5s ease 0s infinite;
    top: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-45deg);
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}

// 离开淡出动画
.fade {
  &-leave {
    &-active {
      position: absolute;
      width: 100%;
      transition: opacity 0.5s 0.2s;
      z-index: 1;
    }
    &-to {
      opacity: 0;
    }
  }
}

// 1. 离开，透明度  1---->0    位移 0---->30
// 2. 进入，透明度  0---->1    位移 30---->0
// 执行顺序，先离开再进入
.pop {
  &-leave {
    &-from {
      opacity: 1;
      transform: none;
    }
    &-active {
      transition: all 0.5s;
    }
    &-to {
      opacity: 0;
      transform: translateX(20px);
    }
  }
  &-enter {
    &-from {
      opacity: 0;
      transform: translateX(20px);
    }
    &-active {
      transition: all 0.5s;
    }
    &-to {
      opacity: 1;
      transform: none;
    }
  }
}

// 表单
.xtx-form {
  padding: 50px 0;
  &-item {
    display: flex;
    align-items: center;
    width: 700px;
    margin: 0 auto;
    padding-bottom: 25px;
    .label {
      width: 180px;
      padding-right: 10px;
      text-align: right;
      color: #999;
      ~ .field {
        margin-left: 0;
      }
    }
    .field {
      width: 320px;
      height: 50px;
      position: relative;
      margin-left: 190px;
      .icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #999;
        ~ .input {
          padding-left: 40px;
        }
      }
      .input {
        border: 1px solid #e4e4e4;
        width: 320px;
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        &.err {
          border-color: @priceColor;
        }
        &:focus,
        &:active {
          border-color: @xtxColor;
        }
      }
    }
    .error {
      width: 180px;
      padding-left: 10px;
      color: @priceColor;
    }
  }
  .submit {
    width: 320px;
    height: 50px;
    border-radius: 4px;
    background: @xtxColor;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    display: block;
    margin: 0 auto;
  }
}

• 在 main.ts 导入即可。

import { createApp } from 'vue'
import App from './App.vue'

import 'normalize.css'
+ import '@/assets/styles/common.less'

createApp(App).mount('#app')

VsCode 配置参考

工作区插件

• 工作区插件：.vscode\extensions.json

{
  "recommendations": [
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "usernamehw.errorlens",
    "editorconfig.editorconfig"
  ]
}

工作区设置

• 工作区设置： .vscode\settings.json
  • 指定格式化程序
  • eslint 配置
  • 行尾配置
  • 空格缩进个数
  • 等…

{
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [
      ".js",
      ".ts",
      ".vue",
      ".jsx",
      ".tsx",
    ]
  },
  // 操作时作为单词分隔符的字符
  "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
  // 一个制表符等于的空格数
  "editor.tabSize": 2,
  // 保存时格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  // 文件行尾符号
  "files.eol": "\n",
  // 是否以紧凑形式展示文件夹
  "explorer.compactFolders": false
}

格式化配置

根目录下新建文件： .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

根目录下新建文件：.gitattributes

* text eol=lf
*.txt text eol=lf

根目录下新建文件：.editorconfig

# editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
quote_type = single

手动设置参考

• 禁用 VsCode 内置的 TypeScript 插件，使用 Volar 插件接管 TS 检查工作。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WAGuP6Oe-1668071786612)(media/image-20220218095648420.png)]