前端框架简介及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.如何进行配置
-
- 在项目的根目录下新增 jsconfig.json 文件
-
- 添加json格式的配置项，如下：
- 添加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
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. 自动导入配置
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. 配置基础实例（统一接口配置）
// 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.总结
-
- 路由设计的依据是什么？
内容切换的方式
- 路由设计的依据是什么？
-
- 默认二级路由如何进行设置？
path配置项置空
- 默认二级路由如何进行设置？
1.1.9 项目起步-静态资源初始化和 Error Lens 安装
1.图片资源和样式资源
- 资源说明
- 实际工作中的图片资源通常由 UI设计师 提供，常见的图片格式有png,svg等都是由UI切图交给前端。
- 样式资源通常是指项目初始化的时候进行样式重置，常见的比如开源的 normalize.css 或者手写。
- 资源操作
- 图片资源 - 把 images 文件夹放到 assets 目录下。
- 样式资源 - 把 common.scss 文件放到 styles 目录下
2.Error Lens 安装
Error Lens是一个实时提供错误警告信息的VSCode插件，方便开发。
1.1.10 项目起步-scss文件自动导入
1.为什么要自动导入
在项目里一些组件共享的色值会以scss变量的方式统一放到一个名为 var.scss 的文件中，正常组件中使用，需要先导入scss文件，再使用内部的变量，比较繁琐，自动导入可以免去手动导入的步骤，直接使用内部的变量。
2.自动导入配置
- 新增一个 var.scss 文件，存入色值变量。
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
- 通过 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的一些内容，所以很容易就可以写出复用代码。
- 有效提高了团队开发的速度。
