npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装

npm list                        # 查看当前目录下已安装的node包

npm view 包名 engines            # 查看包所依赖的Node的版本

npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包

npm update 包名                  # 更新node包

npm uninstall 包名               # 卸载node包

npm 命令 -h                      # 查看指定命令的帮助文档

安装Vue-sli

npm install -g vue-cli

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

使用Vue-处理初始化创建起那段项目

生成项目目录

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

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

// 生成一个基于 webpack 模板的新项目

vue init webpack 项目目录名

例如：

vue init webpack myproject

// 启动开发服务器 ctrl+c 停止服务

cd myproject

npm run dev           # 运行这个命令就可以启动node提供的测试http服务器

请访问:http://localhost:8080/

项目目录结构

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

static 静态资源目录,所有的css,js 图片等资源文件放在这个文件夹.

dest项目打包发布文件夹,最后要上线单文件项目文件都要在这个文件夹中(后面打包项目,让项目中的vue组件经过编译变成js代码以后,dist就出现了)

node_modules目录是node的依赖包目录

config是配皮目录

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

sec/router路由,后面需要我们在使用Router路由的时候,自己声明

vue项目执行流程图

缺个图

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

单文件组件的使用

组件有俩种: 普通组件,单文件组件

[普通组件的缺点:

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

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

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

将一个组件相关的HTML结构,css样式,以及交互的JavaScript代码从文件中剥离出来,形成

一个文件,这种文件就是单文件组件,相当于一个组件具有了结构,表现和行为的完善功能,方便组件之间随意组合以及组件的重用,这种温江的宽展名为'vue',比如: 'Home.vue'.

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>

script编写vue,js代码

<script>

  export default {

    name:"Home",

    data: function(){

      return {

        num:0,

      }

    }

  }

</script>

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

<style scoped>

  .sub,.add{

    border: 1px solid red;

    padding: 4px 7px;

  }

</style>

完成案例-点击加减数字

创建Homes.vue

<template>

  <div class="add_num">

      <span @click="num++">+</span>

      <input type="text" size="2" v-model="num">

      <span @click="num--">-</span>

  </div>

</template>

<script>

  export default{

    name:"AddNum",

    data: function(){

      return {

        num: 0,

      }

    }

  }

</script>

<style scoped>

   .add_num{

      font-size: 32px;

   }

</style>

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

<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>

<script>

  export default {

    name:"Home",

    data: function(){

      return {

        num:0,

      }

    }

  }

</script>

<style scoped>

  .sub,.add{

    border: 1px solid red;

    padding: 4px 7px;

  }

</style>

在开发vue项目之前,需要手动把 App.vue的HelloWorld组件代码以及默认的css样式,

组件的嵌套

有时候开发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调用,就可以看到页面效果.

传递数据

父组件的数据传递给子组件

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

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

传递数据三个步骤：

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

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

# 上面表示在父组件调用Menu子组件的时候传递了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. 在子组件中，通过this.$emit()来调用父组件中定义的事件.

<template>

    <div>

      <p>Post的子组件</p>

      <h2>{{fnum}}</h2>

      <p>data={{data}}</p>

      <p>fnum={{fnum}}</p>

      <div><input type="text" v-model="fnum"></div>

    </div>

</template>

<script>

    export default {

        name: "PostSon",

        // 父组件传递数据给子组件: 1. 在父组件中调用子组件的组件名称标签上面声明属性和传递值，2. 在子组件中通过props进行接收

        props:["data","fnum"],  // 接受父组件中传递过来的数据

        // 子组件传递数据给父组件[事件的方式进行传递]：

        watch:{

          fnum(){

            console.log(this.fnum);

            // this.$emit("父元素的自定义事件","要传递的数据");  // 通过this.$emit()方法，子组件可以把数据传递给父组件

            this.$emit("postparentdata",this.fnum);

          }

        }

    }

</script>

<style scoped>

</style>

2. 父组件中声明一个和子组件中this.$emit("自定义事件名称")对应的事件属性。

<template>

    <div>

      <h1>num={{num}}</h1>

      <Son data="我是付组件里面的内容" :fnum="num" @postparentdata="getsondata"></Son>

    </div>

</template>

3. 父组件中，声明一个自定义方法，在事件被调用时，执行的。

<script>

    import Son from "./PostSon"

    export default {

        name: "Post",

        data(){

          return {

            num: 100,

          }

        },

        components:{

          Son:Son,

        },

        methods:{

          getsondata(message){

            console.log("父组件"+message);

            this.num = message;

          }

        }

    }

</script>

在组件中使用axios获取数据

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

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

npm install axios

接着在main.js文件中，导入axios并把axios对象挂载到vue属性中多为一个子对象，这样我们才能在组件中使用。

// 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((response)=>{

            console.log(response);

        }).catch(error=>{

            console.log(error);

        })

      }

    }

  }

</script>