Vue.js 超详细入门与项目实战（微课视频版）课件 第12章 项目开发前准备

第12章项目开发前准备课件V1.0

教学内容第一节

功能设计第二节项目开发第三节

打包与发布知识目标教学目标理解和掌握项目功能设计的方法掌握项目开发的流程和配置过程理解和掌握开发和发布打包的流程知识点预览#节知识点难点重点应用12C12-01功能设计1、项目背景

2、需求分析3、功能模块C12-02项目开发1、创建项目2、配置静态资源3、数据源设计C12-03打包与发布1、开发与打包方法2、发布时注意事项时代背景一个好的项目一定会与当前主流的价值观相匹配，是顺应时代发展方向的。随着在线支付和快递体系的成熟与完善，电商产品已成为各个销售型公司必不可少的项目。技术分析web技术通过自身的灵活性，借助Vue3+Vant4框架，既可以快速开发PC端的web应用，又可以适配各种移动终端，形成webapp应用，极大地满足了各类移动端客户群体的需求，是开发电商产品的首选技术方案。未来前景借助各大电商平台开设的店铺，成本高，灵活性更差，可拓展性不强，并受到各种功能限制，无法做成自己设计的产品，如果通过web技术，开发适合自身产品特点电商项目，这些问题将迎刃而解。项目背景需求获取需要满足用户在移动终端购物的需求，通过互联网发布开发的web应用，用户访问指定地址，并登录网站，选择或查询商品，放入购物车中，完成结算后形成订单，个人用户可以在用户中心查看自己的订单信息和状态。需求分类用户在产品中的需求分为分类浏览、查看详细、放入购物车，付款结算和订单查询功能，此外，为了增加用户在产品中的粘性，还增加了业内动态推荐，动态查看、收藏和点赞的功能，用户可以在用户中心查看自己收藏的动态信息，并可以取消收藏。核心需求电商项目的核心需求是购买产品，那么，项目围绕这一个核心需求实现的功能是推荐产品、产品分类、产品详细、购物车、结算订单和订单查看，其余功能前期可搭建框架，完成基本功能，不做深入扩展。需求分析电商项目功能模块图功能模块

1.

创建一个Vue3框架的项目，需要先安装vue-cli工具，打开电脑终端或命令提示符，输入npminstall-g@vue/cli指令，安装5.0以上版本的vue-cli工具。

2.

安装成功后，再输入vue--version指令查看安装的版本号。

3.

输入vuecreatevue3shop指令，创建一个名称为vue3shop的项目。

4.

进入名称为vue3shop的项目文件夹中，安装本项目所需要的依赖模块。说明：依赖模块@vant/area-data用于订单中地址地区数据的选择，pinia用于项目的全局数据

管理，pinia-plugin-persist用于pinia全局数据的缓存，vant是用于页面移动端开发的框架，

vue-router是用于项目的路由管理和配置。创建项目项目创建完成并安装所需要的依赖模块后，接下来需要配置文件夹，首先是静态资源文件夹的设置，本项目中所有的图片资源全部放置在assets文件夹下的images文件夹中，在images文件夹，根据所需求图片的类型，再创建对应的子类文件夹。配置静态资源除配置静态资源外，公用的方法也可以放置在一个指定的文件夹下，本项目中全部的公用函数或方法都放置在名称为utils的文件夹下，如下图12-7所示。配置静态资源本项目侧重于Vue3+Vant4构建移动端的电商项目，重点是页面开发和功能逻辑的实现，因此，项目的数据全部来源于静态的JSON格式对象，该对象中包含产品、分类和动态的全部数据，全局性的购物车、收藏和订单数据由pinia模块保存，静态的数据源放置在data文件夹下的shop.js文件中。数据源设计开发过程中，程序员需要验证开发效果，可以在项目文件夹下，执行npmrunserve指令，执行后，将自动编译源代码，启动浏览器，查看编译后的页面效果，并在浏览器中跟踪数据和调试页面元素。开发与打包方法如果项目编译成功，则可以在项目文件夹下，执行npmrunbuild指令，打包该项目，通常情况下，打包后的代码放置在名称名为dist的文件夹下，可以直接启动该文件夹下的index.html文件，查看打包后的页面效果，还可以将该文件夹发布到服务器中，通过形成的地址查看项目发布后的效果。

开发与打包方法打包完成后，自动生成一个名称为dist的文件夹，用于保存打包生成的代码。开发与打包方法虽然打包后的文件夹可以直接发布到服务器中，