【保姆级教学】新手第一次搭建vue项目和初始化
前端项目初始化步骤
- 安装vue脚手架
- 通过vue脚手架创建项目
- 配置vue路由
- 配置Element-UI组件库
- 配置axios库
- 初始化git远程仓库
- 将本地项目托管到github或者码云上
通过vue脚手架创建项目
win+R 打开windows运行窗口
输入cmd 打开windows黑窗口
输入vue ui 回车启动gui面板
在浏览器打开vue gui面板
出现是英文!需要更改为中文
vue UI 可视化窗口修改为显示中文
vue UI是根据浏览器语言来显示对应的语言的,只要更改浏览器默认语言就可以,以谷歌浏览器为例
运行vue ui打开窗口显示英文
通过vue脚手架创建项目
创建项目中
安装vue脚手架、通过vue脚手架创建项目、配置vue路由就已经完成了
接下来配置Element-UI组件库
Element-UI组件库配置完成
配置axios库
初始化git远程仓库
今年是2020年,我就用码云。
如果没有码云账号 可以右上角的注册按钮进行注册
如果有码云账号了就直接点击登录
设置SSH公钥
如果你已经设置过了就不要设置了。
如果没有设置过!请继续
如果不知道如何设置请点击怎样生成公钥
ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
双引号里的的xxxxx@xxxxx.com要替换为你当初注册码云账号的邮箱账号
比如:我举个栗子给你看
ssh-keygen -t rsa -C "gebilaowang@xxoo.com"
看到这里!我知道你懂的。
那就在windows黑窗口输入进去
什么是windows黑窗口?【吃屎啦你】
双引号的是我瞎写的!不要跟我写一样!写你注册码云账号时用的邮箱账号。如果不明白 去买根绳子!找棵树。
按三次回车键就完成了。
完成的画面像下面这样。
如果出现的画面向下面这样就说明你他娘的真是个人才!你已经弄过SSH了!只是你忘记你什么时候弄的了。
其他错误就跟我没关系了。我不知道怎么解决。还是买根绳子!找棵树吧。
做过了有没有看到这句话
Enter file in which to save the key (这里是存放的路径):
那你就去这个地方找,找到用记事本打开。复制
图片中的地址栏是我电脑上的路径,你电脑上的路径自己寻找 【也应该是此电脑>Windows(C:)>用户>这里我就不知道了>.ssh】
找不到 就买根绳子!找棵树。
那个id_rsa.pub就是我们要的ssh公钥。
点击右键!随便用啥编辑器打开。像文本打开,Vscode打开它,Sublime打开都可以。把里面内容全部复制。
Ctrl
+A
是全选
Ctrl
+C
是复制
Ctrl
+V
是粘贴
粘贴到gitee
输入你账号的密码就可以了
看到上面的画面就代表你的SSH公钥就已经完成了
那怎么知道自己设置好的公钥能不能用呢!
那我们肯定要测试一下咯
测试SSH公钥是否成功生效
ssh -T git@gitee.com
将上面这条命令复制,在windows黑窗口中输入
这里它并没有告诉我们添加成功!只是告诉我们是否要将这个IP添加到可信列表中
我们输入yes ,然后回车
如果能看到Hi ……就已经完成了。
配置SSH公钥完成
初始化git远程仓库
废话少说!
要的开干。
只要写个仓库名称就可以了,点击创建
如果看到下面这个画面,那就是成功了
简易的命令行入门教程:
Git 全局设置:
git config --global user.name "刘韦"
git config --global user.email "pythonliuwei@aliyun.com"
在windows黑窗口复制粘贴 上面的内容
复制一行,粘贴一行,回车
如果电脑里没有git仓库就用下面的创建git仓库,如果电脑里有git仓库就用已有仓库里的。
我们不是已经创建过vue项目了嘛!我们就直接用已有仓库里的
创建 git 仓库:
mkdir vue_testp
cd vue_testp
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://gitee.com/pythonliuwei/vue_testp.git
git push -u origin master
已有仓库?
cd existing_git_repo
git remote add origin https://gitee.com/pythonliuwei/vue_testp.git
git push -u origin master
找到我们已有仓库的地址
按住Shift
点击鼠标右键 选择在此处打开PowerShell终端窗口
查看下文件的状态
git status
将所有文件添加到本地暂存区
git add .
将文件在提交到本地
git commit -m “add first”
将本地提交文件提交到远程仓库
首先我们应该在项目文件里才能去执行下面这段代码
git remote add origin https://gitee.com/pythonliuwei/vue_testp.git
然后在执行下面这段话[本地仓库和gitee仓库做一个关联]
git push -u origin master
按照要求输入你的码云账号的用户名和密码
第一次往码云的这个仓库中提交是需要输入账号和密码的!后面再提交就不需要提交了。
至此!vue项目的前端搭建到初始化就已经完成了。
【保姆级教学】新手第一次搭建vue项目和初始化的更多相关文章
- 搭建vue项目环境
前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...
- 快速搭建Vue项目
快速搭建Vue项目 第一次安装vue项目Vue推荐开发环境Node.js 6.2.0.npm 3.8.9.webpack 1.13.vue-cli 2.5.1.webstrom2016 安装环境: 安 ...
- Swagger保姆级教学
Swagger保姆级教学 Swagger 简介 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样 ...
- 手把手教你用vue-cli搭建vue项目
手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是 ...
- element-ui和npm、webpack、vue-cli搭建Vue项目
一.element-ui的简单使用 1.安装 1. npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 2. CDN ...
- Visual code 搭建Vue项目
使用VS Code搭建Vue项目 1.安装 VScode 2..安装最新node.JS 2.安装cnpm镜像 淘宝镜像(node自带安装了npm,故不再安装) npm install -g cnpm ...
- vue-cli搭建vue项目更新
vue-cli搭建vue项目更新 更新之前一篇博客错误的地方,在使用vue init webpack xxx 之后并不需要使用npm install 下载依赖包,而是直接根据提示 打开文件夹 再npm ...
- 用vue-cli来搭建vue项目和webpack
vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-si ...
- 教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目 我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
随机推荐
- LeetCode-Queue
简单题 1. 数据流中的移动平均值 $(leetcode-346) 暂无 2. 最近的请求次数(leetcode-933) 写一个 RecentCounter 类来计算最近的请求. 它只有一个方法:p ...
- 搭建一套ASP.NET Core+Nacos+Spring Cloud Gateway项目
前言 伴随着随着微服务概念的不断盛行,与之对应的各种解决方案也层出不穷.这毕竟是一个信息大爆发的时代,各种编程语言大行其道,各有各的优势.但是有一点未曾改变,那就是他们服务的方式,工作的时候各 ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- nodejs gulp如何获取参数
比如执行gulp test 如果需要获取test,使用命令process.argv即可 如果执行gulp test --module aaaa,这句话表示的意思执行gulp test,顺带参数modu ...
- nodejs 获取当前路径的方法
var path = require("path"); var url = path.resolve('./');
- [设计模式]面向对象五大设计原则:SOLID
SOLID (面向对象设计) 单一功能原则(Single responsibility principle) 每个类都应该有一个单一的功能,并且该功能应该由这个类完全封装起来 所有它的(这个类的)服务 ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- vue重置data里的值
this.$options.data() 这个可以获取原始的data值,this.$data 获取当前状态下的data,拷贝重新赋值一下就行了. Object.assign(this.$data, t ...
- DVWA学习记录 PartⅤ
File Upload 1. 题目 File Upload,即文件上传漏洞,通常是由于对上传文件的类型.内容没有进行严格的过滤.检查,使得攻击者可以通过上传木马获取服务器的webshell权限,因此文 ...
- 数据可视化之 图表篇(一)Power BI可视化,几张图表认识疫情现状
近期国际疫情愈演愈烈,在这个特殊的时期,一方面仍要照顾好自己.不要为疫情防治添乱,另一方面,也可以利用疫情数据提升自己的数据分析和可视化技能. 下面是我制作的几个可视化图表,分别注释了每个可视化用到 ...