前端框架简介及Vue3项目起步基础配置

前端框架简介

随着互联网技术的不断发展，程序员们用的前端框架也在不断地更新变化。前端框架从以前常用的jQuery、Bootstrap等框架，发展成现在的Vue、React、Angular三足鼎立的局面。这三个框架各有千秋，而且都是比较成熟的框架。

Vue

• Vue是一个轻量级的框架，通过进行双向数据的绑定来驱动界面，很多程序员学习新框架的时候，都会先从Vue开始。
• 因为它的官方文档介绍得非常清楚，而且能够非常快速地通过异步批处理的方式更新DOM。
• 还可以允许多种模块的安装，使用的场景很灵活。
• VueJS是国产框架，开发者是尤雨溪，Vue在国内框架中市场占有率高。

1.1 Vue脚手架

• Vue2脚手架：vue-cli 底层：webpack
• Vue3脚手架：create-vue 底层：vite

1.1.1 使用vue-cli创建vue2项目

1.1.2 使用create-vue创建vue3项目

• 1.前提条件
  已安装16.0或更高版本地Node.js。
• 2.创建项目指令

npm init vue@latest

这一指令将会安装并执行create-vue

• 3.创建项目并精细化配置
  
• 4.src目录调整
  
  注意：基于create-vue创建出来地项目默认没有初始化git仓库，需要我们手动初始化。命令如下：

git init
git add .
git commit -m "init commit"

1.1.3 项目起步-配置别名路径联想提示

• 1.什么是别名路径联想提示
  在编写代码的过程中，一旦 输入 @/ , VSCode会立刻 联想出src下的所有子目录和文件, 统一文件路径访问不容易出错。
  
• 2.如何进行配置
  • 1. 在项目的根目录下新增 jsconfig.json 文件
  • 2. 添加json格式的配置项，如下：
       

1.1.4 项目起步-elementPlus引入

添加ElementPlus到项目（按需导入）
参考文档：ElementPlus自动按需导入配置

1. 安装elementPlus和自动导入插件

npm i elementPlus
npm install -D unplugin-vue-components unplugin-auto-import

2. 配置自动按需导入

// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    // 配置插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

3. 测试组件

1.1.5 项目起步-elementPlus主题定制

为什么需要主题定制

小兔鲜主题色和elementPlus默认的主题色存在冲突，通过定制主题让elementPlus的主题色和小兔鲜项目保持一致。

如何定制（scss变量替换方案）

如何验证主题替换成功

使用el-button按钮组件进行验证，type=”primary ”时显示主色，如果颜色变成了小兔鲜的主色，即为成功。

1. 安装sass

基于vite的项目默认不支持css预处理器，需要开发者单独安装

npm i sass -D

2. 准备定制化的样式文件

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
)

3. 自动导入配置

这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来

1. 自动导入定制化样式文件进行样式覆盖
2. 按需定制主题配置 （需要安装 unplugin-element-plus）

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 导入对应包
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // 按需定制主题配置
    ElementPlus({
      useSource: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

1.1.6 项目起步-国际化

参考文档：多语言国际化vue I18n

1.1.7 项目起步-axios基础配置

1. 安装axios

npm i axios

2. 配置基础实例（统一接口配置）

官方文档地址：https://axios-http.com/zh/docs/intro
基础配置通常包括：

1. 实例化 - baseURL + timeout
2. 拦截器 - 携带token 401拦截等

// axios基础的封装
import axios from "axios"

const httpInstance = axios.create({
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout: 5000
})

// 拦截器

// axios请求拦截器
httpInstance.interceptors.request.use(config => {
    return config
}, e => Promise.reject(e))

// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
    return Promise.reject(e)
})

export default httpInstance

3. 封装请求函数并测试

文件路径：src/apis/testAPI.js

import http from '@/utils/http'

export function getCategoryAPI () {
  return http({
    url: 'home/category/head'
  })
}

在main.js中测试接口

// 测试接口函数
import { getCategory } from '@/apis/testAPI'
getCategory().then(res => {
    console.log(res);
})

4.如果项目里面不同的业务模块需要的接口基地址不同，该如何来做？

axios.create() 方法可以执行多次，每次执行就会生成一个新的实例，比如：

1.1.8 项目起步-项目路由设计

1.设计首页和登录页的路由（一级路由）

路由设计原则：找内容切换的区域，如果是页面整体切换，则为一级路由。

2.设计分类页和默认Home页路由（二级路由）

路由设计原则：找内容切换的区域，如果是在一级路由页的内部切换，则为二级路由。

3.代码实现

<template>
  我是登录页
template>

<template>
  我是首页
template>

<template>
  我是home
template>

<template>
  我是分类
template>

// createRouter：创建router实例对象
// createWebHistory：创建history模式的路由

import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // path和component对应关系的位置
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'category',
          component: Category
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

export default router

4.解决组件命名报错

解决办法：在.eslintrc.cjs中添加以下代码

 rules: {
    'vue/multi-word-component-names': 0 // 不再强制要求组件命名
  }

5.总结

• 1. 路由设计的依据是什么？
     内容切换的方式
• 2. 默认二级路由如何进行设置？
     path配置项置空

1.1.9 项目起步-静态资源初始化和 Error Lens 安装

1.图片资源和样式资源

• 资源说明

1. 实际工作中的图片资源通常由 UI设计师 提供，常见的图片格式有png,svg等都是由UI切图交给前端。
2. 样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写。

• 资源操作

3. 图片资源 - 把 images 文件夹放到 assets 目录下。
4. 样式资源 - 把 common.scss 文件放到 styles 目录下

2.Error Lens 安装

Error Lens是一个实时提供错误警告信息的VSCode插件，方便开发。

1.1.10 项目起步-scss文件自动导入

1.为什么要自动导入

在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量。

2.自动导入配置

1. 新增一个 var.scss 文件，存入色值变量。

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

2. 通过 vite.config.js 配置自动导入文件。

css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}

React

• React这个框架源于Facebook的内部项目。
• React可以通过对DOM的模拟从而减少与DOM的交互，从而轻易地解决了跨浏览器兼容的问题。
• 它的模块化把组件隔离，出现问题时方便程序员修改，还因为同构Java，所以有助于搜索引擎的优化。
• 一般的应用他们都完全胜任，但是如果您项目跨平台 (iso android window) 推荐使用 ReactJS。
• 要是注重性能，我就更推荐您使用 ReactJS， 毕竟它是虚拟 dom 的鼻祖。

Angular

• Angular是由 Google 的 Angular 团队以及社区共同开发的项目。
• Angular是一个以Java编写的库，拥有良好的应用程序，模板的功能非常强大，自带丰富的angular指令，可以通过指令扩宽HTML。
• 而且可以通过表达式绑定数据到HTML，因为引入了Java的一些内容，所以很容易就可以写出复用代码。
• 有效提高了团队开发的速度。