vue项目,代码提交至码云,iconfont的用法说明

一、前期准备

首先得有一个码云账号，账号名最好是英文，用于线上仓库

其次下载一个git到电脑，因为很多git命令，cmd命令行识别不了

最好再有一个Iconfont账号，很多前端用到的图标就不用再自己画了，直接添加到项目下载下来就可以用了

还需要用到的有node

二、建立项目

1、首先在码云上新建一个私有的项目（如果项目是共有的，那么所有人都能看见，一般设为私有，然后将项目组的人拉进来就可以了），使用READERME文件初始化这个项目，语言选择javascript，克隆到本地

其中需要完成线上仓库与本地的连接

2、接下来就可以在本地进行代码的编写了。

3、需要用到图标时直接在iconfont中找到，加入购物车，添加进项目之后下载到本地，在组件中引用就行了。其中下载的文件只有部分是我们需要的，如下图所示：

再将iconfont.css也复制进css文件夹即可

别忘记还要修改iconfont.css的路径

三、提交代码到码云

主要想记载一下本地代码的提交的一些命令

要提交代码就得完成本地与线上仓库的连接，这里是通过公钥私钥来进行连接的

1、生成公钥私钥

在项目文件夹下执行git命令（引号中为注册码云的邮箱地址）

`ssh-keygen -t rsa -C "xxxxx@xxxxx.com"`

2、一路Enter下去，然后将生成的公钥填在码云（设置-ssh公钥）上

接下来输入

cat ~/.ssh/id_rsa.pub

3、初始化git仓库

在项目文件夹下执行git命令

git init

4 、将项目文件添加到缓冲区中

git add .

5 、将add的文件commit到仓库

git commit -m 'project init'

6、连接码云

这一步有可能会报错，需要输入命令

git config --global user.name 用户名；

git config --global user.email 邮箱名;

7、上传代码到码云仓库

git push

四、远端有项目的情况和码云建立连接：

1.在本地创建一个文件夹 或 命令 mkdir + 文件名

2.命令cd + 文件目录 进到文件名下

3.git clone + 码云仓库地址（码云上新建项目点进去克隆或复制的链接）

五、一些git命令

查看所有分支 ：git branch -a

切换到某一分支：git checkout 分支名称

合并分支：git merge 原分支 目标分支

提交命令有两个，git push origin master（正常提交）和git push origin master -f（强制提交，强制提交可能会把之前的commit注释信息，不会改变修改的代码，慎用），都是提交到master分支

查看远程分支 git branch -a或git branch -r

创建本地分支 git branch demo_fenzhi

切换到本地分支 git checkout demo_fenzhi

删除本地分支 git branch -d demo_fenzhi

查看本地分支状态 git branch

创建远程的分支,并且把本地分支推送到远程分支上 git push origin demo_fenzhi:demo_fenzhi 本地分支名称:远程分支名称

删除远程分支 git push origin :demo_fenzhi

或 git push origin --delete demo_fenzhi

本地分支与远程分支比较 git diff demo_dev origin/demo_fenzhi

//demo_dev为本地分支，demo_fenzhi为远程分支

新分支并切换到分支 git checkout -b bende_fenzhi

创建+切换分支：git checkout -b <name>

合并某分支到当前分支：git merge <name>

恢复删除后未git add的文件 git checkout -f或git clean -df

可以把远程某各分支拉去到本地的branchname下，如果没有branchname，则会在本地新建branchname git fetch origin branchname:branchname

获取远程分支remoteName到本地新分支localName，并跳到localName分支 git checkout origin/remoteName -b localName

补充知识：vue项目在码云预览步骤

第一步：

需要将vue项目进行打包，即npm run build,打包完将dist文件夹push到码云上，

但是注意将文件上传到 GitHub的时候默认是忽略到dist文件夹的，所以需要修改.gitignore 中文件的内容。如截图所示：

第二步：

登录码云，找到要预览的代码仓库，操作如以下截图所示，获取部署后的网站地址，第三步的时候需要

第三步：

在vscode中，修改该项目下的config/index.js文件下的build部分的内容，如截图所示：

修改完之后，重新执行npm run build命令，并且进行push

第四步：

在浏览器中输入第二步时获取到的网站地址，后面加上 /dist/index.html，即可进行网页的预览

大功告成！

