vscode安装git及项目开发过程

项目开发

项目创建和github托管

1.下载git链接

2.next完后,打开vscode,文件->首选项->设置->用户配置下加上git安装路径下的Git文件夹下的cmd的git.exe

3.去github.com上注册一个账号,并且创建一个新项目,写个项目名称其他默认就好了

4.重启vscode,就可以使用git clone ,比如

git clone https://github.com/cnhkkat/vuedemomall.git

然后vscode上就会出现这个文件夹 因为这个项目是空的 所以只有一个license

!!!现在默认的vue cli 是 4.0.5 版本 后续发现有些问题解决不了
比如 "export ‘default' (imported as ‘Vue') was not found in ‘vue'
类似的 ,可以解决终端不报错,但是网页打开还是说 cannot find 。。。。。
所以为了完成这个项目
还是回退到3的版本
所以先

npm install -g @vue/cli@3.0.4

5.然后再用vue create supermall 创建一个项目

6.然后在supermall的终端下

先进行git init 生成.git 文件夹

git init

然后这时候有的文件夹就会变红 如下
用git status 查看

根据提示 用 git add . 添加所有的 .文件
再次查看 变绿了

因为装完git 没配置 所以在这里配置下全局默认ID

git config --global user.email "you@example.com"
 git config --global user.name "Your Name"

然后接着

git commit -m '初始化项目'
git remote add origin https://github.com/cnhkkat/vuedemomall.git
git push -u origin master


他会跳出登录github 登录就可以了

push 到master里了
所以在master里view code就能看到了


划分目录结构

新建一些文件夹
assets 放资源样式 比如 img css 而css文件下 normalize.css 初始化 基础样式
common 是公共的 比如一些js代码
components 放组件 再分成common文件夹和content文件夹 content主要是业务相关的代码 比如MainTabBar 需要经常更改代码的
network 放网络相关
router 放路由
store 放vuex
views 放视图 比如说 我的/分类/购物车/首页

引入CSS文件

css里也可以定义变量 –

配置别名
@相当于src

tabbar组件

从之前写的tabbar 文件夹 复制过来

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 = [] 路由就是放路径和组件
复制之前写的

最后一步在main.js里挂载router

这样就能在App.vue里使用router-view了
在这里导入MainTabBar 以及注册MainTabBar 以及使用main-tab-bar
注意路径问题

在MainTabBar里 因为是复制过来所以也要注意路径问题!

这里使用了两种路径 一种是别名 @/
一种是绝对路径 可能是因为安装了插件 会有提示所以感觉两者没有很大差别
可能在大项目里有很多文件夹 如果一直…/…/…/ 不优雅 所以会使用别名

另外使用别名这里没显示图标 总感觉怪怪的 这里安装了image view 这样就能显示图标
同样注意导入的路径问题

然后复制一下ico logo图标

首页开发

首页导航栏

因为每个页面都有导航栏 所以在common文件夹下创建navbar文件夹
然后再创建NavBar.vue (一般文件夹小写 vue文件大写)
想要实现以下这种样式

一般都是分左中右
所以 在插槽外包个div 设置样式 使用具名插槽

父使用flex布局 子使用flex:1 均分 高度为44px

这里做的是首页的导航栏
所以在Home.vue里 导入NavBar 并且注册它

因为只有首页的导航栏背景颜色是粉色 其他的导航栏可能是白色
所以要设置在home里 而不能是NavBar里

给nav-bar 搞个class 这样就能单独设置样式
然后使用插槽 名为center

var(–color-tint) 是变量 背景颜色为粉色 字为白色

请求首页的多个数据

复制之前写的axios
也就是network文件下的request.js

然后因为要请求首页的多个数据
为了方便管理url 再封装一层 也就是说在network下创建home.js
因为request.js是自己封装的一个框架 是面向这些组件的 然后home.js面向home.vue 挺合理

之前写到axios里最后返回的是promise

promise可以.then 调用数据

所以 导入getHomeMultidata 因为是函数 所以在()调用

(插播一条 **)关闭eslint 方法

ctrl + p 搜索 eslintrc.js
注释掉 standard

一直报错就hin烦 其他解决办法没用 记得保存重启

可以成功获得数据

函数执行完 里面的变量就被销毁了 等再次调用 就重新创建
所以在执行完之前要保存数据
所以在data()里定义两个空数组
把数据传给数组

打开vue插件可以看到list

轮播图

直接复制粘贴封装好的 swiper 和 swiperItem
然后在首页里


到此这篇关于vscode安装git及项目开发过程的文章就介绍到这了,更多相关vscode安装git内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-03-31

使用VSCode如何从github拉取项目的实现

