vue商城项目(一)之项目初始化以及目录划分

大家好,下面将写一系列关于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文件,这个文件可以设置一些基本的样式内容!

项目的大致目录基本创建完成了
在这里插入图片描述

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页