学习vue——vue.js入门(三)

vue脚手架vue-cli

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板。

安装步骤

第一步： Node.js 安装
Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/
nodejs_download
你可以根据不同平台系统选择你需要的 Node.js 安装包。

Node.js 历史版本下载地址：https://nodejs.org/dist/
安装完成后在cmd窗口下输入node -v 和 npm -v，如果出现下面的版本信息，则安装成功。

第二步：全局安装 vue-cli
cmd下执行命令npm install -g vue-cli

第三步：使用vue-cli来创建一个基于 webpack 模板的新项目
cmd利用cd指令进入到保存项目的文件夹下，然后输入命令
vue init webpack

第四步：在项目的根目录下执行npm run dev

在页面上输入http://localhost:8080/#/

这样一个vue脚手架项目就建好了

vue脚手架项目main.js介绍

import Vue from 'vue' //引入vue
import App from './App' //引入vue顶级组件
import router from './router' //引入路由

Vue.config.productionTip = false //阻止生产模式

/* eslint-disable no-new */
new Vue({ //创建vue实例
    el: '#app', //挂载dom
    router, //传入路由渲染
    components: { App }, //传入顶级组件渲染  
    template: '<App/>'
})

组件compoent

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
vue单文件组件 里面包含html，js，css三部分组成

<template>
  <div id="app">
    
  </div>
</template>

<script>
//导出当前组件 导出的是一个vue的实例对象
export default {
  //注册组件
  components:{},
  //数据
  data(){
    return {

    };
  },
  //方法
  methods:{},
  //计算属性
  computed :{},
  //过滤器
  filters:{}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

自定义组件
1.写一个.vue组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld'
    }
  }
}
</script>

<style scoped>

</style>

2.引入组件
在需要的页面里面引入组件
//引入组件
import HelloWorld from “./components/HelloWorld.vue”
3.注册组件
在需要的页面的components里面
//注册组件
components:{
HelloWorld
},
4.使用组件
在需要的页面里面

<HelloWorld/>

<template>
  <div id="app">
    <h1>测试</h1>
    <!-- 使用组件 -->
    <HelloWorld/>
  </div>
</template>

<script>
//引入组件
  import HelloWorld from "./components/HelloWorld.vue"
//导出当前组件 导出的是一个vue的实例对象
export default {
  //注册组件  HelloWorld 等同于 "HelloWorld" : HelloWorld
  components:{
    HelloWorld
  },
  //数据
  data(){
    return {

    };
  },
  //方法
  methods:{},
  //计算属性
  computed :{},
  //过滤器
  filters:{}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

全局组件的使用
第一步 先建一个组件

<template>
    <div>
        <h1>我是全局组件！！！！！！！！！！！！！</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style  scoped>

</style>

第二步 新建一个js注册并导出这个组件

import global from './global.vue'
// 这里是重点
const myGlobal = {
    //注册全局组件
    install: function(Vue) {
        Vue.component('myGlobal', global)
    }
}

// 导出组件
export default myGlobal

第三步在main.js里面引入并绑定这个组件，并且要在vue实例创建之前，不然没办法挂载，就像我们使用插件时，也要先引入并绑定才能使用

// 引入自定义组件。index.js是组件的默认入口
import myGlobal from '../src/components/global_components'
Vue.use(myGlobal);

第四步使用

<myGlobal></myGlobal>

路由

路由是什么我们可能不太理解，但是我说一个东西我们一定知道，就是"路由器",路由器的功能用一句话概括就是：数据从一个网络到另一个网络就是靠路由器来完成的。

写路由

import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入路由
//引入vue页面
import HelloWorld from '@/components/HelloWorld'
//第一步引入需要跳转的页面
import home from '@/components/home'

//注册路由
Vue.use(Router)

//创建路由 
export default new Router({
    //路由配置
    routes: [{
        path: '/', //路径
        name: 'HelloWorld',
        component: HelloWorld //注册组件
    }, { //第二步配置路由
        path: '/home', //路径
        name: 'home',
        component: home //注册组件
    }]
})

只是配置了路由是没有效果的，还需要在页面里面配置上路由出口
一般放在顶级组件APP上即可
路由出口：加载路由 相对的组件进来，放置的位置

<router-view></router-view> 

配置嵌套路由

import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入路由
//引入vue页面
import HelloWorld from '@/components/HelloWorld'
//第一步引入需要跳转的页面
import home from '@/components/home'

//配置嵌套路由 第一步引入页面
import you from '@/components/you'
import mine from '@/components/mine'

//注册路由
Vue.use(Router)

//创建路由 
export default new Router({
    //路由配置
    routes: [{
        path: '/', //路径
        name: 'HelloWorld',
        component: HelloWorld //注册组件
    }, { //第二步配置路由
        path: '/home', //路径
        name: 'home',
        component: home, //注册组件
        //第二步配置嵌套路由
        children: [{
            path: '/home/you', //路径
            name: 'you',
            component: you //注册组件
        }, {
            path: '/home/mine', //路径
            name: 'mine',
            component: mine //注册组件
        }]
    }]
})

在子路由的上层页面创建路由出口

<router-view></router-view>