利用git命令将项目上传到github
1.登陆自己的github账号,点击new repository进行创建一个新的仓库,如下图所示:
2.用命令将项目上传;
1、先进入项目文件夹,通过命令 git init 把这个目录变成git可以管理的仓库
git init
2、把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点“.”,意思为添加文件夹下的所有文件。
git add .
3、用命令 git commit告诉Git,把文件提交到仓库。引号内为提交说明。
git commit -m 'message'
4、关联到远程库。
git remote add origin 你的远程库地(如:https://github.com/jwhuang59/vue-element-traveling.git)
5、将项目所有push文件到仓库中。
git push -u origin master
常见问题
原因:本地和远程的文件应该合并后才能上传本地的新文件
解决:
可以通过如下命令进行代码合并【注:pull=fetch+merge]
git pull --rebase origin master
//执行代码后可以看到本地代码库中多了README.md文件此时再执行语句 git push -u origin master即可完成代码上传到github
制作gh-pages在线预览效果
打包Vue项目
当Vue项目完成后,在根目录下打开命令行,输入命令:
npm run build
实际上此命令就是执行build.js文件,将项目打包成静态资源。
此命令完成后,项目根目录下会多出一个dist文件夹,dist文件里面有:
static文件下包括项目打包后的css、js、img、fonts(字体图标)。
项目资源无法加载
点击index.html,浏览器显示该页面是空白的,打开控制台看到:
这里看到index.html文件中没有加载任何css、js文件,解决方法:
- 打开项目根目录 config 下的 index.js 文件,进行如下修改:
- 将 assetsPublicPath: '/', 改为 assetsPublicPath: './',
保存后重新'npm run build',在新生成的dist目录下点开index.html,这时页面结构正常显示出来了,但是页面字体图标和mock的数据无法正常加载。
字体图标无法加载
页面中用background加载的图片可以正常显示,但是所有的字体图标都不能正常显示,解决方法:打开根目录下 build 中的 utils.js 文件,在控制build样式文件代码中添加 publicPath: '../../', 如下:
保存后,依旧重新'npm run build',打开dist目录下的index.js可以看到字体图标正常显示了。
生成gh-pages分支步骤:
1、将远程仓库克隆到本地:
git clone https://github.com/jwhuang59/vue-element-traveling.git(项目克隆地址)
2、生成分支gh-pages并切换到此分支
cd test (进入到你克隆仓库的本地文件夹)
git checkout --orphan gh-pages (创建分支并切换)
3、将本地克隆文件(文件名为github仓库名)里面除.git文件以外的其他文件全部删除,再将根目录下dist文件夹里面的内容复制到克隆文件中。
最后依次执行以下命令:
git add . (将本地所有文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin https://github.com/jwhuang59/vue-element-traveling.git(本地仓库链接远程仓库)
git push -u origin gh-pages (push文件到仓库中)
4.点击项目仓库的setting,找到source,切换到gh-pages branch,点击保存。
5.访问 https://jwhuang59.github.io/vue-element-traveling 预览效果
个人项目演示