vue 组件开发、vue自动化工具、axios使用与router的使用(3)

一. 组件化开发

1.1 组件[component]

　　在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码把[HTML、css和javascript]封装到一个文件的模式，我们成为“组件”。

　　组件有两种：默认组件[全局组件] 和 单文件组件

1.1.1 默认组件

<div id="app">
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
    <addnum></addnum>
</div>
<script>
    Vue.component("addnum",{
        template:'<div><input type="text" v-model="num"><button @click="num+=1">点击</button></div>',
        data: function(){
            // 写在这里的数据只有当前组件可以使用
            return {
                num:1,
            }
        }
    });

    var vm = new Vue({
        el:"#app",
        // 这里写的数据是全局公用的，整个文件共享
        data:{

        }
    })
</script>

二 Vue自动化工具（Vue-CLI）

　　Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

2.1 nvm工具的安装

nvm工具的下载和安装： https://www.jianshu.com/p/d0e0935b150a

　　　　　　　　　　    https://www.jianshu.com/p/622ad36ee020

2.1.1 常用的nvm命令

nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js
nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本    

　　如果使用nvm工具，则直接可以不用自己手动下载，如果使用nvm下载安装 node的npm比较慢的时候，可以修改nvm的配置文件(在安装根目录下)

# settings.txt
root: C:\tool\nvm    [这里的目录地址是安装nvm时自己设置的地址,要根据实际修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

2.2 安装node.js

　　Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

• 运行环境：后端语言一般运行在服务端，前端语言一般运行在客户端的浏览器上；
• 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能写入数据库。

　　我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】

　　检验是否安装成功，执行一下代码

node -v

2.3 npm安装

　　在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

　　npm常用命令

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

2.4 安装 Vue-CLI

npm install -g vue-cli

如果安装速度过慢，一直超时，可以考虑切换npm镜像源：http://npm.taobao.org/

2.5 使用Vue-CLI初始化创建项目

2.5.1 生成项目目录

　　使用vue自动化工具可以快速搭建单页应用项目目录。

　　该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

//进入创建项目的目录

// 生成一个基于 webpack 模板的新项目
vue init webpack 项目名
例如：
vue init webpack myproject

// 启动开发服务器 ctrl+c 停止服务
cd myproject
npm run dev           # 运行这个命令就可以启动node提供的测试http服务器

运行了上面代码以后,终端下会出现以下效果提示：

那么访问：http://localhost:8080/

2.5.2 项目目录结构

src  主开发目录，要开发的单文件组件全部在这个目录下的components目录下。

static 静态资源目录，所有的css,js，静态文件都放在这个文件夹下。

dist 项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中
　　 【后面打包项目，让项目中的vue组件经过编译编程js代码，dist就出现了。

node_modules 是node的包目录。

config 配置目录。

build 是项目打包时依赖的目录。

src/router 路由，后面需要使用router的时候，自己创建，声明。

2.5.3 项目执行流程

　　整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件APP.vue,APP.vue中会通过组件嵌套或者路由来引用componts文件夹中的其他的单文件组件。

三. 单文件组件的使用

组件有两种：普通组件、单文件组件

普通组件的缺点：

1. html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。

2. 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。

3. 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。

　　将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："Home.vue"。

　　创建一个单文件组件

3.1 template 编写html代码的地方

<template>
  <div id="Home">
    <span @click="num--" class="sub">-</span>
    <input type="text" size="1" v-model="num">
    <span @click="num++" class="add">+</span>
  </div>
</template>

3.2 script编写vue.js代码

<script>
  export default {
    name:"Home",
    data: function(){
      return {
        num:0,
      }
    }
  }
</script>

3.3 style编写当前组件的样式代码

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

3.4 完成案例-点击加减数字

• 创建components/Home.vue

<template>
    <div id ='home'>
        <Menu />
        <span @click='num--'>-</span>
        <input type="text" v-model='num'>
        <span @click='num++'>+</span>
        <Footer :mynum='num' title='我是父类传过来的字符串'/>
        <!-- 给子组件传输变量需要加':',字符串不需要加':'-->
    </div>
</template>

<script>
import Menu from './HomeSon/Menu'
import Footer from './HomeSon/Footer'
export default {
    name:'Home',
    data() {
        return {
            num:0,
        }
    },
   components:{
       Menu,
       Footer,

   }
}
</script>

<style scoped>
#home{
    line-height: 50px;
}
#home span{
    color:green;
    font-size:20px;
    border:2px solid red;
}

</style>

• 在App.vue组件中调用上面的组件

<template>
  <div id="app">

   <Home/> 

  </div>
</template>

<script>

import Home from './components/Home'

export default {
  name: 'App',
  components: {
    Home,
    Weather,

  }
}
</script>

<style>

</style>

• 效果

