Vue基础（2）

vue组件：
组件 (Component) 是 Vue.js 最强大的功能之一，使用组件化方式开发，可以封装可重用的代码，减少重复劳动

接下来，我们来注册一个组件
语法Vue.component(tagName, options)

注册组件

Vue.component('component-a', {
      template: '<div>component-a</div>'
    })

component-a是注册的组件标签，下面就可以使用这个组件了

<div id="app">
             <component-a></component-a>
 </div>

// 创建根实例

new Vue({
  el: '#app'
})

最后，渲染为：

<div id="app">
    <div>component-a!</div>
</div>

通过Vue.component方式注册的组件是一个全局组件 ，我们还可以创建局部组件，通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件

var Child = {
          template: '<div>A custom component!</div>'
        }
        var vm = new Vue({
            el: '#app',
            components:{
                'component-a':Child
            }
        })

局部注册的组件 将只在父组件模板中可用

1.安装git命令行工具:https://git-scm.com/
下载之后会有三个工具：git cmd,git bash,git gui，后面创建vue项目要用到git bash，
使用命令行工具，依次输入：node -v和npm -v，若能显示版本号，则说明安装成功。

2.配置node.js环境
a.配置npm命令安装全局模块的安装路径，默认情况下npm的全局模块安装路径设置在C盘下,这样会占用C盘空间，且不方便查看；

配置步骤：
1.首先在node.js的安装目录根目录下新建两个文件夹：node_global和node_cache(第二步cache配置用到)；
2.打开命令行工具，输入 npm config set prefix "刚刚新建的node_global文件夹路径”
如： npm config set prefix D:\Program Files\nodejs\node_global
b.配置缓存cache的路径；
配置步骤：输入 npm config set cache "刚刚新建的node_cache文件夹路径“
c.设置环境变量：
设置步骤：
1.系统变量中新增NODE-PATH，变量值：“node_gloabal路径/node_modules”；
2.用户变量中修改Path变量
输入：npm install express -g

3.安装Vue cli
vue cli是vue的脚手架工具。
步骤：
1.输入 nmp install -g vue-cli
大多数资料推荐使用淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.输入vue -V查看版本，若显示版本号，则安装成功。
4.新建vue项目
步骤：
1.输入： vue init webpack 项目名称
如：vue init webpack firstvue
2.
这里只在install vue-routeh后输入yes
3.输入这些后在底部会出现提示
cd Vue-Project
npm run dev
4.检查效果
执行npm run dev之后，会在最后显示一个地址：https://localhost:8080