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

效果展示：

主要功能：

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

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

https://github.com/jiang-lijun/vuecli_test

预览地址：

vuecli_test

步骤如下：

一、安装

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