1 Vue项目环境准备
(1)下载按安装Node.js运行环境,node-v 用来检查已安装node版本
npm为一个包管理工具 npm-v检查npm版本号(包含一些代码开发效率、版本控制)
(2)注册码云账号(网上git云仓库)
(3)在本地安装git,git --version检查是否安装成功
windows系统 git bash 执行SSH keygen
邮箱填写自己的邮箱
git clone把线上代码放到本地
(4)大型webpack构建项目 vue-cli
vue-cli 是用node编写的命令行工具,需要进行全局安装
$npm install --global vue-cli
可以使用vue-cli快速生成一个基于Webpack构建的项目
$vue init webpack my-project
执行命令后,会有一些命令交互,初始化一些项目信息
进入my-project目录,安装项目的依赖
$npm install
此时,看一下项目目录结构
启动项目
$npm run dev
打开浏览器,访问上述页面,
(5)把本地代码推到线上(保证本地和线上代码一致)
$git add .
$git commit -m 'project change'
$git push
在实际项目开发中,不仅有简单文件(主分支master)的push 和pull操作。更多的是每一次开发新的组件时,要生成新的分支,便于代码调试,代码管理。
(6)实际开发中,需要不断创建新的分支,每次创建新的分支,都要进行如下指令操作
$git pull
$git checkout index-ajax
在每一次分支的组件开发完毕,都要先把本地新的分支代码推到线上,最后再把分支组件合并到主分支。
$git add .
$git commit -m 'add recs'
$git push
add recs即为添加新组件的内容到线上
第二步,切换到主分支,然后把新分支的内容合并到主分支
$git checkout master
$git merge origin/index-rec
$git push
index-rec为新建分支的名字
2 Vue中ajax请求
Vue中发送ajax请求,一般有两种方法
fetch | vue-resource |
Vue官方推荐 axios 这个第三方模块(能很好的处理跨平台数据请求)
安装 axios
npm install axiios --save
没有后台服务器支持。数据文件可先保存在static文件下,新建一个文件夹然后放置json文件。
父子组件的数据传递 props