码云+vue完整搭建一个免费静态网站

第一步:建立vue项目

前提:安装node环境:下载连接:https://nodejs.org/en/
装好node后为了提升咱们的工做效率,可使用淘宝镜像,输入下面的命令便可提升咱们下载依赖包的速度.

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

之后要用到npm的地方时可使用

cnpm ***

进入正题,开始搭建vue项目环境

全局安装vue-cli 使用

npm install --global vue-cli

或

`cnpm install vue-cli -g`

安装好后,进入选定的项目目录,建立一个基于 webpack 模板的新项目

` vue init webpack  ”项目名称“`

说明：
Vue build ==> 打包方式，回车便可；
Install vue-router ==> 是否要安装 vue-router，项目中确定要使用到 因此Y 回车；
Use ESLint to lint your code ==> 是否须要 js 语法检测 目前咱们不须要 因此 n 回车；
Set up unit tests ==> 是否安装 单元测试工具 目前咱们不须要 因此 n 回车；
Setup e2e tests with Nightwatch ==> 是否须要 端到端测试工具 目前咱们不须要 因此 n 回车
安装好以后 ,就要安装项目依赖了,使用

npm i

或

cnpm i

安装好后使用

npm run dev

便可进入本地搭建好的服务器
项目制做完成后便可进行下一步了

第二步 码云部署

码云其实和github是很像的,只不过github国内访问太慢了,为何选择码云呢?由于码云上有gitee pages(免费的静态网页托管服务)

1.注册码云帐号

进入码云官网https://blog.gitee.com/,里面...

2.建立码云仓库

选择开源,与javascript语言便可.点击建立就完成了这步

注意:仓库名称最好与你的码云帐号名一致,不一致也能够,只不过到时候访问地址是你的二级目录

https://gitee.com/help/articl...

第三步 vue项目上传以前的调整

上传以前须要在config目录下把index.js 文件调整成以下

index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './static',
assetsPublicPath: './',

这样打包后提交部署后页面才不会白屏
使用 npm run build 进行打包

npm run build

第四步 使用git提交文件到码云上

前提安装好git 国内有git的下载连接https://github.com/waylau/git...

先将仓库clone到本地，修改后再push到码云的仓库

在刚建立的仓库里把连接复制出来

$ git clone ***

$ git config --global user.name "你的名字或昵称"

$ git config --global user.email "你的邮箱"

clone本地后,cd 仓库名进入文件夹执行下面的提交操做
复制好刚打包的dist放在该目录下
在仓库目录下执行下面命令

$ git add . #将当前目录全部文件添加到git暂存区
$ git commit -m "my first commit" #提交并备注提交信息
$ git push origin master #将本地提交推送到远程仓库

提交后
而后点击服务->gitee pages


选择部署目录为dist,使用强制使用https

点击更新完成了本身的部署了
https://glant.gitee.io这就是刚弄好的,有兴趣能够看下,页面还没怎么完善,后续更新0.0若是看了本文对你有帮助的,麻烦请点个赞