使用vue-cli构建一个项目并上传到GitHub，生成在线预览地址

  参考来源：

前端小白如何快速上手Vue框架(下篇)_Logbook的博客-CSDN博客_如何快速搭建vue框架

vue项目上传github--提供demo入口 - 简书

效果展示：

主要功能：

使用vue-cli构建一个项目并上传到GitHub，生成在线预览地址

GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）

https://github.com/zhiyuanda/vuecli_test

预览地址：

https://zhiyuanda.github.io/vuecli_test/dist/index.html#/

步骤如下：

一、安装

node -v
vue -V

​​

 ​​

二、构建一个项目

语法：

vue init <template-name> <project-name>

 <template-name>：模板名称

<project-name>：项目名称

使用官方模板： 

vue init webpack vuecli_test

​​

​​

三、运行项目

cd vuecli_test
npm run dev

 ​​

​​

 四、在浏览器打开，输入url

​​

​​

 五、创建的项目目录

​​

 六、将本地项目部署到GitHub上

6.1. GitHub上新建仓库：

​​

​​ 6.2. 进入本地项目根目录下：

​​

 6.3. 在空白区域右击鼠标：

​​

6.4. 进入Git Bash Here并输入以下命令（记得把刚刚启动的本地服务先关闭，按CTRL+c退出）:

 6.4.1. 创建本地仓库

git init

​​

  6.4.2. 添加

git add .

 ​​

 6.4.3. 提交到本地仓库，并添加注释

git commit -m "vuecli_test"

 ​​

  6.4.4. 连接远程仓库

git remote add origin git@github.com:xxx/vuecli_test.git

 6.4.5. 推送到远程仓库

git push origin main

​​

 6.4.6. 查看GitHub，已成功上传

​​

 6.4.7. 生成项目入口

npm run build

 报错：​​

解决方法：

 ​​

 ​​

​​  6.4.8. 生成项目入口文件

​​

​​

   6.4.9. 重新提交到GitHub

git add -f "dist"

git commit -m "update"

​​

git push origin main

​​

七、GitHub配置pages，生成在线预览地址

​​

 配置完成(在线预览的demo地址需要在生成的地址后面加上  dist/index.html)

​​

 ​​

 预览地址

vuecli_test