正文

vue3微信公众号商城项目实战系列项目初始文件及文件夹简介

屏风马  屏风马  2023-04-15  513

关键词：

首先我们来看下项目的文件结构图，如下：

各个文件及文件夹作用如下：

文件或文件夹名称	作用
.vscode	VisualStudioCode开发工具的配置信息存放目录，从这个目录可以看出vue3确实是推荐使用vscode作为开发工具的。
node_modules	项目中用到的包存放目录，当我们用 "npm install 包名" 安装包之后，该包的代码文件就下载到这个目录下。
public	公共资源存放目录，比如图片、配置文件等可以集中放在这里方便后续管理。
src	项目源代码存放目录
src/assets	资源存放目录，比如图片、CSS文件等，和public不同的是，存放在assets文件夹中的资源在引用的方式上有区别，后面再具体讲。
src/components	页面和组件存放目录（一个页面可能包含0或多个组件，他们都以.vue为后缀名）。为了便于区分页面和组件，一般会在src文件夹下新建一个views的文件夹来存放页面，而components专门放组件。
src/components/icons	存放svg格式的图标
.gitignore	这是版本管理工具使用的文件，用来定义项目中那些文件不需要进行版本管理，如果不使用git可以删除这个文件。
index.html	网站的页面文件，全站有且仅有这一个html页面，这样的web项目也称 SPA（Single Page Application），即单页应用。 index.html页面中有一个div元素，当跳转其他页面的时候，其本质是 vue3框架将目标页面的html内容获取后设置成该div的innerHTML（注意：vue3中的页面以 .vue为后缀名而不是.html），在页面不刷新的情况下完成页面内容的替换，同时vue3还负责修改网址等，给用户的感觉就是从一个页面跳转到另外一个页面了。index.html只充当所有页面的容器，不管项目增加什么功能，这个文件几乎都不需要修改（这里用了几乎一词，后面涉及到修改的情况我们再讲）。
package.json	管理项目引用的js包，使用npm指令安装的包会记录到这个文件中。
package-lock.json	记录node_modules目录下所有包（也可称为模块）的名称、版本号、下载地址、运行环境、及这个包又依赖了哪些依赖等。该文件是在npm5之后出现的，因为 package.json只锁定了包的大版本号(版本号第一位)，当我们重新使用npm install 拉取包的时候会下载大版本下的最新小版本，为了稳定性考虑，很多时候我们并不想升级小版本，package-lock.json能帮我们锁定版本不升级，另外，package.json不会记录包依赖的其他包信息，而package-lock.json会。如果我们想安装指定版本的包该怎么做呢？只需要在包名后加上"@x.x.x" 就可以了，x.x.x表示具体版本号，和包名之间用@ 隔开，形如： npm install package@3.2.1
vite.config.js	项目配置信息

项目中还有几个文件，比如 main.js、App.vue 等我们没有涉及到。

在下一篇中我们会讲怎么修改这些文件，并完成从一个页面跳转到另一个页面这个最基本的操作。

vue3微信公众号商城项目实战系列开发环境准备

...忙完，这次上新，写一个前端系列，采用vue3来开发一个微信公众号商城。前言：1.微信公众号商城本质也是一个网站，由一个个网页组成，只不过这些网页运行在手机端，能响应手指的点击、长按、拖拽等操作。2.既然是网页，... 查看详情

爬虫实战项目集合

WechatSogouhttps://github.com/Chyroc/WechatSogou微信公众号爬虫。基于搜狗微信搜索的微信公众号爬虫接口，可以扩展成基于搜狗搜索的爬虫，返回结果是列表，每一项均是公众号具体信息字典。DouBanSpiderhttps://github.com/lanbing510/DouBanSpider豆... 查看详情

微信小程序入门与实战常用组件api开发技巧项目实战

...个很实用的教程，并且讲师的声音也是超级好听哦！学习微信小程序，不是学习JavaScript也不是学习CSS，而是学习小程序的“MINA”框架。这个框架为小程序的运行提供了丰富的组件和API。通过本课程一系列实战，你将学会... 查看详情

超全108套项目实战大集合

