大家好，下面将写一系列关于vue商城的全开发过程，记录其中遇到的大大小小问题，以及解决方法，项目已在github上托管，有感兴趣的可以看看vue商城github托管地址
项目准备
github准备
首先登录github，在GitHub上面创建一个仓库
点击加号，新建资料库
按着要求填写项目名称，说明即可，最下方选择MIT许可证，一般都是选择这个许可证，具体看自己吧，.gitignore这个文件就不需要再选择了，当我们在vscode中创建项目的时候，会自动生成这个文件！
然后点击创建即可
然后急着这个地址，在vscode中连接github还需要这个地址
创建项目
在vscode终端中新建一个vue3的项目，本项目将基于vue3进行开发
vue create “项目名称”,然后按照你的需求选择一些配置文件即可，这里不再过多赘述。然后删除其中不需要的文件，比如helloworld.vue文件等等，以及关于helloWorld.vue的相关配置，在app.vue中的一些配置，删除即可
连接github
有两种方法可以连接GitHub，第一种直接克隆下来github刚刚那个仓库
git clone ‘address’ 把刚刚仓库的地址写在上面，在vscode终端中执行这条指令即可，当然前提是你需要安装git，这个安装过程就不再详细说明了。可以自行百度。然后再接着执行 “git add .” 添加所有文件，然后执行git commit -m ‘描述’ 提交到本地，再执行 “ git push ”提交到仓库即可，中间需要你输入github的账号密码，按提示输入即可！然后刷新一下仓库，你会发现里面已经有你创建项目的目录了。
第二种方法：在vscode终端进入到项目那个目录下，执行git remote add origin ‘address’ ，再执行git push -u origin master 即可！
划分项目目录结构
初始的目录结构相当简单，但是我们开发过程中，不可能把所有东西都随意放置，否则开发过程中寻找一些文件，或者更改一些东西将会十分头疼，也不便于后期的维护！所以一个好的项目结构是必须的！
assets
在这个结构下，我们需要新建两个文件夹，css和img文件夹，用于存放css和img的一些资源，当然在放置css和img文件的时候，里面也需要再按照开发需求接着创建一些文件，后面开发过程中将会接着说！
views
components这个文件夹我们一般放一些公共的组件，如果把所有的组件都放到components里面，那么维护起来可能相当困难，所以我们可以在src目录下新建一个views文件夹，里面主要放一些大的视图，比如home和category等等这些。
components
在components文件夹中，我们再细分一下，创建common和content文件夹，common主要放一些公共的组件，或许也可以在另外的项目中使用这些组件，content文件主要存放一些当前项目的一些组件，这样可以便于以后的使用！
router，store
新建一个router和store文件夹，如果router文件有的话就不需要了，里面主要存放路由祥光的东西，store文件夹主要存放vuex这些项目状态管理的文件。
network
在src下创建network文件夹，主要存放一些网络相关的文件夹。
common
这个在src目录下创建，主要放一些公共的js文件，比如存放一些常量，抽出来放到const.js文件里面，或者开发过程中封装的一些工具类utils.js，一些混入的东西放到mixin.js中。
editorconfig
在主目录下创建这个文件，里面配置一些开发的标准
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
css
在assets文件夹中的css文件夹中，引入normalize.css文件，在github上面有这个文件，使用很多，可以在github自行下载。再建一个base.js文件，这个文件可以设置一些基本的样式内容！
项目的大致目录基本创建完成了
