项目初始化:
需求1:从0新建项目
需求2:分拆组件,创建组件文件
分析:
①:vue命令创建项目(在根目录下运行)
vue create shopcar-deom
②:下载需要得配置:
yarn add less less-loader bootstrap
③:main.js - 引入bootst 样式
// 直接引入 bootstrap 的css文件样式
import 'bootstrap/dist/css/bootstrap.css'
补充:下载时候可能会因为网络出问题
//查看当前源
yarn config get registry
//设置淘宝源或内网源
yarn config set registry https://registry.npm.taobao.org --global
//恢复源
yarn config set registry https://registry.yarnpkg.com --global
准备代码:
MyHeader:
<template>
<div class="my-header">购物车案例</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.my-header {
height: 45px;
line-height: 45px;
text-align: center;
background-color: #1d7bff;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
</style>
MyGoods:
<template>
<div class="my-goods-item">
<div class="left">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input">
<label class="custom-control-label" for="input">
<img src="http://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
</label>
</div>
</div>
<div class="right">
<div class="top">商品名字</div>
<div class="bottom">
<span class="price">¥ 100</span>
<span>
<MyCount></MyCount>
</span>
</div>
</div>
</div