网店运营推广实训_家装公司网站_浙江网站建设营销_企业快速建站

该项目配置涉及到性能优化：防抖、加载优化、图片懒加载。

一、使用create-vue创建Vue3项目【建议用这种新建】

启动一个新项目，你可能会发现使用 create-vue 这个VUE脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：

方法一

npm init vue //默认搭建Vue3

方法二

npm create vue@latest //默认搭建最新版本的Vue

注意：创建完成后会出现红色警告：找不到模块“vue-router”。你的意思是要将 moduleResolution 选项设置为 node,还是要将别名添加到 paths 选项中?

解决办法：在tsconfig.app.json中添加以下内容，如添加到 tsconfig.node.json 还是会报错的。设置完重启一下编译器！！！

{

"extends": "@vue/tsconfig/tsconfig.dom.json",

"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],

"exclude": ["src/**/__tests__/*"],

"compilerOptions": {

"composite": true,

"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

// 添加

"moduleResolution": "node",

// 有的可能项目创建后有，若没有请添加

"baseUrl": ".",

"paths": {

"@/*": ["./src/*"]

}

}

}

红色警告：找不到模块“vite”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?

只需要改个配置即可，根目录 tsconfig.node.json，将：

"moduleResolution": "Bundler",

改为

"moduleResolution": "Node",

保存重启编译器，就不会报错了。

二、使用Vite创建Vue3项目

三、安装vant-ui

-- Vue 3 项目，安装最新版 Vant

npm i vant

局部注册组件：按需引入做法

--1、在main.ts引入

import 'vant/lib/index.css';

-- 2、在页面中引入

<script setup>

import { Tabbar, TabbarItem } from 'vant';

import {ref} from 'vue'

const active = ref('')

</script>

<template>

<Tabbar v-model="active">

<TabbarItem icon="home-o">首页</TabbarItem>

<TabbarItem icon="orders-o">订单</TabbarItem>

<TabbarItem icon="contact-o">我的</TabbarItem>

</Tabbar>

</template>

四、vue-router实现页面路由

目的：非常方便实现路由管理

单页面应用SPA：不刷新而切换页面某部分

4.1、如何配置路由

内容组件渲染的地方

<router-view>

路由与组件的对应关系

router 实例 config

触发路由跳转的地方

①<router-link> ②代码动态设置

<script setup lang="ts">
import { Tabbar, TabbarItem } from 'vant'
import { RouterView, useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
// useRoute 获取当前的路由状态
// useeRouter 获取路由的实例
const route = useRoute()
const router = useRouter()
// console.log('获取当前路由的名称', route.name)
// 记录当前选择的路由
const active = ref(route.name as string)//watch监听当前的路由项/tab项
watch(active, (new_active) => {router.push({ name: new_active })
})
</script><template><RouterView /><Tabbar v-model="active"><TabbarItem name="home" icon="home-o">首页</TabbarItem><TabbarItem name="order" icon="orders-o">订单</TabbarItem><TabbarItem name="me" icon="contact-o">我的</TabbarItem></Tabbar>
</template>

import { createRouter, createWebHistory } from 'vue-router'
import TabsView from '../views/tabs/TabsView.vue'
import HomeView from '../views/tabs/home/HomeView.vue'
import OrderView from '../views/tabs/order/OrderView.vue'
import MeView from '../views/tabs/me/MeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',redirect: '/home',},{path: '/tabs',name: 'tabs',component: TabsView,children: [{ name: 'home', path: '/home', component: HomeView },{ name: 'order', path: '/order', component: OrderView },{ name: 'me', path: '/me', component: MeView },],},],
})export default router

五、搭建轻量级的Server架构：使用json-server 搭建Mock Server（概念）

注意：mock server 不是生产级别的，而是使用mock数据来模拟后端提供接口数据

5.1 什么是json-server?

答：是mock server搭建工具，轻易搭建拥有完成rest api的轻量级后端服务。使用json-server方式：①通过json-server命令启动一个服务；②通过module将json-server引入到自己的node服务。

5.2本项目架构

5.3 ele-h5-server文件结构

六、介绍Vite和使用Vite配置请求代理

6.1 介绍vite

什么是vite?

答：vite是vue官方推出的前端构建工具。由两部分组成：

开发服务器：基于ES模块提供丰富的内建功能
构建指令：使用Rollup打包代码，提供预设配置。

6.2 介绍跨域

什么是跨域？

答：同源就是协议 protocol、端口 port、域名host都一致。跨域就是域A 请求访问 域B。

常用的跨域方案。

答：

jsonp：利用<script>标签不受同源策略限制的原理。
CORS(跨源域资源共享)机制：允许Web应用服务器进行跨源访问控制。
反向代理：使不同的源变成同源。

6.3 解决跨域问题（反向代理）

什么是反向代理？

答：代理：就是请求转发。

代理服务器类型：

正向代理：客户端告诉代理服务器资源的地址。
反向代理：客户端只告诉要什么资源。

6.4 使用vite配置请求代理

热更新：vite在文件热更新上做了优化。使用ESM不需要重新编译，一些打包工具的开发服务器在文件更改时，需要重新构建整个项目，来获取新的模块依赖关系；使用浏览器缓存加速，vite利用HTTP头来加速整个页面的重新加载。

