主要任务:通过vue/cli(脚手架)搭建项目环境,安装插件,配置路由。
? ? ? ? 创建一个文件夹存Vue3-meituan放项目(文件都用英文或数字,不要使用中文),用vscode打开,在该目录下集成终端打开,输入命令? vue create vue3-meituan 创建一个Vue3文件,创建成功后 cd?vue3-meituan,进入vue3-meituan文件夹,使用 npm run serve执行(使用serve还是dev命令是在package.json文件中查看)。
? ? ? ? 这里使用到的插件有rem,less,vant,svg。
? ? ? ? rem适配是可以使页面元素实现等比例缩放的插件
? ? ? ? less预处理器:自己定义函数和变量,并且可以按层级书写样式,比一级一级地写方便
????????vant组件库:在main.js里引入,提供各种组件,方便使用
? ? ? ? 使用方法:根据官网的详细介绍,先下载,然后在main.js里面引入
// 1. 引入你需要的组件
import {?Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';
const app = createApp();
// 3. 注册你需要的组件
app.use(Button)
? ? ? ? svg用来提供图标和图像按钮
? ? ? ? 使用方法:选择一个素材,点击购物车图标,添加至购物车,然后点击购物车,添加至项目(没有项目的话右上角有个文件夹图标,自己创建一个),然后打开上面资源管理,选择我的项目,然后选择Symbol,点击右侧的查看在线连接(需要更新的可以点一下更新),然后点击右上角复制链接。然后再public文件夹下的index.html中引入刚刚的链接,需要自行添加http:
<script src="http:"></script>
使用的时候将#后面换成自己襄阳引用的标签即可。
<svg class="icon" aria-hidden="true">
? ? ? ?<use xlink:href="#icon-xxx">
? ? ? ?</use>
</svg>
? ? ? ? 在集成终端输入 npm i vue-router@4 -s
? ? ? ? 创建路由组件,在src目录创建pages文件夹存放路由文件
? ? ? ? 配置路由文件,在src下创建一个router文件夹,新建index.js文件
? ? ? ? 在根组件App.vue中设置路由出口,然后在src目录创建公共组件存放的文件夹,命名为components,在其目录内新建Footer.vue公共组件,写路由切换的按钮。
? ? ? ? 然后再给footer设置css样式。使用flex布局,使用justify-content:center设置item元素中的各元素居中,flex-flow的作用是使图标和文字垂直分布。
? ? ? ? hash模式与history模式区别? https://www.php.cn/faq/490021.html