学习历程--Vue3仿美团项目笔记

1 第一天 

主要任务：通过vue/cli(脚手架)搭建项目环境，安装插件，配置路由。

1.1 环境搭建

        创建一个文件夹存Vue3-meituan放项目（文件都用英文或数字，不要使用中文），用vscode打开，在该目录下集成终端打开，输入命令  vue create vue3-meituan 创建一个Vue3文件，创建成功后 cd vue3-meituan，进入vue3-meituan文件夹，使用 npm run serve执行（使用serve还是dev命令是在package.json文件中查看）。

1.2 安装插件

        这里使用到的插件有rem，less，vant，svg。

        1.2.1 rem适配

        rem适配是可以使页面元素实现等比例缩放的插件

        1.2.2 less预处理器

        less预处理器：自己定义函数和变量，并且可以按层级书写样式，比一级一级地写方便

        1.2.3 vant组件库

        vant组件库：在main.js里引入，提供各种组件，方便使用

        使用方法：根据官网的详细介绍，先下载，然后在main.js里面引入

// 1. 引入你需要的组件

import { Button } from 'vant';

// 2. 引入组件样式

import 'vant/lib/index.css';

const app = createApp();

// 3. 注册你需要的组件

app.use(Button)

        1.2.4 svg 阿里巴巴矢量图

        svg用来提供图标和图像按钮

        使用方法：选择一个素材，点击购物车图标，添加至购物车，然后点击购物车，添加至项目（没有项目的话右上角有个文件夹图标，自己创建一个），然后打开上面资源管理，选择我的项目，然后选择Symbol，点击右侧的查看在线连接（需要更新的可以点一下更新），然后点击右上角复制链接。然后再public文件夹下的index.html中引入刚刚的链接，需要自行添加http：

<script src="http:"></script>

使用的时候将#后面换成自己襄阳引用的标签即可。

<svg class="icon" aria-hidden="true">

       <use xlink:href="#icon-xxx">

       </use>

</svg>

1.3 模块化路由

        1.3.1 安装路由

        在集成终端输入 npm i vue-router@4 -s

        1.3.2 创建路由组件

        创建路由组件，在src目录创建pages文件夹存放路由文件

        1.3.3 配置路由文件

        配置路由文件，在src下创建一个router文件夹，新建index.js文件

        1.3.4 设置路由出口

        在根组件App.vue中设置路由出口，然后在src目录创建公共组件存放的文件夹，命名为components，在其目录内新建Footer.vue公共组件，写路由切换的按钮。

        然后再给footer设置css样式。使用flex布局，使用justify-content：center设置item元素中的各元素居中，flex-flow的作用是使图标和文字垂直分布。

        补充：

        hash模式与history模式区别  https://www.php.cn/faq/490021.html