Vue项目热部署-环境配置
- 先打开node.js的官网 https://nodejs.org/en/
- 点击DOWNLOADS
- LTS是长期维护的一个版本,Current是最新版。我们一般选LTS
- 选择自己对应的系统进行安装即可。傻瓜式下一步安装。
- cmd进入运行界面,通过两个命令查看是否安装成功。npm是node下载时自带的一个工具。
注册码云
-
https://gitee.com/ 用于放我们的代码,或者工作中更好的进行工作。
-
创建项目。
-
创建仓库,许可证一般选用MIT。
-
仓库已经建好了。
-
但如果你想和本地仓库进行远程连接,你就必须在本地下载git——https://git-scm.com/downloads,选择你系统的版本。
-
打开cmd,输入git --version
-
进入到git仓库打开设置,要打通线下线上。
-
点击SSH公钥,怎样生成公钥是基于Linux的。Windows不同。
而windows就是桌面右键有一个Git Bash ,这相当于进入Linux终端一样——小型的Linux。所以执行命令必须进入到里面,而不是cmd中。
-
生成一个公钥,ssh-keygen -t rsa -C “xxx” ,并回车。
-
再查看公钥。输入cat ~/.ssh/id_rsa.pub
-
将公钥复制到你的ssh设置中。等一会
扫描二维码关注公众号,回复: 12578732 查看本文章 -
回到仓库中,现在要把我们的线上仓库克隆到我们的线下。点击ssh,复制。
-
如果是linux就cd到本地的一个文件夹中,输入git clone [email protected]:luobinhua/travel.git,那如果是windows就先进入一个文件夹。
输入git clone [email protected]:luobinhua/travel.git即可。
安装Vue
可以到这里查看更好。https://cli.vuejs.org/
- 全局安装 vue-cli:命令—— npm install --global vue-cli
- 注意点:如果出现报错,可能是之前的久版本,报错如下。
解决方法: https://blog.csdn.net/XQXOI/article/details/110818582
我的解决方法
npm uninstall @vue/cli -g 把新的脚手架全局工具移除
npm install vue-cli -g 安装老的脚手架
如果下载慢可以使用淘宝镜像的方式,帮助我们安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
下载代码:cnpm install vue-cli -g
-
创建一个打包项目,命令——vue init webpack my-project,这里的my-project是指指定当前目录下的文件夹——项目要放到的文件夹。
后面的如下: -
Install vie-router? 是否需要路由 Y
-
Use EsLint to lint your code? 是否对代码的一个公正度进行检查 Y
-
Pick an ESLint preset 代码检测规范 Standard
-
Set up unit tests 是否进行单元测试 no
-
Setup e2e tests with Nightwatch? 端到端的一个测试 no
-
Should we run
npm install
for you after the project has been created?(recommended) 是否采用NPM或者是Yarn的工具进行管理。 Yes,use NPM -
如果出现了一下错误。可以采用npm install -g @vue/cli-init 的方式。错误原因,因为你下载了vue3.0但是又想使用vue2.0可以使用此命令覆盖。
-
进入到下载的文件夹中。cmd 运行 npm run dev 启动。
如果有报错,你可以将错误信息选中出现白色框,按回车,然后粘贴在翻译里面,将倒数第4句复制到百度搜索(精准发现bug)如果你也和我是以下问题,那么就是
本地的package.json已存在,但是node的模块却没有?后面人家还提醒你了,去安装(install)
所以你就安装一下依赖就OK啦。
cnpm install
运行成功后
最后在浏览器中输入:http://localhost:8080
最后一步,将项目放置码云。
- 你现在可以发现本地代码和线上代码已经不一致了。右键Git Base打开命令行,使用git status查看
- 如何上传呢。
git add. //添加到缓冲区
git commit -m ‘project init hahah’
git push //将文件推到线上
成功之后。