初学vue过程中笔记

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

一、项目准备工作

1.通过gitbash搭建项目

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

winpty vue.cmd create demo

选择默认或自定义

cd demo
npm run serve

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

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

Home.vue

二、引入插件

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

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

      北京
   	

在methods中写函数

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

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

四、请求接口渲染数据

1.安装axios

npm install axios --save

2.引入axios

在main.js中引入

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

3.配置

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

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