Vue入门学习第二篇:vue-cli

这篇主要是关于vue-cli，分享下自己学到的东西，也为了加深理解。之前发表过一篇“vue-cli脚手架的搭建”，描述了基本操作步骤流程，附上网址：https://my.oschina.net/GracefulTing/blog/1620278。这篇为了全面一点，把之前内容也拿过来了，除此之外还会对具体的文件和内容展开介绍。

一.环境安装

1.安装node,不确定是否安装，在终端运行node -v(版本需要在4.0以上)
2.安装npm,通过淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
3.检验是否安装成功，可以输入node -v回车，npm -v回车,如果有相应版本号，表明安装成功.
4.安装vue-cli，npm install -g vue-cli
(如果出现找不到vue命令或者报错没有权限,可以尝试一下sudo npm install -g vue-cli)

一般，linux和mac安装前需要加sudo，进行全局安装.

5.测试是否安装成功：vue --version.查看版本号，如果显示表明安装成功,没有重复上面步骤4。

二.vue-cli搭建

1.新建文件夹
2.cd 文件夹
3.vue init webpack 项目名称 ----初始化一个项目
4.运行初始化命令的时候需要输入几个基本选项,如果不想填可以直接回车默认



5.打开文件夹,项目文件已生成,如图：



build:操作文件,使用npm run dev时执行的就是这里的文件
config:配置文件,执行文件需要的配置信息
src:资源文件，所有组件以及所需的图片都放在这里
assets:资源文件夹,存放图片之类的资源
components:组件文件夹,组件都放在这个文件夹下
router:路由文件夹,决定了页面之间的跳转
main.js:webpack入口文件
6.在项目文件夹中打开终端运行npm run dev，以热加载形式运行，修改完代码后不需要手动刷新就可以看到效果。
7.浏览器中打开localhost:8080(默认),即可看到相应的界面.默认端口是8080，如果想要修改端口号，在config下index.js文件中修改port.如图17行:

三.主要文件介绍

整体流程是index.html -> main.js -> App.vue.

1、index.html是整个项目的入口文件，和index.html紧密联系的就是main.js文件，main.js是整个项目的逻辑主文件，主要是实例化vue对象，引用需要的组件.

index.html:<div id="app></div>是根容器.



2、main.js:实例化vue对象，主要包含el、template、components.

import：用于导入需要依赖的文件，import A from B： A是自己起的名字，B是组件的名字。

(1)el中的#app指的就是index.html中的根标签.

(2)template：组件调用，满足template的只有一个根标签.这里的内容也就是当作标签使用的。

(3)components：组件注册，其中App来源于代码第4行import App from './App' 中的'./App'，内容是组件名。



3、App.vue：根组件，所有页面都是在App.vue下面进行切换的，可以理解为所有的组件都是App.vue的子组件，一般把公共部分例如头部，底部以及每个页面都出现的内容放在App.vue里面。包含三部分:

(1)template：模板，html结构

(2)script：行为，处理逻辑

(3)style：样式，解决样式，如果使用style scoped表明范围受限，只能当前文件域内使用该样式。



组件，其实就是一个功能页面。组件间要产生联系，需要import引入，然后注册。

嵌套子组件有两种方式：

a.全局注册：

main.js -> import A from B;
-> Vue.component("a",A); //第一个名字 第二个组件

b.局部注册(一般采用局部):

app.vue -> script -> import A from B;

-> export default{

components:{

"a":A //"a"可以省略掉

}

}

-> html -> <a></a>

一般来讲，新建一个vue文件后，先把主要结构写好，然后在App.vue中引入、注册，完成之后就可以在template中就可以调用标签，这样就把父子组件联系起来了。

子组件:name属性很重要，通常和组件名一样，小写 。这里的name是啥，App.vue中标签就是啥。

四.生命周期钩子函数

beforeCreate()：组件实例化前执行的函数.
created()：组件实例化完毕，但页面未显示. (属性绑定，dom未生成)
beforeMount()：组件挂载前，页面仍未展示，但虚拟dom已经配置.
mounted()：组件挂载后，此方法执行后，页面显示.
beforeUpdate()：组件更新前，页面仍未更新，但虚拟dom已经配置.
updated()：组件更新，此方法执行后，页面显示.
beforeDestroy()：组件销毁前.
destroyed()：组件销毁.

五.事件传值

有两种方式，一种是传值：string number boolean，一种是传引用:array object.

1.父组件传子组件:
把内容抽离到app.vue组件中,标签绑定,子组件props

2.子组件传父组件：

在子组件中注册事件：

methods:{
this.$emit("fn","子向父组件传值");        //fn是事件名，第二个参数是传递内容
}

然后在父组件中给标签绑定v-on:fn="func($event)" ,其中$event是固定的.接下来写func方法:

methods:func(title){
this.title= title ;  //=前的title指的是父组件中定义的title,=后的title指的是传递的内容“子向父组件传值”
}

六.路由

vue为我们提供了路由跳转，相比a标签跳转，a标签在刷新页面时会进行网络请求，重新加载页面，而路由跳转不重新进行网络请求，也不刷新页面。



可以在一开始新建项目的时候install vue-router选择yes，当然前期选择no，在需要的时候可以重新安装一下也可以。

1.路由模块安装：npm install vue-router --save-dev

2.安装好后在main.js中引入路由：import VueRouter from 'vue-router' ；

Vue.use(VueRouter)；

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'

Vue.config.productionTip = false
Vue.use(VueRouter)

// 配置路由
const router = new VueRouter({
routes:[
{path:"/",component:Home},
{path:"/helloworld",component:HelloWorld}
],
mode:"history"
})

new Vue({
router,
el: '#app',
template: '<App/>',
components: { App }
})

然后按照上图一样进行配置，给出路径和组件.引入Home和Helloworld组件 import .. from ..并在实例化Vue对象中用router,即和el同级.

如果不在new Vue中使用router会报错，如下截图:



3. 在App.vue中使用标签<router-view></router-view>和<router-link to="/"></router-link>.

<template>
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/helloworld">Hello</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>

也可以直接在实例化对象时使用:

new Vue({
// el: '#app',
// components: { App },
// template: '<App/>'
router,
template:`
<div id="app">
<ul>
<li>
<router-link to="/">Users</router-link>
<router-link to="/test">Test</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}).$mount("#app")

七.HTTP

vue中的$http服务需要引入一个叫vue-resource.js的文件.

1.安装模块:

npm install vue-resource --save-dev

2.main.js中引入:

import VueResource from 'vue-resource'

Vue.use(VueResource)

3.在需要请求的位置请求接口获取数据:

created(){
this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
console.log(data);
this.users = data.body;
})
}