vue3项目实战-创建，基础配置，路由设置，页面静态结构搭建

项目创建

由于我昨天进行了git的安装与配置，导致命令行几乎是崩溃的，在这里我重新安装了node环境，最新的版本是20.0的，虽然版本有点高，但不影响使用

可以采用如下代码来创建项目，

npm init vue@latest

这些配置项需要根据自己的需求来选择

完成之后，需要安装一些基本的配置

直接运行在控制台提示的代码即可，完成之后，启动项目即可。

目录调整

在src目录下新增以下文件夹：

1utils：存放一些通用的工具函数、常量或者配置信息

2styles：存放全局样式文件

3apis,存放API接口文档

4directives：存放全局指令的文件夹

5composables:存放组合函数或通用的逻辑函数的文件夹

调整之后，整个项目的目录如下所示：

完成之后，通过git进行管理

Element-Plus组件按需引入

项目中的组件分为两种，

1通用型组件（Element-plus）dialog模态框，在任何时候都可以使用

2业务定制化组件（手写）如 商品热榜组件，在特定的页面中进行渲染使用

在这里，我们使用到的组件库是element,在使用之前需要先导入，具体怎么导入呢？

首先，我们来到官网，一个 Vue 3 UI 框架 | Element Plus

根据官方文档，我们需要先安装element库

可以执行以下代码来安装

npm install element-plus –save

为了便于大家确认是否已经安装好，在这里贴上运行结果：

安装好之后，如果要实现自动按需引入的话还需要我们安装两个插件，直接执行下列代码即可，

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

那么，我们怎么判断是否生效了呢？

可以在emement组件库中拿出来一个组件，然后放在app.vue中，在浏览器上查看运行结果，如果跟预期一致，则说明安装并配置成功

运行结果如下，

主题颜色定制

在这里引入一个新的知识点，scss，它 是用来编写样式的一种预处理器。

在使用之前，我们需要先安装

npm i sass -D

安装成功后，在package.json中可以看到其版本信息：

那么，我们怎么使用呢？

需要在style下新建文件夹element,然后新建index.scss，加入颜色配置代码：（这些代码不唯一，颜色可以自己设置）

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors:(
    'primary':(
      'base': #27ba9b,
    ),
    'success': (
      'base': #1dc779
    ),
    'warning': (
      'base':#ffb302
    ),
    'danger':(
      'base': #f5222d
    ),
    'error':(
      'base': #cf4444
    )
    )

    )

完成之后，在vite.config.js中修改如下代码：

完成之后，怎么验证是否成功了呢？

重启项目，运行之后，可以看到按钮的颜色发生了变化

Axios基础配置

虽然axios的相关配置我在之前的文章中讲到过，但在这里还是提一下，以便加深印象

首先，安装axios

npm install axios

紧接着，在utils下新建了http.js，配置axios实例对象

import  axios from 'axios'
const httpInstance = axios.create({
  baseURL:  'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})
//请求拦截器
httpInstance.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  return config;
}, function(e) {
  // 对请求错误做些什么
  return Promise.reject(e);
});
// 添加响应拦截器
httpInstance.interceptors.response.use(function(res) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return res.data;
}, function(e) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(e);
});
export default httpInstance

然后，在apis下封装接口：

import httpInstance from "@/utils/http";
export function getCategory () {
  return httpInstance({
    url:  '/home/category/head'
  })
}

最后，在main.js中对接口进行了测试，

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

启动项目，运行，可以看到在浏览器中返回了结果：

补充一点内容，如果在项目中不同的业务模块使用的接口基地址不同，那么我们怎么处理呢？

axios.create()方法允许执行多次，每次执行会生成一个新的实例，所以，我们不用担心，每次传入不同的基地址即可，如下所示：

路由配置

一级路由

在这里，先解释一下什么是一级路由，什么是二级路由，所谓一级路由，是指点击时，整个页面都会发生改变，例如登录和首页，注册页等等，二级路由指的就是点击时，页面的部分内容会发生变化，整个页面不会发生变化。

在views下面新建三个文件夹

建好之后，往其中放入一些基本组件，

打开router下面的index.js来配置路由

先导入三个组件：

配置：

配置好之后，在app.vue中设置路由出口

二级路由

配置的方法跟一级路由差不多，要使用关键字children

同样，需要设置路由出口

配置好之后，就可以在地址栏随意切换显示的页面

SCSS文件自动引入

在styles文件夹下新建var.scss文件

首先，添加一些基本的颜色配置

在app.vue中配置并使用。

字体图标引入

在本项目中，使用的是阿里的iconfont字体图标库，贴上官网地址

iconfont-阿里巴巴矢量图标库

进入官网后，帮助-代码应用，一直往下翻，找到font-class引用，

根据以上步骤，配置使用即可

一级导航列表渲染

在这里，我们需要调用接口，根据后台拿到的数据来进行渲染，所以，首先需要我们在apis下新建layout.js来封装接口，代码如下

在stores下面新建category.js文件，调用接口，拿到数据

然后，在对应的位置渲染出来

渲染之前，先要导入

吸顶导航交互实现

一般的页面，如果我们不设置吸顶交互的话，顶部导航栏不会随着用往下翻内容而固定在顶部，而是不会显示出来，为了带给用户更好的体验，我们需要设置这一效果，在顶部导航栏一直固定在页面最上方，便于用户根据自己的需要点击进入对应的商品页面。

步骤有三步

1准备吸顶导航组件，

这里，跟一般的导航组件是差不多的，详细代码不再赘述。

2获取滚动距离，

在这里使用到了一个新的第三方库，vueuse,官网地址也贴在这里，

VueUse中文文档

我们可以使用其中的一个叫useScroll的函数来获取滚动距离

在使用之前，需要先引入

它从该方法中解构出了四个参数，因为我们是在纵向控制显示隐藏，所以只用到了参数y，这个y可以根据我们的意愿随意设置，70-90为佳。

3以滚动距离做判断条件控制组件盒子

在这里，需要依据前两步的结论来进行配置，可以通过新添加类名来控制透明度，所占比例等属性，进而实现显示隐藏的效果。详细代码在这里也不再赘述。

好啦，今天的内容就到这儿了，未来一周会持续更新项目制作过程中遇到的问题和整体的思路，下期见~