课程目录智能社node响应式网页制作实战项目微信小程序开发视频教程整理网易云python思维导图实战Java高并发程序设计7天搞定Node.js微信公众号开发前端小白入门系列课程完整版PHP从基础语法到原生项目开发【完整版】HTMl5与CSS3... 查看详情

小程序项目实战—购物商城微信小程序

购物商城微信小程序代码仓库https://github.com/ChangYanwei/shopMiniProgram学习资料：https://www.bilibili.com/video/BV1RK4y1v7zvAPI接口文档API接口技术点自定义组件组件之间的通信购物车页面的逻辑将发送网络请求的API封装为Promise形式的等等... 查看详情

微信公众号项目(公众号关注登录网站)

...录目录资料地址资料说明课程内容云盘资料概览资料地址微信公众号项目(公众号关注登录网站)资料说明项目是基于微信公众号完成的，需要学习公众号项目开发的同学，可以参考。资料包含完整源码、和视频教程，... 查看详情

微信公众号项目(公众号关注登录网站)

关于ionic3做微信公众号

前段时间用ionic3做了一个微信商城，收尾的时候好多问题，就推翻了。。谈一下我的感想吧ionic3深度定制的一套框架，刚开始我的3.0.1当时还可以进行browser端的build,到最近3.6.0版本取消这个端的build命令，导致项目没有办法aot和pr... 查看详情

精通系列springboot集成elasticsearch+项目实战(代码片段)

Java之ElasticSearch7.x.x+SpringBoot+爬虫+项目实战【一篇文章精通系列】【SpringBoot集成ElasticSearch+项目实战】一、ElasticSearch的Java官方文档1、查看官方文档2、找到了原生的依赖3、初始化二、创建SpringBoot项目1、创建项目2、... 查看详情

项目实战旅游系统(vue3+pinia+vite)----项目配置(代码片段)

1.创建项目 npminitvue@latest 这里我全部都是选择的NO是为了回顾router和pinia的配置然后npminstall安装一下依赖，用npmrundev运行2.划分目录结构 assets----存放文件资源(css/img/font... 查看详情

项目实战旅游系统(vue3+pinia+vite)----项目配置(代码片段)

公众号开发vue项目微信授权一直不通过

参考技术A微信公众号开发，需要通过微信授权，但是使用vue开发到项目，默认域名一般是http://localhost:8080/....因为域名的原因微信就无法通过授权了解决方案： 1.在vue.config.js 文件中添加代理配置项将host：‘localhost... 查看详情

亿级高并发电商项目--实战篇--万达商城项目十（安装与配置elasticsearch和kibana编写搜索功能向es同步数据库商品数据）(代码片段)

亿级高并发电商项目--实战篇--万达商城项目搭建一（商家端与用户端功能介绍、项目技术架构、数据库表结构等设计）亿级高并发电商项目--实战篇--万达商城项目搭建一（商家端与用户端功能介绍、项目技术架构、... 查看详情

亿级高并发电商项目--实战篇--万达商城项目十（安装与配置elasticsearch和kibana编写搜索功能向es同步数据库商品数据）(代码片段)

微信公众号怎么添加消息服务按钮

...打开公众平台网址，输入已注册服务号的账号密码，登陆微信服务号；找到“功能”菜单下的“自定义菜单”栏，点击“启用”自定义菜单栏；2、找到“菜单管理”项，点击“菜单管理”项右侧的“+”号图标，即可添加自定义... 查看详情

公众号系列浅谈sap项目管理的技能

公众号：SAPTechnical本文作者：matinal原文出处：http://www.cnblogs.com/SAPmatinal/原文链接：【【公众号系列】浅谈SAP项目管理的技能写在前面在SAP领域里，职业发展中一个比较普遍的方向就是项目经理，无论你是做业务顾问还是开... 查看详情

《果然新鲜》电商项目（18）-搭建企业级微信公众号

...在上一节《果然新鲜电商项目（17）-搭建企业级微信公众号》，主要讲解如何搭建微信公众号，以及WxJava案例的使用。本文开始讲解如何把WxJava框架整合到我们的项目。2.微信公众号开发原理在上一篇博客，我... 查看详情