使用vue-cli实现购物车和地址选配功能

深藏阁楼爱情的钟 2021-07-24 18:41 319阅读 0赞

**一 项目目录结构**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

**二 项目地址**

[https://github.com/cakin24/vue-cli-shoppingcart][https_github.com_cakin24_vue-cli-shoppingcart]

**三 关键文件解读**

1 src\\main.js

项目核心文件。

2 src\\App.vue

项目入口文件，是主组件。

3 src\\components\\shoppingcart.vue

订单子组件

4 src\\components\\cart.vue

地址栏子组件

**四 运行方法**

1 安装依赖

安装NPM依赖：npm install

2 开发环境

启动项目：npm run dev

浏览器预览：localhost:8080

3 生产环境

启动项目打包：npm run build

**五 运行结果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

**六 视频地址**

[https://www.imooc.com/learn/796][https_www.imooc.com_learn_796]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/5cf2433efd4b49468942b6d64a849a0d.png
[https_github.com_cakin24_vue-cli-shoppingcart]: https://github.com/cakin24/vue-cli-shoppingcart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/273eb134eb4643a1a1c4666b6c8e1dab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/08b95e9f155c4687bdcae62e281c6361.png
[https_www.imooc.com_learn_796]: https://www.imooc.com/learn/796