4.4 组件的嵌套

　　有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.

例如,我们可以声明一个组件,作为父组件

• 在components/创建一个保存子组件的目录HomeSon

• 在HomeSon目录下,可以创建当前页面的子组件,例如,是Menu.vue

//  组件中代码必须写在同一个标签中
<template>
    <div id="menu">
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>

<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

• 然后，在父组件中调用上面声明的子组件。

• 最后,父组件被App.vue调用.就可以看到页面效果.

• 效果:

3.5 传递数据

例如,我们希望把父组件的数据传递给子组件.

可以通过props属性来进行传递.

传递数据三个步骤：

1 在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据

<Menu :mynum="num" title="home里面写的数据"/>

# 上面表示在父组件调用Menu子组件的时候传递了2个数据：
  1 如果要传递变量[变量可以各种类型的数据]，属性名左边必须加上冒号:，
  　同时，属性名是自定义的，会在子组件中使用。
  2 如果要传递普通字符串数据，则不需要加上冒号:，

2 在子组件中接收父组件传递过来的数据，需要在vm子组件对象中，使用props属性接收。

<script>
  export default {
    name:"Menu",
    props:["mynum","title"],
    data: function(){
      return {
        msg:"这是Menu组件里面的菜单",
      }
    }
  }
</script>

// 上面 props属性中表示接受了两个数据。

3 在子组件中的template中使用父组件传来的数值。

<template>
    <div id="menu">
      <span>{{msg}}，{{title}}</span>
      <div>hello，{{mynum}}</div>
  </div>
</template>

效果：

步骤流程解析数据传输过程

数据传输注意事项

使用父组件传递给子组件时，注意一下几点：
1    传递数据是变量的时候，需要在属性左边添加冒号 “：”，
     传递数据是变量，叫做“动态数据传递”，
     传递数据不是变量，叫做“静态数据传递”。

2 　 父组件中修改了数据，在子组件中会被同步修改，但是，子组件中的数据修改不会影响到父组件中的数据。
　　 这种情况叫做“单项数据流动”。

四. 在组件中使用axios获取数据

　　默认情况下，我们的项目中并没有对axios包的支持，所以我们需要下载安装。

在项目根目录中使用 npm安装包。

npm install axios

　　安装完成后，在main.js中，导入axios，并把axios对象挂在到vue属性中，这样我们可以使用vue的属性使用axios。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App' // 这里表示从别的目录下导入 单文件组件
import axios from 'axios'; // 从node_modules目录中导入包
Vue.config.productionTip = false

Vue.prototype.$axios = axios; // 把对象挂载vue中

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

　　在组件中使用axios获取数据

<script>
  export default{
    。。。
    methods:{
      get_data:function(){
         // 使用axios请求数据
        this.$axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳").then(function(response){
            console.log(response);
        }).catch(function(error){
            console.log(error);
        })
      }
    }
  }
</script>

效果:

五. 路由（Router）

安装

npm install --save vue-router

5.1 创建路由文件

　　路由文件可以直接创建在src目录下，但是如果项目大了， 分成多个不同的大平台或者大的子项目，可以选择分目录保存路由，

src/router/index.js // 前台路由

src/router/backend.js // 后台路由

5.2 路由信息配置

　　在index.js文件中编写初始化路由信息,以及绑定地址和组件的映射关系。

import Vue from 'vue'
import Router from 'vue-router'

// 导入路由中需要使用的组件
import Home from '@/components/Home'
import AddNum from '@/components/AddNum'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router); //把Router挂载到vue对象中

export default new Router({
  routes:[
    // 路由信息
    {
      path:"/",
      name: "Home",
      component: Home
    },
    {
      path:"/num",
      name: "AddNum",
      component: AddNum
    },
    {
      path:"/hw",
      name: "HelloWorld",
      component: HelloWorld
    },
  ]
})

5.3  main.js文件中注册路由信息

　　index.js路由信息要被main.js加载,所以需要在src/main.js中导入路由对象。

5.4 在APP.vue中的html代码中，启动路由

<router-view/>

　　通过链接可以切换路由标签里面对应的组件，链接的地址是上面index.js文件中定义的path值，不过链接标签是"router-link",链接地址用'to'来定义：

//相当于a标签
<router-link to="/">站点首页</router-link>
<router-link to="/num">AddNum</router-link>

链接地址中可以传递参数，格式如下：

// name对应的是路由中定义的一个path对应的name属性
    <router-link :to='{name:"UpDate",params:{code:item.code}}'>

有时候需要在组件的js中跳转页面，也就是改变路由，改变路由有下面这些方式：

// 当前页面重新加载
this.$router.go('/user');

// 跳转到另外一个路由
this.$router.push({path:'/user'});

// 获取当前的路由地址
var sPath = this.$route.path;