在vite.config.ts文件做代理：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import vueJsx from '@vitejs/plugin-vue-jsx'

import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/

export default defineConfig({

plugins: [vue(), vueJsx(), vueDevTools()],

resolve: {

alias: {

'@': fileURLToPath(new URL('./src', import.meta.url)),

},

},

server: {

port: 3000, //可设置编译运行的端口号

proxy: {

'/api': 'http://xxxx', //请求的服务端网址

'/imgs': 'http://cccc:8000', //请求的服务端网址

},

},

})

七、使用 axios请求库，设置请求拦截

7.1 介绍axios请求库

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

它是一个基于Promise网络请求库，它是同构的，即同一套代码可以运行在浏览器和node.js中。

在服务端中，使用原生 node.js 的 http 模块
在客户端（浏览器）中，使用XMLHttpRequests

axios特性：

支持Promise API
拦截请求和响应
取消请求
自动转换JSON数据

7.2 介绍http状态码以及请求拦截

http响应状态码表明特定 HTTP请求是否成功完成。

信息响应（100-199）
成功响应（200-299）
重定向信息（300-399）
客户端错误响应（400-499）
服务端错误响应（500-599）

请求拦截：在请求或响应被then 或 catch 处理前拦截它们。

业务状态码：扩展请求的状态。一般两种情况：success 、fail

7.3 使用axios且设置请求拦截

7.3.1、安装axios

npm install axios -S

7.3.2、链接文章：创建实例，用实例创建请求，添加拦截器\页面发起请求

八、使用post-css实现移动端适配

移动端适配影响用户获取的信息量和体验。

常用适配方案。

不同端使用不同代码，比如PC端一套代码，移动端一套代码
不同端使用一套代码，一般使用 CSS样式来控制，比如 @media
移动端屏幕适配

利用 rem 按根节点（body）的字体大小来缩放（推荐）
利用 vh/vw按屏幕高度和宽度来缩放

适配方案——rem

rem是跟 px 类似的CSS数量单位。当前属性的大小值按根节点body的font-size等比例计算。

通过post-css工具，将css自动运算转换为rem。

autoprefixer插件：自动管理CSS属性的浏览器前缀。

postcss-pxtorem插件：px转换为rem。

8.1 安装插件依赖

npm i postcss autoprefixer postcss-pxtorem -D

8.2 配置postcss.config.ts

在src文件的同级下创建postcss.config.ts文件

module.exports = {

plugins:{

autoprefixer:{

overrideBrowserslist:['Android >= 4.0','iOS >= 7'],

},

'postcss-pxtorem':{

// 根节点的 fontSize 值

rootValue:16,

propList:['*'],

selectorBlackList:[':root'],

}

}

}

8.3 配置main.ts，加入以下代码

const rootValue = 16 //默认的字体大小

const rootWidth = 390 //设计稿的宽度

const deviceWidth = document.documentElement.clientWidth //获取用户设备屏幕宽度

document.documentElement.style.fontSize = deviceWidth * rootValue / rootWidth + 'px' // 动态转换

8.4 在组件中应用

<template>

<div class="test">homehomehomehomehome</div>

</template>

<style>

.test {

font-size: 30px;

}

</style>

在浏览器中切换不同的屏幕尺寸，字体大小是随着屏幕大小变化而变化的。打开调试器看，单位自动转换成rem

九、引入vant组件使用

按需加载可以减少包体积，优化加载性能。

Tree Shanking作用：移除无用的资源，包括JS代码、CSS文件。

方法一：全局注册组件

1、引入组件，注册组件（在main.ts中）

import { Tabbar, TabbarItem } from 'vant'

import 'vant/lib/index.css'

app.use(Tabbar).use(TabbarItem)

2、在组件中应用，注意：组件标签名加 Van标签名或者 van-标签名

<VanTabbar v-model="active">

<VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>

<VanTabbarItem name="order" icon="orders-o">订单</VanTabbarItem>

<VanTabbarItem name="me" icon="contact-o">我的</VanTabbarItem>

</VanTabbar>

方法二、局部注册组件（直接在组件中应用）

1、在main.ts中引用样式

import 'vant/lib/index.css'

2、

<script setup lang="ts">

import { Tabbar, TabbarItem } from 'vant'

</script>

<template>

<Tabbar v-model="active">

<TabbarItem name="home" icon="home-o">首页</TabbarItem>

<TabbarItem name="order" icon="orders-o">订单</TabbarItem>

<TabbarItem name="me" icon="contact-o">我的</TabbarItem>

</Tabbar>

</template>

方法三、配置vite 自动按需引入vant组件使用

1 安装插件 unplugin-vue-components

npm i unplugin-vue-components -D

2 在vite.config.js 中配置插件，然后保存运行，左侧目录自动生成一个components.d.ts文件

import Components from 'unplugin-vue-components/vite'

import { VantResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/

export default defineConfig({

plugins: [

vue(),

vueJsx(),

vueDevTools(),

Components({

resolvers: [VantResolver()],

}),

],

3 直接在模板中使用Vant组件

<template>

<van-button type="primary">主要按钮</van-button>

</template>

十、安装插件normalize.css：处理不同浏览器的默认样式

npm install normalize.css

在APP.vue配置

<style scoped>

@import 'normalize.css';

#app {

/* 字体抗锯齿，让字体看起来更清晰 */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

</style>