以上这篇vue项目,代码提交至码云,iconfont的用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue Element使用icon图标教程详解(第三方)

    element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理>我的项目 图标管理>我的项目,点进去 新建项目 新建项目 项目名称随便写.前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了. 设置完,点新建 注意前缀.设置完,点新建 现在我们返回阿里icon首页,点进去你想要的icon

  • vue表单数据交互提交演示教程

    欢迎来到 vue-form 表单提交演示间, 你有更好的建议,请告知楼主额! 1. 客户端 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://

  • 在Vue中使用icon 字体图标的方法

    1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html文件,引入css样式,记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个. 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfont文件夹

  • vue项目,代码提交至码云,iconfont的用法说明

    一.前期准备 首先得有一个码云账号,账号名最好是英文,用于线上仓库 其次下载一个git到电脑,因为很多git命令,cmd命令行识别不了 最好再有一个Iconfont账号,很多前端用到的图标就不用再自己画了,直接添加到项目下载下来就可以用了 还需要用到的有node 二.建立项目 1.首先在码云上新建一个私有的项目(如果项目是共有的,那么所有人都能看见,一般设为私有,然后将项目组的人拉进来就可以了),使用READERME文件初始化这个项目,语言选择javascript,克隆到本地 其中需要完成线上仓

  • vue项目代码格式规范设置参考指南

    目录 前言 为项目添加eslint 自定义eslint配置 pre-commit设置 VS Code配置 参考 总结 前言 为了尽量统一项目成员的代码风格,降低开发者对代码的理解成本,所以我们需要为项目统一代码格式规范:同时我们不能为了降低理解成本,去增加开发成本,所以我们借助VS Code的相关插件去完成代码格式化的功能. 为项目添加eslint 使用vue-cli构建的项目,在项目构建时,就会让你选择格式化方案,如果是已有项目运行vue add eslint添加格式化方式,建议选择Prett

  • vue 项目代码拆分的方案

    vue 项目代码拆分的方案

    背景 由于之前的数据库防火墙产品与数据库审计产品使用的是同一套代码,随着两个产品功能的差异越来越大,代码的冗余度和偶合度越来越高,为了便于后期维护以及添加新功能,所以基于原来的项目代码,进行了代码结构拆分. 注意:本次拆分只拆分了可以拆分的部分,有的模块例如:规则.关于我们,是没有进行拆分的,一是有的模块很简单,没必要拆分:二是有的模块原先写得代码偶合太严重,无法拆分,如果要拆分,需要花费大量精力去梳理代码,同时还要后端配合拆分. 目的 将此次代码拆分方案记录下来,便于后来的开发人员快速熟悉项目

  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象. /router/home.router

  • vue项目中mock.js的使用及基本用法

    官方网址:http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据. 使用方式 这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程. vue-cli搭建项目后,安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹,来设

  • Android Studio 新建项目通过git上传到码云图文教程详解

    Android Studio 新建项目通过git上传到码云图文教程详解

    作为一个合格的开发人员,对项目进行管理自然必不可少.今天就给各位看客介绍一下如何用git将自己的AS项目上传到码云.    一  创建远程码云代码仓库 首先我们打开码云,注册一个账号,接着在左上角处点击加号新建一个远程的项目仓库用于待会AS项目的上传,具体如下: 按照上图所示,点击创建即生成远程代码仓库.     二 开始进行AS代码的上传 首先我们打开新建好的AS项目,点击AS顶部的如下: 接着点击项目名称如下将项目加入到本地的git仓库中 之后红色的字体会变成绿色. 接着点击顶部vcs上传代

  • vue项目打包后提交到git上为什么没有dist这个文件的解决方法

    vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,为什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看解决办法 一..gitignore 介绍 这里向大家简述一下.gitignore这个文件 一.简绍 我们做的每个Git项目中都需要一个".gitignore"文件,这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中.比如我们项目中的npm包

  • 码云git图文使用详解教程

    01 写在前面 一般我们都是将项目提交到github上,但是因为github私人库要钱,所以在真实项目开发中,我们还是可以选择将代码保存在码云上,毕竟也怕万一有人看到项目也是不好的,同时码云建私人库是免费的,而且操作什么和github很像,首先说明一句以下步骤都是基于git的,并且这些准备工作都不说了,比如git安装和码云账号的申请. 02 步骤 A. 和github一样,如果我们只是单纯的从上面clone代码,并不需要ssh配对.但是我们是为了将项目代码提交到上面,所以还是需要ssh key的

  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

    简介 Jenkins是一个开源的.提供友好操作界面的持续集成(CI)工具,起源于Hudson(Hudson是商用的),主要用于持续.自动的构建/测试软件项目.监控外部任务的运行(这个比较抽象,暂且写上,不做解释).Jenkins用Java语言编写,可在Tomcat等流行的servlet容器中运行,也可独立运行.通常与版本管理工具(SCM).构建工具结合使用.常用的版本控制工具有SVN.GIT,构建工具有Maven.Ant.Gradle. jenkins安装 1.安装JDK yum install

  • AndroidStudio上传本地项目到码云的方法步骤(OSChina)

    本文介绍了AndroidStudio上传本地项目到码云的方法步骤(OSChina),分享给大家,具体如下: 1.安装Git 2.注册oschina账户.设置ssh等等 在码云创建仓库 打开本地项目,添加Git管理 选你想要管理的目录,一般选项目最外层 此时所有的文件变成红色 右键项目名称点击git -> add 然后所有文件变绿色 点击提交 然后推送 复制你刚才在码云创建的地址,复制HTTPS的 定义默认的远程地址,点OK后输入密码 如果发现没有Define remote 可以在这里设置 点击

随机推荐