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

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

  • 前端框架简介
    • Vue
      • 1.1 Vue脚手架
      • 1.1.1 使用vue-cli创建vue2项目
      • 1.1.2 使用create-vue创建vue3项目
      • 1.1.3 项目起步-配置别名路径联想提示
      • 1.1.4 项目起步-elementPlus引入
        • 1. 安装elementPlus和自动导入插件
        • 2. 配置自动按需导入
        • 3. 测试组件
      • 1.1.5 项目起步-elementPlus主题定制
        • 为什么需要主题定制
        • 如何定制（scss变量替换方案）
        • 如何验证主题替换成功
        • 1. 安装sass
        • 2. 准备定制化的样式文件
        • 3. 自动导入配置
      • 1.1.6 项目起步-国际化
      • 1.1.7 项目起步-axios基础配置
        • 1. 安装axios
        • 2. 配置基础实例（统一接口配置）
        • 3. 封装请求函数并测试
        • 4.如果项目里面不同的业务模块需要的接口基地址不同，该如何来做？
      • 1.1.8 项目起步-项目路由设计
        • 1.设计首页和登录页的路由（一级路由）
        • 2.设计分类页和默认Home页路由（二级路由）
        • 3.代码实现
        • 4.解决组件命名报错
        • 5.总结
      • 1.1.9 项目起步-静态资源初始化和 Error Lens 安装
        • 1.图片资源和样式资源
        • 2.Error Lens 安装
      • 1.1.10 项目起步-scss文件自动导入
        • 1.为什么要自动导入
        • 2.自动导入配置
    • React
    • Angular

前端框架简介

随着互联网技术的不断发展，程序员们用的前端框架也在不断地更新变化。前端框架从以前常用的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 文件
      1. 添加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. 测试组件
<template>
  <el-button type="primary">i am button</el-button>
</template>

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. 路由设计的依据是什么？
      内容切换的方式
    1. 默认二级路由如何进行设置？
      path配置项置空

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

1.图片资源和样式资源
  • 资源说明
  1. 实际工作中的图片资源通常由 UI设计师 提供，常见的图片格式有png,svg等都是由UI切图交给前端。
  2. 样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写。
  • 资源操作
  1. 图片资源 - 把 images 文件夹放到 assets 目录下。
  2. 样式资源 - 把 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;
  1. 通过 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的一些内容，所以很容易就可以写出复用代码。
  • 有效提高了团队开发的速度。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/364299.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DRV8313和L298N都是电机驱动，一个是驱动三相FOC无刷直流电机的，一个是驱动有刷电机，使stm32控制无刷电机简单入门知识

DRV8313和L298N都是电机驱动，一个是驱动三相FOC无刷直流电机的，一个是驱动有刷电机，使stm32控制无刷电机简单入门知识

DRV8313和L298N都是电机驱动器&#xff0c;但它们之间存在一些关键的区别&#xff1a; DRV83131&#xff1a; 由德州仪器&#xff08;TI&#xff09;制造。 具有集成的场效应晶体管&#xff08;FET&#xff09;。 最大电压为65V。 峰值电流为3A。 适用于三相电机驱动。 L298N…
阅读更多...
中科大计网学习记录笔记（三）：接入网和物理媒体

中科大计网学习记录笔记（三）：接入网和物理媒体

前言&#xff1a; 学习视频&#xff1a;中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版&#xff0c;James F.Kurose&#xff0c;Keith W.Ross&#xff09;》课程 该视频是B站非常著名的计网学习视频&#xff0c;但相信很多朋友和我一样在听完前面的部分发现信…
阅读更多...
Javaweb之SpringBootWeb案例之配置文件的详细解析

Javaweb之SpringBootWeb案例之配置文件的详细解析

4. 配置文件 员工管理的增删改查功能我们已开发完成&#xff0c;但在我们所开发的程序中还一些小问题&#xff0c;下面我们就来分析一下当前案例中存在的问题以及如何优化解决。 4.1 参数配置化 在我们之前编写的程序中进行文件上传时&#xff0c;需要调用AliOSSUtils工具类&…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(单选题：381-400）

