当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 21:00:23 vue.js

第一步:创建一个vue项目前提:安装node环境:下载地址:https://nodejs.org/en/安装好node之后,为了提高我们的工作效率,我们可以使用淘宝镜像,输入以下命令进行改进我们下载依赖包的速度。`npminstall-gcnpm--registry=https://registry.npm.taobao.org`以后想用npm的时候可以用cnpm***进入正题,开始搭建vue项目环境安装vue-cliglobally使用npminstall--globalvue-cli或者`cnpminstallvue-cli-g`安装完成后,进入选择的项目目录,根据webpack模板新建项目`vueinitwebpack'项目名称"`说明:vuebuild==>打包方法,直接回车;安装vue-router==>是否要安装vue-router,必须在项目中使用Y回车;使用ESLintlintyourcode==>是否需要js语法检测?目前不需要sonEnter;Setunittests==>是否安装单元测试工具,目前不需要sonEnter;Setupe2etestswithNightwatch==>是否需要进行端到端测试我们暂时不需要该工具,直接回车,安装完成后,需要安装项目dependencies。使用npmi或cnpmi安装,使用npmrundev进入本地搭建的服务器。项目完成后,可以进行下一步第二步,部署码云。码云其实和github很像,但是github国内访问太慢了。为什么选择码云?因为码云有giteepages(免费静态网页托管服务)1.注册码云账号,进入码云官网https://blog.gitee.com/,里面...2.创建码云仓库,选择打开源代码和javascript语言。单击创建以完成此步骤。注意:仓库的名字最好和你的码云账户名一致,不一致也没关系,但是访问地址会是你那个时候的二级目录https://gitee.com/help/articl...第三步调整vue项目上传前上传前需要放到config目录下dex.js文件调整为如下索引:path.resolve(__dirname,'../dist/index.html'),//PathsassetsRoot:path.resolve(__dirname,'../dist'),assetsSubDirectory:'./static',assetsPublicPath:'./',这样打包提交部署后页面不会空白。使用npmrunbuild打包。npmrunbuild第四步,使用git提交文件到码云。下载链接https://github.com/waylau/git...先clone仓库到本地,修改后push到码云仓库。复制新建仓库中的链接$gitclone***$gitconfig--globaluser.name"你的名字或昵称"$gitconfig--globaluser.email"你的邮箱"克隆到本地后,cd仓库名和进入文件夹执行下面的commit操作,将刚刚打包好的dist复制到这个目录下,在仓库目录下执行下面的命令$gitadd。#将当前目录下的所有文件添加到git暂存区$gitcommit-m"myfirstcommit"#提交并注意提交信息$gitpushoriginmaster#将在本地提交并推送到远程仓库。提交后点击Service->giteepages选择部署目录为dist。使用强制https点击update即可完成自己的部署。https://glant.gitee.io这个刚刚搞定,有兴趣的可以看看,页面还没有完善,后续更新0.0如果阅读这篇文章对你有帮助,请点个赞它