【vue】手把手创建vue项目并上传github（mac版）

本文目的

一、创建一个能跑起来的空的vue项目
二、将该项目上传至github为后续代码进行管理

一、创建一个能跑起来的空的vue项目

1、前提：macbook
2、需要已经安装好

• nodeJS

• webpack

cnpm install webpack -g

• vue-cli

sudo npm install -g vue-cli（如下图）

• 淘宝镜像（可选）

 npm install -g cnpm --registry=https://registry.npm.taobao.org

⭕️如果出现如图报错 因为mac没有给权限，记得加上sudo

3、正式安装

• 创建vue项目
• 切换到要放项目的文件夹，🌰我打算将项目放在documents里 cd 过去即可
• 输入下面指令 按照提示进行选择

vue init webpack 文件名

创建成功后，我们可以看见新创建的文件里面已经自动生成下面的文件

将项目拖拽到VSCode里面，打开终端，添加项目依赖，这里我选择的是cnpm指令，因为比较快速。也可以使用 npm install

cnpm i 

可以看到文件夹里增加了依赖包 此刻项目已经配置结束 启动即可

启动项目指令
⚠️这句命令可以根据自己的习惯，在package.json里面自行更改

npm run dev

打开网址http://localhost:8080/#/

✅vue项目创建完毕，第一步完成。

---

二、将该项目上传至github为后续代码进行管理
github 这里不做再多介绍 进入github网站，这里命令都在项目文件夹下的终端完成。建议直接在vscode里面

1、安装git

brew install git

2、设置username和email

git config --global user.name "用户名"
git config --global user.email "当初注册的邮箱"

3、创建ssh key

ssh-keygen -t rsa -C "(邮箱)"

回车默认

cd .ssh
cat id_rsa.pub

将显示的密钥复制，打开github，进入setting，点击New SSH key
title随意填 然后将密钥复制在上面


✅完成本地配置

4、在github里面新建一个项目

对项目进行配置 输入仓库名称 点击确定即可

完成后按照提示的命令在终端输入即可。请完完整整的输入，如有报错，自行百度解决，但愿是顺利的～

输入到最后一条指令时，vscode会出提示，我们只需要跟着链接进去点击几下确认即可

我们的项目已经成功上传至github

这里我们看到只有一个md文件，下面使用git命令把我们创建的vue项目代码传上来

git add .
git commit -m 'update'
git push

大功告成^^撒花🎉

🎯因为本人配置过了密钥，所以密钥配置部分没有写太详细，相关截图没有提供。如果有小伙伴卡在这里，可以参考下面链接博文。
https://www.jianshu.com/p/6d8afc2315bc

千里之行 始于足下 项目开启了 那就 继续前进吧！