碼雲+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若是看了本文對你有幫助的,麻煩請點個贊