最近使用vscode进行前端编程,遇到一些问题网上说明的不是很明显,故记录一下 1.开vscode使用CTRL+`或者点击查看到集成终端打开控制终端 2. 在终端中cd到存放文件夹下面,然后git clone https://github.com/iview/iview-project.git就可以将项目拉取下来 到此这篇关于使用VSCode如何从github拉取项目的实现的文章就介绍到这了,更多相关VSCode github拉取项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多

在vscode中使用Git的教程

vscode简介 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是资源管理器,搜索,GIT,调试,插件,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边.在初次使用时如果本地没有安装git会提示先安装git,然后重启vscode. 用了git最方便的就是比如在公司写了很多代码后回到家打开vscode只需要点击一下pull就能全部同步过来.是不是很方便....毕竟

VSCode配置Git的方法步骤随记

vscode中对git进行了集成,很多操作只需点击就能操作,无需写一些git指令. 不过这就需要你对vscode进行配置.下面我会讲到git的配置与免密码上传github. 一.安装Git管理工具,可上官网安装,安装路径https://git-scm.com/,安装路径默认C:\Program Files\Git,可自行修改,这里我是安装在D:\Program Files\Git. 二.安装完Git之后,如图配置好环境变量path路径的信息,一般会自动配置成功,配置完成后电脑就可以使用Git了.

Visual Studio Code(vscode) git的使用教程

本文介绍了Visual Studio Code(vscode) git的使用,分享给大家,具体如下: 1.创建一个github账号 2.在vscode中执行命令 echo "# C-Tests" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/harryluo163/C-Tests.g

vscode中利用git通过ssh连接github的方法

vscode目前发展的很快,易用性方面也远远超过其他文本编辑器如nodepad,这次在使用中发现vscode继承的git功能十分强大和方便,这里将git于github连接的步骤简单描述一下,用以备忘. 1.首先已经安装了git的控制台版本 初始化 $ git config --global user.name author #将用户名设为author $ git config --global user.email author@corpmail.com #将用户邮箱设为author@corpm

详解vscode使用git所遇到的坑

今天给vscode配置git的时候,差点没把我送走,我在配置git项目的时候会,看了一个博客文章的教学,其中配置路径的方法如下 1. 在git bash 中使用 命令 : where git 的路径 2.然后按照上面的路径配置到 vscode下的Git:path中,如下 然后当我使用vscode的push命令时 就出现如下错误 我百度了很多篇解决办法的文章,千姿百态,结果还是一个样报这个错误, 后来我突然发现别人的路径明显不是ming64下的git.exe,这一次我抱着最后的希望更改了路径 如下

vscode添加GIT和SVN的方法示例

一.添加SVN (1)添加svn插件 (2)安装的svn最好是默认路径安装的,不要问我为什么,因为很多软件都是按照默认路径找到bin的 表示安装正确,参考 vscode打开文件夹后右下角提示如下报错:SVN not found. Install it or configure it using the "svn.path" 同时输出窗口提信息:Svn installation not found. 错误原因: vscode找不到本地的svn.exe. 这个exe在默认安装Tortois

VSCode各语言运行环境配置方法示例详解

系统环境变量的配置 如:将F:\mingw64\bin添加到系统环境变量Path中 VSCode软件语言json配置C语言 创建个.vscode文件夹,文件夹内创建以下两个文件 launch.json 文件配置 { "version": "0.2.0", "configurations": [ { "name": "(gdb) Launch", "type": "cppdbg&

C#向Word文档中添加内容控件的方法示例

前言 大家应该都知道在MS Word中,我们可以通过内容控件来向word文档中插入预先定义好的模块,指定模块的内容格式(如图片.日期.列表或格式化的文本等),从而创建一个结构化的word文档. 下面就来看看如何使用C#给word文档添加组合框.文本.图片.日期选取器及下拉列表等内容控件(这里我借助了一个word组件Spire.Doc). 添加组合框内容控件 组合框用于显示用户可以选择的项目列表.和下拉列表不同的是组合框允许用户编辑或添加项. 核心代码如下: //给段落添加一个内容控件并指定它的S

为Javascript中的String对象添加去除左右空格的方法(示例代码)

如下所示: String.prototype.trim=function(){   var m=this.match(/^\s*(\S+(\s+\S+)*)\s*$/);   return (m==null)?"":m[1];} 使用:var  message ="  我很好  ";message.trim();

VSCode添加头文件(C/C++)的实现示例

使用VSCode编译C/C++时,会存在找不到头文件的情况这时候需要设置两个地方: 1.c_cpp_properites.json 2.task.json 以下是我修改的对应的文件 { "configurations": [ { "name": "Win32", "includePath": [ "${workspaceFolder}/**", "${workspaceRoot}", &

Python编程给numpy矩阵添加一列方法示例

首先我们有一个数据是一个mn的numpy矩阵现在我们希望能够进行给他加上一列变成一个m(n+1)的矩阵 import numpy as np a = np.array([[1,2,3],[4,5,6],[7,8,9]]) b = np.ones(3) c = np.array([[1,2,3,1],[4,5,6,1],[7,8,9,1]]) PRint(a) print(b) print(c) [[1 2 3] [4 5 6] [7 8 9]] [ 1. 1. 1.] [[1 2 3 1] [4

Android开发中button按钮的使用及动态添加组件方法示例

本文实例讲述了Android开发中button按钮的使用及动态添加组件方法.分享给大家供大家参考,具体如下: MainActivity.java package com.example.lab2; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.view.Menu; import android.view.View; import andro

Java 添加Word目录的2种方法示例代码详解

目录是一种能够快速.有效地帮助读者了解文档或书籍主要内容的方式.在Word中,插入目录首先需要设置相应段落的大纲级别,根据大纲级别来生成目录表.本文中生成目录分2种情况来进行: 1.文档没有设置大纲级别,生成目录前需要手动设置 2.文档已设置大纲级别,通过域代码生成目录 使用工具: •Free Spire.Doc for Java 2.0.0 (免费版) •IntelliJ IDEA 工具获取途径1:通过官网下载jar文件包,解压并导入jar文件到IDEA程序. 工具获取途径2:通过Maven仓

在iOS中给视频添加滤镜的方法示例

「众所周知,视频可以 P」,今天我们来学习怎么给视频添加滤镜. 在 iOS 中,对视频进行图像处理一般有两种方式: GPUImage 和 AVFoundation . 一.GPUImage 在之前的文章中,我们对 GPUImage 已经有了一定的了解.之前一般使用它对摄像头采集的图像数据进行处理,然而,它对本地视频的处理也一样方便. 直接看代码: // movie NSString *path = [[NSBundle mainBundle] pathForResource:@"sample&q