文档章节

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

wftt
 wftt
发布于 2018/04/12 10:12
字数 2018
阅读 85
收藏 0

这篇主要是关于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.就可以正常运行了。但是,具体原因出在哪里还没搞明白,可能是权限不够吧!如果有知道的人,欢迎指点!

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
2018/11/28
0
0
Vue学习路径-轻松从基础到实战

里边全部是vue的免费视频,全算下来有100多集。希望可以帮助前端小伙伴学习Vue。 学习一直属于孤独者,任何伟大的发明家都忍受过寂寞和无助,但他们最终走了出来。也许你刚来到本站,也许你刚...

技术胖
2018/08/27
0
0
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
2018/11/28
0
0
Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC
2018/04/19
1K
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
2018/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
46分钟前
3
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
123
4
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部