天天看点

Vue项目环境准备以及常用git命令

1 Vue项目环境准备

(1)下载按安装Node.js运行环境,node-v 用来检查已安装node版本

npm为一个包管理工具 npm-v检查npm版本号(包含一些代码开发效率、版本控制)

(2)注册码云账号(网上git云仓库)

(3)在本地安装git,git --version检查是否安装成功

windows系统 git bash 执行SSH keygen

Vue项目环境准备以及常用git命令
Vue项目环境准备以及常用git命令

邮箱填写自己的邮箱

git clone把线上代码放到本地

Vue项目环境准备以及常用git命令

(4)大型webpack构建项目  vue-cli

vue-cli 是用node编写的命令行工具,需要进行全局安装

$npm install --global vue-cli
           

可以使用vue-cli快速生成一个基于Webpack构建的项目

$vue init webpack my-project
           
Vue项目环境准备以及常用git命令

执行命令后,会有一些命令交互,初始化一些项目信息

进入my-project目录,安装项目的依赖

$npm install
           

此时,看一下项目目录结构

Vue项目环境准备以及常用git命令

启动项目

$npm run dev
           
Vue项目环境准备以及常用git命令

打开浏览器,访问上述页面,

Vue项目环境准备以及常用git命令

(5)把本地代码推到线上(保证本地和线上代码一致)

$git add .
$git commit -m 'project change'
$git push
           

在实际项目开发中,不仅有简单文件(主分支master)的push 和pull操作。更多的是每一次开发新的组件时,要生成新的分支,便于代码调试,代码管理。

(6)实际开发中,需要不断创建新的分支,每次创建新的分支,都要进行如下指令操作

$git pull
$git checkout index-ajax
           
Vue项目环境准备以及常用git命令

在每一次分支的组件开发完毕,都要先把本地新的分支代码推到线上,最后再把分支组件合并到主分支。

$git add .
$git commit -m 'add recs'
$git push
           
Vue项目环境准备以及常用git命令

add recs即为添加新组件的内容到线上

第二步,切换到主分支,然后把新分支的内容合并到主分支

$git checkout master
$git merge origin/index-rec
$git push
           

index-rec为新建分支的名字

Vue项目环境准备以及常用git命令

2 Vue中ajax请求

Vue中发送ajax请求,一般有两种方法

fetch vue-resource

Vue官方推荐 axios 这个第三方模块(能很好的处理跨平台数据请求)

安装 axios

npm install axiios --save
           

没有后台服务器支持。数据文件可先保存在static文件下,新建一个文件夹然后放置json文件。

父子组件的数据传递  props

Vue项目环境准备以及常用git命令

继续阅读