Vue+webpack+axios项目实战

Vue项目开发

环境：

1、安装 node.js、git等

2、创建仓库

码云网站或者GitHub创建一个仓库

SSH公钥

git bush中: 将单引号部分替换为邮箱（最好为码云注册邮箱）

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

运行下面代码：出现公钥

cat ~/.ssh/id_rsa.pub

复制公钥到码云

克隆项目：

复制项目SSH

进入你想把项目要放入文件目录，打开git bush，运行git clone git@xxxx.com:xxxx.git (git clone加上复制的SSH) ，即目录位置就多出来了一个travel-test（码云仓库名）文件夹

3、初始化本地仓库

运行 git install --global vue-cli 安装

打开项目所在目录(注意一定要在项目所在文件夹而不是项目文件夹，在travel-test的外层目录不是travel目录下)

一下windows环境最好在cmd运行

运行 vue init webpack travel-test travel-test为项目文件名

根据提示(可在git bush或者cmd)

cd travel ，npm run dev或者npm run start

项目已在8080端口跑起来

4、本地和线上项目同步

查看项目发现本地项目比码云线上项目多出许多文件夹，同步线上线下：

关掉服务器，确保git bush在项目目录下（travel-test下）

1、运行 git status 查看状态

2、运行 git add . 将所有文件增加到本地缓冲区

3、运行 git commit -m 'project init' 提交项目

4、运行 git push 将提交代码推到线上仓库

开发开始

文件引入

项目index.hteml下

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

在src下新建assets目录，再在其目录下新建styles目录，将reset.css和normalize.css放入styles文件夹下，打开build目录下的webpack.base.conf.js里，配置style目录简写方式使（src/assets/styles）可简写为styles目录

加入'styles': resolve('src/assets/styles')

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'styles': resolve('src/assets/styles'),
      'common': resolve('src/common'),
    }
  },

入口文件mian.js导入reset.css或者normalize.css,重置浏览器默认样式

import 'styles/reset.css'

入口文件mian.js导入border.css解决移动端1px边框问题

import 'styles/border.css'

安装fastclick ,解决在移动端在某些设备和浏览器上click事件会延迟300ms执行，体验不太好

npm install fastclick --save

入口文件mian.js导入

import fastClick from 'fastclick'

fastClick.attach(document.body)

导入iconfont

import 'styles/iconfont.css'

安装stylus,stylus-loader

npm install stylus --save
npm install stylus-loader --save

初始化完成提交项目

1、运行 git status 查看状态

2、运行 git add . 将所有文件增加到本地缓冲区

3、运行 git commit -m 'project init' 提交项目

4、运行 git push 将提交代码推送到线上仓库

开发开始

参考app：

http://piao.qunar.com/touch/

项目码云：

https://gitee.com/GueYue/events

home页面编写

1、header部分

开始

home页面路由配置

src下新建pages文件夹，新建home文件夹，home文件夹下，新建Home.vue,并写下如下代码

<template>
  <div>
	Home
  </div>
</template>
<script>
export default {
  name: 'Home'
</script>

<style>
</style>

router下的index.js中

导入模板

import Home from '@/pages/home/Home'

routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }]

内容

第一个功能的开发可以就在master分支开发，不用修改git分支

在home文件夹下新建components文件夹,components下新建Header.vue 文件，写下

<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      输