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

原创
2018/04/12 10:12
阅读数 270

这篇主要是关于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

//父组件 HTML
<translateOutput v-text="translatedText"></translateOutput>

//父组件 script
data:function(){
    return {
      translatedText:''
    }
},
methods:{
    translateText:function(text,language){
        this.translatedText = text;
    }
}


//子组件 HTML
<h2>{{translatedText}}</h2>

//子组件 script
export default {
    name: 'translateOutput',
    props:[
      "translatedText"
    ],
    data(){
        return {
         
        }
    },
    methods:{
        
    } 
}
</script>

2.子组件传父组件:

在子组件中注册事件:

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

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

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

具体的代码:

如下,在子组件中注册formSubmit事件并传递相关参数,在父组件中绑定方法获取数据。

//子组件
<template>
  <div id="translateForm">
      <form v-on:submit="formSubmit">
        <input type="text" placeholder="输入需要翻译的内容" v-model="textToTranslate">
      </form>
  </div>
</template>

<script>
export default {
    name: 'translateForm',
    data(){
        return {
          textToTranslate:"",
        }
    },
    methods:{
        formSubmit:function(event){
          this.$emit("formSubmit",this.textToTranslate);  //注册事件,随便起名 
          event.preventDefault();
        }
    }
}
</script>
//父组件
<translateForm v-on:formSubmit="translateText"></translateForm>

 methods:{
    translateText:function(text,language){
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180416T070909Z.e67aefe9783c2249.655622543855bc0c994a38e347e43f047f8100b0&lang='+language+'&text=' + text).then((response) => {
           this.translatedText = response.body.text[0];
      })
    }
  }

六.路由

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;
    })
}


注意:我在写代码的时候经常遇到修改完代码保存后热加载失效,不能自动运行保存结果,每次都需要重新npm run dev.解决方法是:sudo npm run dev.就可以正常运行了。但是,具体原因出在哪里还没搞明白,可能是权限不够吧!如果有知道的人,欢迎指点!

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部