Vue2.6实现去哪儿网 --初始化项目

284 阅读3分钟

一.项目环境配置

  • node.js 
  • git 云仓库(码云)
  • git&云仓库关联
  • 本地代码的下载
  • vue-cli 3.x脚手架工具
  • 初始化项目
  • 代码的上传

二.实操

node.js

    打开node.js官网根据自己的电脑系统下载LTS版本的node.js,然后安装即可。

    安装好之后打开cmd命令行工具输入 node -v 就可以看到安装的 node 的版本号,输入 npm -v 就可以看到 node.js 配备的包管理工具 npm 的版本号,都完成就说明安装成功了

-----------------------------------------------------------------------------------------------

git 云仓库(码云) 

    打开码云官网注册登录后新建仓库按提示选择

-----------------------------------------------------------------------------------------------

git 

    官网下载安装,命令行输入 git -v 就可以看到 git 的版本号,window操作系统的桌面就可以通过右键 git bash 进入小型的 linux 终端

-----------------------------------------------------------------------------------------------

云仓库关联本地

    在码云 “个人设置” 的 “ssh公钥” 里有怎样生成公钥的链接,根据里面的指令在 git bash 中执行,通过 ssh-keygen -t rsa -C "xxxxx@xxxxx.com" 即 ssh-keygen -t rsa -C "个人邮箱" 生成一个公钥和私钥,然后 cat ~/.ssh/id_rsa.pub 生成公钥字符串,复制这串字符串,回到码云的公钥页面,把字符串粘贴到公钥的位置,点击确定。这样通过本地私钥和线上公钥匹配,上传代码或者下载代码时就可以以无账号密码的形式完成

-----------------------------------------------------------------------------------------------

代码的上传和下载

    在码云的代码仓库页面,点击下载,以 ssh 协议进行代码的克隆,点击复制,在本地新建一个用来存放项目的文件夹,在 cmd 命令行工具中 cd 到项目文件夹的位置,通过 git clone "线上仓库代码" ,在线上仓库代码的位置粘贴刚才复制的克隆就完成了线上的代码的下载了。

-----------------------------------------------------------------------------------------------

vue-cli 脚手架工具

    在cmd命令行工具中,npm install vue-cli -g 就可以安装

    安装好后通过 vue init webpack Travel 可以初始化一个名字为 Travel 的基于 webpack 打包工具的 vue 项目,这个项目会以 Travel 文件夹的形式存放在本地,构建的过程中,它会询问几个问题:(通过回车选择,电脑连上手机热点安装会快一些)

Project name: 项目名称

Project description: 项目的描述

Author: 作者

Vue build: 编译形式,建议选 Standalone 

Install vue-router: 安装 vue-router,确定

Use ESLint to lint your code? 使用 ESLint 对代码格式进行检查,确定

Pick an ESLint preset: 选择一种代码规范,建议 Standard

Set up unit tests: 是否进行单元测试,否

Setup e2e tests with Nightwatch: 是否进行端到端的测试,否

选择一个包管理方式,建议选 NPM

通过 vue-cli 完成初始化项目后,我们可以在cmd命令行工具通过 cd Travel 进入到项目,然后 通过 npm run dev 运行项目,这时候打开浏览器,输入 localhost:8080 就可以看到新初始化的项目了。

-----------------------------------------------------------------------------------------------

代码的上传

在cmd命令行里 ctrl + c 关闭服务,cd 到Travel文件夹中,通过运行 git add . (不要把add 后的点忘了)把线上文件缓存到 git 的缓冲区,然后运行 git commit -m "描述" ,接着运行 git push 把本地代码上传到线上的仓库中,打开码云的线上仓库页面就可以看到我们的项目了