vscode安装git及项目开发过程

阿尔法大米 發表於 2021-3-31 11:47:34

<h2>项目开发</h2>
<h3>项目创建和github托管</h3>
1.下载git链接
2.next完后，打开vscode，文件->首选项->设置->用户配置下加上git安装路径下的Git文件夹下的cmd的git.exe
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390259.png" />
3.去github.com上注册一个账号，并且创建一个新项目，写个项目名称其他默认就好了
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390260.png" />
4.重启vscode，就可以使用git clone ，比如
<div class="jb51code">
<pre class="brush:bash;">
git clone https://github.com/cnhkkat/vuedemomall.git</pre>
</div>
然后vscode上就会出现这个文件夹因为这个项目是空的所以只有一个license
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390261.png" />
！！！现在默认的vue cli 是 4.0.5 版本后续发现有些问题解决不了 
比如 "export ‘default' (imported as ‘Vue') was not found in ‘vue' 
类似的，可以解决终端不报错，但是网页打开还是说 cannot find 。。。。。 
所以为了完成这个项目 
还是回退到3的版本 
所以先
<div class="jb51code">
<pre class="brush:bash;">
npm install -g @vue/cli@3.0.4</pre>
</div>
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390262.png" />
5.然后再用vue create supermall 创建一个项目
6.然后在supermall的终端下
先进行git init 生成.git 文件夹
<div class="jb51code">
<pre class="brush:bash;">
git init</pre>
</div>
然后这时候有的文件夹就会变红如下 
用git status 查看
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390263.png" />
根据提示用 git add . 添加所有的 .文件 
再次查看变绿了
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390364.png" />
因为装完git 没配置所以在这里配置下全局默认ID
<div class="jb51code">
<pre class="brush:bash;">
git config --global user.email "you@example.com"
git config --global user.name "Your Name"</pre>
</div>
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390365.png" />
然后接着
<div class="jb51code">
<pre class="brush:bash;">
git commit -m '初始化项目'
git remote add origin https://github.com/cnhkkat/vuedemomall.git
git push -u origin master</pre>
</div>
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390366.png" /> 
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390367.png" />
他会跳出登录github 登录就可以了
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390368.png" />
push 到master里了 
所以在master里view code就能看到了
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390469.png" /> 
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390470.png" />
<h2>划分目录结构</h2>
新建一些文件夹 
assets 放资源样式比如 img css 而css文件下 normalize.css 初始化基础样式 
common 是公共的比如一些js代码 
components 放组件再分成common文件夹和content文件夹 content主要是业务相关的代码比如MainTabBar 需要经常更改代码的 
network 放网络相关 
router 放路由 
store 放vuex 
views 放视图比如说我的/分类/购物车/首页
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390471.png" />
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390472.png" />
<h2>引入CSS文件</h2>
css里也可以定义变量 –
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390473.png" />
配置别名 
@相当于src
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390574.png" />
<h3>tabbar组件</h3>
从之前写的tabbar 文件夹复制过来
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390575.png" />
content放的是业务相关的，也就是说图标文字可以在这里改，所以放MainTabBar.vue
而common 是公共普通文件放组件
然后复制之前写的views 里面放首页/分类/购物车/我的只是创建一个vue文件并没有写什么 
接着要router-view 渲染出来所以得安装router 
npm install vue-router --save 
然后在router文件下创建index.js 
在这里配置相关代码
导入vue 导入vue-router 
使用VuerRouter 
创建VueRouter的实例 router 在这里放routes 顺便改下mode为history 
把routes抽出来所以定义一下routers = [] 路由就是放路径和组件 
复制之前写的
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390576.png" />
最后一步在main.js里挂载router
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390577.png" />
这样就能在App.vue里使用router-view了 
在这里导入MainTabBar 以及注册MainTabBar 以及使用main-tab-bar 
注意路径问题
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390578.png" />
在MainTabBar里因为是复制过来所以也要注意路径问题！
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390679.png" />
这里使用了两种路径一种是别名 @/ 
一种是绝对路径可能是因为安装了插件会有提示所以感觉两者没有很大差别 
可能在大项目里有很多文件夹如果一直…/…/…/ 不优雅所以会使用别名
另外使用别名这里没显示图标总感觉怪怪的这里安装了image view 这样就能显示图标 
同样注意导入的路径问题
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390680.png" />
然后复制一下ico logo图标
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390681.png" />
<h2>首页开发</h2>
<h3>首页导航栏</h3>
因为每个页面都有导航栏所以在common文件夹下创建navbar文件夹 
然后再创建NavBar.vue （一般文件夹小写 vue文件大写） 
想要实现以下这种样式
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390682.png" />
一般都是分左中右 
所以在插槽外包个div 设置样式使用具名插槽
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390683.png" />
父使用flex布局子使用flex:1 均分高度为44px
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390684.png" />
这里做的是首页的导航栏 
所以在Home.vue里导入NavBar 并且注册它
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390785.png" />
因为只有首页的导航栏背景颜色是粉色其他的导航栏可能是白色 
所以要设置在home里而不能是NavBar里
给nav-bar 搞个class 这样就能单独设置样式 
然后使用插槽名为center
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390786.png" />
var(–color-tint) 是变量背景颜色为粉色字为白色
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390787.png" />
<h3>请求首页的多个数据</h3>
复制之前写的axios 
也就是network文件下的request.js
然后因为要请求首页的多个数据 
为了方便管理url 再封装一层也就是说在network下创建home.js 
因为request.js是自己封装的一个框架是面向这些组件的然后home.js面向home.vue 挺合理
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390788.png" />
之前写到axios里最后返回的是promise
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390789.png" />
promise可以.then 调用数据
所以导入getHomeMultidata 因为是函数所以在（）调用
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390790.png" />
（插播一条 **）关闭eslint 方法
ctrl + p 搜索 eslintrc.js 
注释掉 standard
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390891.png" />
一直报错就hin烦其他解决办法没用记得保存重启
可以成功获得数据
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390892.png" />
函数执行完里面的变量就被销毁了等再次调用就重新创建 
所以在执行完之前要保存数据 
所以在data（）里定义两个空数组 
把数据传给数组
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390893.png" />
打开vue插件可以看到list
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390894.png" />
<h2>轮播图</h2>
直接复制粘贴封装好的 swiper 和 swiperItem 
然后在首页里
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390995.png" /> 
<img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202103/2021033111390996.png" />
到此这篇关于vscode安装git及项目开发过程的文章就介绍到这了,更多相关vscode安装git内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！

 <div class="art_xg">
 您可能感兴趣的文章:<ul><li>vscode更改代码git没有更新问题及解决</li><li>vscode使用git的配置教程</li><li>vscode 远程服务器 上传至 github的操作步骤</li><li>vscode配置gitbash终端的方法步骤</li><li>VScode中集成Git命令详解</li><li>详解vscode使用git所遇到的坑</li><li>VSCode配置Git的方法步骤随记</li><li>在vscode中使用Git的教程</li><li>在VSCode中使用Git进行版本控制的实现步骤</li></ul>
 </div>

 </div>

頁: [1]

琼殿技术论坛's Archiver

vscode安装git及项目开发过程