一:安装vue-cli 构建项目
d:\vuetest2\fecmall
1.
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.
vue create fecmall
# OR
vue ui
cd fecmall
npm install --save @storefront-ui/vue
npm run serve
4.We recommend putting it in your main.js
import "@storefront-ui/vue/styles.scss";
5.public/index.html文件添加,详细参看:
https://docs.storefrontui.io/?path=/docs/getting-started-installation--page#install-custom-font
6.
在页面组件HelloWorld.vue中添加
<template>
<div>
<SfAddToCart :disabled="false" v-model="qty" />
<button class="color-primary sf-button" :aria-disabled="false" link="">
Shop now
</button>
</div>
</template>
<script>
import { SfAddToCart } from "@storefront-ui/vue";
export default {
data : function (){
return {qty : 1};
},
components: {
SfAddToCart ,
},
methods : {
},
};
</script>
参考:
https://blog.logrocket.com/ecommerce-storefront-ui-tailwind-css/