1.项目初始化
创建项目时需要注意下面选项
2.项目具体介绍
用VSCode打开项目后，下载 ESLint 和 Vetur 插件
（1）ESlint：在编码时可以给我吗一些语法上的提示
（2）Vetur：帮助我们识别vue中的语法，让vue中的单文件组件能高亮地显示出来
（3）node_modules:存放vue中的依赖包，第三方的模块
若是不小心删除了，想要重新获取，可在终端使用npm install命令，npm install 会安装package.jason中的依赖，在安装依赖的时候会将这些依赖放入到node_modules中
（4）public目录：存放默认的html模板
（5）README.md：项目的一些描述性内容
（6）package-lock.jason：保证多人协作，反复安装依赖时一个固定的版本
（7）src最重要，源代码目录，main.js程序入口
3.基础样式集成和开发模拟器的使用
1.在终端输入
npm install normalize.css --save
:统一不同浏览器之间的样式差异
2.在main.js文件中引入normalize
import 'normalize.css'
3.在src文件夹下创建一个名为style的文件夹
在文件夹style下创建一个文件，命名为base.css,内容编写如下
html{
font-size: 100px;
}
// 1rem = html fontsize = 100px
body{
font-size: .12rem;
}
在main.js文件中引入base.css
import './style/base.css'
main.js代码如下
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/base.css'
createApp(App).use(store).use(router).mount('#app')
首页开发
1.底部Docer开发
（1）在components文件下创建DockerV.vue，表示新建一个组件
其中需要的小图标可以去iconfont官网找到，在style文件夹下创建一个iconfont.css文件，将从iconfont官网获取的文件中粘贴代码
*若是iconfont项目图标库有更新使用，这里的代码也要记得更新
iconfont.css
@font-face {
font-family: 'iconfont'; /* Project id 3220603 */
src: url('//at.alicdn.com/t/font_3220603_9vci4ti956.woff2?t=1648890516449') format('woff2'),
url('//at.alicdn.com/t/font_3220603_9vci4ti956.woff?t=1648890516449') format('woff'),
url('//at.alicdn.com/t/font_3220603_9vci4ti956.ttf?t=1648890516449') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: .16rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
然后在main.js中可引入iconfont.css文件
DockerV.vue代码
<template>
<div class="docker">
<!--BEM block element Modifier
block__element--Modifier -->
<div
v-for="(item,index) in dockerList"
:class="{'docker__item':true,'docker__item--active':index===currentIndex}"
class="docker__item "
:key="item.icon"
>
<router-link :to="item.to">
<div class="iconfont" v-html="item.icon" />
<div class="docker__title">{{item.text}}</div>
</router-link>
</div>
</div>
</template>
<script>
export default {
name:'DockerV',
props:['currentIndex'],
setup(){
const dockerList = [
{icon:'',text:'首页',to:{name:'Home'}},
{icon:'',text:'购物车',to:{name:'CartList'}},
{icon:'',text:'订单',to:{name:'OrderList'}},
{icon:'',text:'我的',to:{name:'Home'}}
];
return {dockerList}
}
}
</script>
<style lang="scss" scoped>
@import '../style/viriables.scss';
@import '../style/mixins.scss';
.docker{
display: flex;
box-sizing: border-box;
position: absolute;
padding: 0 .18rem;
left: 0;
bottom: 0;
width: 100%;
height: 0.49rem;
border-top:.01rem solid $content-bgcolor ;
&__item{
flex: 1;
text-align: center;
a{
color: $content-fontcolor;
text-decoration: none;
}
.iconfont{
margin: .07rem 0 .02rem 0;
font-size: .18rem;
}
&--active{
a{
color: #1FA4FC;
}
}
}
&__title{
font-size: .2rem;
transform: scale(0.5, 0.5);
transform-origin: center top;
}
}
</style>
（2）其中，基础的css文件可以单独创建一个文件
在style文件夹下面创建一个index.css文件
index.css
@import './base.scss';
@import './iconfont.css';
然后将index.css引入main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/index.scss'
createApp(App).use(store).use(router).mount('#app')
（2）可使用v-for，v-html指令来精简代码减少冗余
2.首页部分代码如下
（1）HomeV.vue,
注意在使用其他组件时要记得引入和注册组件
<script>
import StaticPart from './StaticPart.vue';
import NearbyV from './NearbyV.vue';
import DockerV from '../../components/DockerV.vue';
export default {
name:'HomeV',
components:{StaticPart,NearbyV, DockerV}
}
</script>
首页整体代码
<template>
<div class="wrapper">
<StaticPart />
<NearbyV />
</div>
<DockerV :currentIndex='0' />
</template>
<script>
import StaticPart from './StaticPart.vue';
import NearbyV from './NearbyV.vue';
import DockerV from '../../components/DockerV.vue';
export default {
name:'HomeV',
components:{StaticPart,NearbyV, DockerV}
}
</script>
<style lang="scss">
.wrapper{
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: .5rem;
right: 0;
padding: 0 .18rem .3rem .18rem;
}
</style>
（2）NearbyV.vue 附近部分代码
<template>
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<router-link
v-for="item in nearbyList"
:key="item._id"
:to="`/shop/${item._id}`"
>
<ShopInfo :item="item" />
</router-link>
</div>
</template>
<script>
import {ref} from 'vue';
import { get } from '../../utils/request';
import ShopInfo from '../../components/ShopInfo.vue'
const useNearbyEffect = ()=>{
const nearbyList = ref([]);
const getNearbyList = async ()=>{
const result = await get('/api/shop/hot-list');
if(result?.errno === 0 && result?.data?.length){
nearbyList.value = result.data;
}
}
return {nearbyList,getNearbyList}
}
export default {
name:'NearbyV',
components:{ ShopInfo },
setup(){
const {nearbyList,getNearbyList} = useNearbyEffect();
getNearbyList();
return { nearbyList }
},
}
</script>
<style lang='scss'>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.nearby{
&__title{
margin: .16rem 0 .02rem;
font-size: .18rem;
font-weight: normal;
color: $content-fontcolor;
}
a{
text-decoration: none;
}
}
</style>
（3）StaticPart.vue中间详情部分代码
<template>
<div class="position">
<span class="iconfont position__icon"></span>
南华大学雨母校区三省园5栋
<span class="iconfont position__notice"></span>
</div>
<div class="serch">
<span class="iconfont"></span>
<span class="serch__text">屈臣氏部分美妆六折起</span>
</div>
<div class="banner">
<img
class="banner__img"
src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
/>
</div>
<div class="icons">
<div
v-for="item in iconList"
class="icons__item"
:key="item.desc"
>
<img
class="icons__item__img"
:src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"
/>
<p class="icons__item__desc">{{item.desc}}</p>
</div>
</div>
<div class="gap"></div>
</template>
<script>
export default {
name:'StaticPart',
setup(){
const iconList = [
{ imgName:'超市',desc:'超市便利' },
{ imgName:'菜市场',desc:'菜市场' },
{ imgName:'水果店',desc:'水果店' },
{ imgName:'鲜花',desc:'鲜花绿植' },
{ imgName:'医药健康',desc:'医药健康' },
{ imgName:'家居',desc:'家居时尚' },
{ imgName:'蛋糕',desc:'烘培蛋糕' },
{ imgName:'签到',desc:'签到' },
{ imgName:'大牌免运',desc:'大牌免运' },
{ imgName:'红包',desc:'红包套餐' },
];
return {iconList}
}
}
</script>
<style lang="scss">
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.position{
position: relative;
padding: .16rem .24rem .16rem 0 ;
line-height: .22rem;
font-size: .16rem;
@include ellipsis;
.position__icon{
position: relative;
top: .01rem;
font-size: .2rem;
}
.position__notice{
position: absolute;
right: 0;
top: .17rem;
font-size: .2rem;
}
color: $content-fontcolor;
}
.serch{
margin-bottom: .12rem;
vertical-align: middle;
line-height: .32rem;
background: $search-bgColor;
color: $search-fontColor;
border-radius:.16rem ;
.iconfont{
display: inline-block;
padding: 0 .08rem 0 .16rem;
font-size: .16rem;
}
&__text{
display: inline-block;
font-size: .14rem;
}
}
.banner{
height: 0;
overflow: hidden;
padding-bottom: 25.4%;
&__img{
width: 100%;
}
}
.icons{
display: flex;
flex-wrap: wrap;
margin-top: .16rem;
&__item{
width: 20%;
&__img{
display: block;
width: .4rem;
height: .4rem;
margin: 0 auto;
}
&__desc{
margin: .16rem 0 .16rem 0;
text-align: center;
color: $content-fontcolor;
}
}
}
.gap{
margin: 0 -.18rem;
height: .1rem;
background: $content-bgcolor;
}
</style>
（4）Docker.vue见上面
css作用域约束，一个组件内的样式只作用与这一个组件，不会影响到外部的组件
<style lang="scss" scoped>
首页实现界面
首页.png
