初学vue过程中笔记

写这篇文章是在网上看vue的视频，跟着视频老师实战项目后记的笔记。是想在写下一个项目的忘了的地方再拿出来看看，嘿嘿。应该有很多不足的地方…

一、项目准备工作

1.通过gitbash搭建项目

也可以通过在文件里打开终端 vue create demo 创建

winpty vue.cmd create demo

选择默认或自定义

cd demo
npm run serve

打开项目后，跟着老师一顿操作，虽然没看怎么懂，具体过程是这样的
1.将src目录下assets文件中的图片删除
2.将App.vue中的内容删了，然后是这样

<template>
  <div> 
      	<router-view></router-view>
  </div>
</template>

3.他是将所有组件放在components文件中，所以把views文件，HelloWorld.vue都删除，然后在components文件下创建几个文件（Home，City等），再在Home里面新建Home.vue父组件和其他子组件如Header.vue等
然后修改router文件下index.js代码:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/home/Home'

Vue.use(VueRouter)

  const routes = [
   {
    path: '/',
    name: 'Home',
    component: Home
  }/*,
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/About.vue')
  } */
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.子组件和父组件

在home文件夹下的Home父组件和Header子组件
Header.vue

<template>
    <div>
        这是头部
    </div>
</template>

Home.vue

<template>
    <div class="home">
        <home_header></home_header>
    </div>
</template>
<script>
import home_header from './Header'
export default {
    components:{
        home_header,
    }
}
</script>

二、引入插件

1.在GitHub上直接搜需要的插件安装

安装插件，重启项目，在mian.js中引入插件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

//reset.css->重置样式
import './assets/css/reset.css'
/** fastClick->解决click事件在移动端300ms延迟的问题
 *  https://www.jianshu.com/p/150c305f6930
 *  npm install fastclick 
**/ 
import FastClick from 'fastclick'
FastClick.attach(document.body);
//引入字体图标
import './assets/css/iconfont.css'
//引入适配font.js文件
import './assets/js/font.js'
/*  引入swiper插件
    npm install swiper vue-awesome-swiper --save 
    https://github.com/surmon-china/vue-awesome-swiper
*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import './assets/css/swiper.css'
/* 引入动画animate.css
npm install animate.css --save */
import animate from 'animate.css'
Vue.use(animate)
//引入axios
import axios from 'axios'
Vue.prototype.axios=axios

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、路由跳转

1.router配置

router目录下的index.js中,懒加载不需要引入import，在routes数组中第一个对象Home是常规加载，第二个City是懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'
//引入Home组件,懒加载不需要引入
import Home from '../components/home/Home'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/city',
    name: 'city',
    component: () => import('../components/city/City.vue')//懒加载
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在需要进行跳转的地方绑定事件

<div class="top-left" @click="toCity">
      北京
   	<i class="iconfont">&#xe6aa;</i>
</div>

在methods中写函数

        toCity(){
            this.$router.push({
                path:"/city"
            })
        }

在跳转到的页面还可进行返回

<template>
    <div>
        这是City页头部
        <router-link to='/'>返回</router-link>
    </div>
</template>

四、请求接口渲染数据

1.安装axios

npm install axios --save

2.引入axios

在main.js中引入

import axios from 'axios'
Vue.prototype.axios=axios

3.配置

在components目录下的父组件（Home.vue）目录下

<template>
    <div class="home">
        <Banner></Banner>
        <!-- 传到Icons子组件 -->
        <Icons :iconLists='iconLists'></Icons>
    </div>
</template>
<script>
import Banner from './Banner'
import Icons from './Icons'
export default {
    components:{
        Banner,
        Icons
    },
    <!-- 返回homeIconLists.json中iconLists -->
    data(){
        return{
            iconLists:[]
        }
    },
    <!-- 请求端口 -->
    mounted(){
        this.http();
    },
    methods:{
        http(){
            let secs = this;
            this.axios.get("http://localhost:8081/api/homeIconLists.json").then((res)=>{
                let data = res.data.data[0];
                secs.iconLists = data.iconLists;
            })

        }
    }
}
</script>

在Home.vue的子组Icons.vue中添加一个props

<template>
    <div class="icons">
        <ul>
            <li v-for='(item,index) in iconLists' :key='index'>
                <img :src="item.imgUrl" alt="">
                <p>{{item.title}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['iconLists'],
    data(){
        return{

        }
    }
}
</script>