华为数通方向HCIP-DataCom H12-821题库(单选题：381-400）

第381题 以下是某台设备通过display isis lsdb命令输出的信息，那么关于以上输出的信息的描述，正确的是哪一项? <R1>display isis lsdbDatabase information for ISIS(1)--------------------------------Level-1 Link State DatabaseLSPID Seq Num…
阅读更多...
0基础学习VR全景平台篇第140篇：摄影器材保养与维护

0基础学习VR全景平台篇第140篇：摄影器材保养与维护

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 摄影器材属于精密仪器&#xff0c;在使用过程中会磨损、老化、积灰。如果不对摄影器材进行清洁和保养&#xff0c;油污、灰尘、水渍长期停留在设备上&#xff0c;不仅会大大缩短相机…
阅读更多...
如何解决 docker registry x509 证书不信任问题？

如何解决 docker registry x509 证书不信任问题？

最近想尝试一下极狐GitLab&#xff08;可以理解为 GitLab 在中国的发行版&#xff09;内置的容器镜像仓库&#xff0c;这样就不用自己安装 Harbor 之类的了。于是找了个服务器安装了一个极狐GitLab 的私有化部署版本&#xff0c;安装过程可以参考过往的技术文章使用Omnibus 安装…
阅读更多...
中国传媒网CEO：媒体融合发展业态新媒体年后在沪召开

中国传媒网CEO：媒体融合发展业态新媒体年后在沪召开

近日,在“坚守媒体初心,拥抱AI时代”2023外滩新媒体年会上,有多项合作达成。 在当前竞争激烈的市场环境中,媒体宣传已经成为企业品牌推广不可或缺的一环。对于很多企业来说往往会犯一个错误,就是默默地参加了展会,并没有进行媒体营销。展会是一种非常有力的宣传和推广方式,可以…
阅读更多...
【代码随想录】LC 77. 组合

【代码随想录】LC 77. 组合

文章目录 前言一、题目1、原题链接2、题目描述 二、解题报告1、思路分析2、代码详解 前言 本专栏文章为《代码随想录》书籍的刷题题解以及读书笔记&#xff0c;如有侵权&#xff0c;立即删除。 一、题目 1、原题链接 77. 组合 2、题目描述 二、解题报告 1、思路分析 &#x…
阅读更多...
新旧Mac恢复出厂设置的方法不同，这里提供新旧Mac不同的重置方法

新旧Mac恢复出厂设置的方法不同，这里提供新旧Mac不同的重置方法

在某些使用macOS 12 Monterey或更高版本系统的Mac电脑上，你可以使用系统首选项中的内置功能“擦除助手”轻松擦除和重置计算机。以下是操作方法。 要求（以及旧款Mac的提示） 从2021年发布的macOs Monterey（macOs 12）开始，系统首选项现在有一个类似于iPhone和iPad上的“擦…
阅读更多...
弹框中展示gojs报错

弹框中展示gojs报错

一. 实际问题 我们在弹框中展示 gojs 时&#xff0c;打开第一次没什么问题&#xff0c;但是关闭弹框在打卡时报错 二. 问题原因 一个 id 只能关联一个图例&#xff0c;我们之前已经关联了id 三. 解决办法 我使用的是 vite vue3.0 elementPlus Dialog 弹框内写法&#x…
阅读更多...
基于二值化图像转GCode的螺旋扫描实现

基于二值化图像转GCode的螺旋扫描实现

基于二值化图像转GCode的螺旋扫描实现 什么是双向扫描螺旋扫描代码示例 基于二值化图像转GCode的螺旋扫描实现 什么是螺旋扫描 螺旋扫描&#xff08;Spiral Scanning&#xff09;是激光雕刻中一种特殊的扫描方式&#xff0c;其特点是激光头按照螺旋形状逐渐向外移动&#xf…
阅读更多...
Linux useradd、gpasswd、chmod 等关于用户及权限设置

Linux useradd、gpasswd、chmod 等关于用户及权限设置

创建用户 useradd zen01 useradd zen02 useradd zen03 创建组 groupadd dev-group 把用户添加到dev-group组中 gpasswd -a zen01 dev-group gpasswd -a zen02 dev-group gpasswd -a zen03 dev-group 查看 dev-group组中用户列表 grep ‘dev-group’ /etc/group 创建文件 mkdir…
阅读更多...
深入解析企业培训教育系统开发：源码探秘与技术实践

深入解析企业培训教育系统开发：源码探秘与技术实践

当下&#xff0c;为了提高员工的技能水平、促进团队的协同合作&#xff0c;企业培训教育系统成为了一个不可或缺的组成部分。本篇文章&#xff0c;小编将为大家讲述企业培训教育系统的开发&#xff0c;揭示其源码背后的奥秘以及相关的技术实践。 一、概述 企业培训教育系统通常…
阅读更多...
计算机设计大赛 深度学习 python opencv 实现人脸年龄性别识别

计算机设计大赛 深度学习 python opencv 实现人脸年龄性别识别

文章目录 0 前言1 项目课题介绍2 关键技术2.1 卷积神经网络2.2 卷积层2.3 池化层2.4 激活函数&#xff1a;2.5 全连接层 3 使用tensorflow中keras模块实现卷积神经网络4 Keras介绍4.1 Keras深度学习模型4.2 Keras中重要的预定义对象4.3 Keras的网络层构造 5 数据集处理训练5.1 …
阅读更多...
【机器学习】监督学习算法之：决策树

【机器学习】监督学习算法之：决策树

决策树 1、引言2、决策树2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.4.1 信息增益公式2.4.2 信息增益率公式 2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;我被你骗了。 小鱼&#xff1a;… 别闹&#xff0c;我怎么可能骗你呢。 小屌丝&#xff1a;你上次…
阅读更多...
从零开始学Linux之gcc链接

从零开始学Linux之gcc链接

目录 创建静态库并使用 创建动态库(共享库)并使用 链接&#xff1a;将.o目标文件链接起来生成一个可执行程序文件&#xff0c;可分为静态链接和动态链接 静态链接&#xff1a;链接器会找出程序所需的函数&#xff0c;然后将它们拷贝到执行文件&#xff0c;由于这种拷贝是完整…
阅读更多...
VUE PC端可拖动悬浮按钮

VUE PC端可拖动悬浮按钮

一、实现效果&#xff1a; 二、FloatButton.vue <template><div><div class"sssss"><div class"callback float" mousedown"down" touchstart"down" mousemove"move" touchmove"move" mous…
阅读更多...
[opencvsharp]C#基于Fast算法实现角点检测

[opencvsharp]C#基于Fast算法实现角点检测

角点检测算法有很多&#xff0c;比如Harris角点检测、Shi-Tomas算法、sift算法、SURF算法、ORB算法、BRIEF算法、Fast算法等&#xff0c;今天我们使用C#的opencvsharp库实现Fast角点检测 【算法介绍】 fast算法 Fast(全称Features from accelerated segment test)是一种用于角…
阅读更多...
脚本工具 mktemp 和 install

脚本工具 mktemp 和 install

1.创建临时文件 mktemp 1.1 介绍 mktemp 命令用于创建并显示临时文件&#xff0c;可避免冲突 使用mktemp命令时&#xff0c;它会根据指定的模板在临时目录&#xff08;默认为/tmp&#xff09;中创建一个唯一的临时文件或目录&#xff0c;并返回该文件或目录的完整路径。临时…
阅读更多...
【大厂AI课学习笔记】1.4 算法的进步（2）

【大厂AI课学习笔记】1.4 算法的进步（2）

关于感知器的兴衰。 MORE&#xff1a; 感知器的兴衰 一、感知器的发明与初期振动 在人工智能的历史长河中&#xff0c;感知器&#xff08;Perceptron&#xff09;无疑是一个里程碑式的存在。它最初由心理学家Frank Rosenblatt在1950年代提出&#xff0c;并在随后的几年中得到…
阅读更多...
最新文章

Copyright @ 2022~2023