www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

cli以及组件之间的传值,cli的使用方法

2019-06-14 03:16 来源:未知

首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里)

时代的发展,前端开发也越来越复杂化,从简单的切图到如今的全栈攻城狮!我们也需要不断进步跟上时代的脚步,如今最火的vue框架使用,今天给大家分享一下vue脚手架的使用方法!

Web前端 1

1.定义组件Web前端,

先说一下vue的特点:

Vue

Web前端 2

轻 小  易用  性能高  数据双向绑定  组件化

(一)安装node.js

首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399

安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

Web前端 3

查看node版本

Web前端 4

这几点是我总结的就不一一具体说明了。

(二)安装vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

同样可以使用 cnpm -v 查看是否安装成功

Web前端 5

查看cnpm版本

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

Web前端 6

vue版本查看

如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

2.定义路由

下面给大家介绍具体的使用方法:

(三)生成项目

首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

Web前端 7

模板过程

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js

Web前端 8

更改配置

建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ' ./ '(原本为 ' / '),是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的(服务器上没问题)。所以如果需要在本地打开打包后的文件,就得修改文件路径。

Web前端 9

开发环境

(四)打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入 npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

3.创建router实例并将定义好的路由传入

nodejs

(五)项目解析

Web前端 10

npm webpack

1、 index.html——[主页]

index.html如其他html一样,但一般只定义一个空的根节点,在main.js里面定义的实例将挂载在根节点下,内容都通过vue组件来填充

Web前端 11

index.app

4.创建和挂载根实例

vue的组件都是通过.vue文件来实现,这些文件无法被浏览器解析的,需要webpack

2、main.js——[入口文件]

main.js主要是引入vue框架,根组件及路由设置,并且定义vue实例,下图中的

1>router就是设置路由器
2>template:"<App/>"就是设置#app的模板为<App></App>
3>components:{App}就是引入的根组件App.vue

后期还可以引入插件,当然首先得安装插件。

Web前端 12

main.js

Web前端 13

vue-cli 脚手架:

3、App.vue——[根组件]

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

Web前端 14

App.vue

【template】
其中模板只能包含一个父节点,也就是说顶层的div只能有一个(例如下图,父节点为#app的div,其没有兄弟节点)
<router-view></router-view>是子路由视图,后面的路由页面都显示在此处
打一个比喻吧,<router-view>类似于一个插槽,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示

【script】
vue通常用es6来写,用export default导出,其下面可以包含数据data,生命周期(mounted等),方法(methods)等,具体语法请看vue.js文档,在后面我也会通过例子来说明。

【style】
样式通过style标签<style></style>包裹,默认是影响全局的,如需定义作用域只在该组件下起作用,需在标签上加scoped,<style scoped></style>
如要引入外部css文件,首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader,回车。安装完成后,就可以在style标签下import所需的css文件,例如:

<style>

  import './assets/css/public.css'

</style>

这样,我们就可以把style下的样式封装起来,写到css文件夹,再引入到页面使用,整个vue页面也看上去更简洁。

再来说一下vue-cli

用来生成vue的模板(架子),相当于按照设计图搭建好房子的架子。

4、 router——[路由配置]

router文件夹下,有一个index.js,即为路由配置文件

Web前端 15

router

这里定义了路径为'/'的路由,该路由对应的页面是Hello组件,所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
类似的,我们可以设置多个路由,‘/index','/list'之类的,当然首先得引入该组件,再为该组件设置路由。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

一、安装vue-cli脚手架工具

开发步骤

5、其他组件

例如现有组件footer.vue,原文地址

<template>
    <div class="footer fixed">
        <ul>
            <li><router-link to='/'>首页</router-link></li>
            <li><router-link to='/manage'>人员管理</router-link></li>
        </ul>
    </div>
</template>

<style scoped>
    li a{display: inline-block; width: 100%; height:100%;}
    .footer{width:100%; height:50px; bottom:0;}
    ul{display: flex; height:100%; line-height:50px;}
    ul li{flex: 1; background-color:#f1f1f1;}
    .isIndex li:first-child{background-color:#d3d3d3;}
    .isIndex li:first-child a{color:#41b883;}
    .isManage li:last-child{background-color:#d3d3d3;}
    .isManage li:last-child a{color:#41b883;}
</style>

如果在其他页面中有使用到该组件可以如下:

<template>
    <div>
        欢迎来到人员管理系统
        <footer-nav v-bind:class="{'isIndex':isNowPage}"></footer-nav>
    </div>
</template>

<script>
    import FooterNav from '../../components/footer.vue'
    export default{
        components: {
            FooterNav
        },
        data(){
            return{
                isNowPage: true
            }
        }
    }
</script>

(1)引入组件 import FooterNav from '../../components/footer.vue'

(2)局部注册 注意写在export default内部,components:{FooterNav},该写法为es6写法阮一峰es6教程,将视图中的使用的组件和相关数据对外开放,在内部vue-loader会进行相关操作的处理

(3)使用组件 <footer-nav></footer-nav> 注意命名,驼峰法定义的组件FooterNav需在使用时用短横线连接<footer-nav>

注意:相对路径中./为当前目录../为上级目录

cnpm install vue-cli -g

1、下载node

二、 创建项目

2、下载webpack

vue init webpack-simple vue_webpack 

npm install webpack -g

使用的是webpack-simple模板,项目名为vue_webpack , webpack-simple和webpack模板区别就是少了代码检查和单元测试这些东西.

3、安装脚手架npm install vue-cli -g

三、安装项目需要的依赖文件

4、根据模板创建项目

进入vue_webpack项目文件夹

simple 完全没用

cnpm install安装完成后 项目目录下会多出node_modules文件夹,所有依赖文件都在里面,现在可以测试项目是否创建成功: npm run dev,默认8080端口,需要修改可以到 package.json中在scripts的dev后面添加--port8000。

webpack-simple 用他

App.vue后缀为.vue的文件基本格式为:template script style 三部分组成

webpack 有校验

四、项目上线

browserify-simple

自己的项目文件都需要放到 src 文件夹下

browserify找到文件夹进去

项目开发完成之后,可以输入 npm run build 来进行打包工作,

vue init <模板的名称> 工程的名称(不用用中文)

打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

如果需要1.0  vue init webpack-simple[#1.0]

项目上线时,只需要将 dist 文件夹放到服务器就行了。

webpack-simple-demo

父组件和子组件之间进行数据传递:

项目名称,项目描述,作者,是否用sass

在1.0中有$dispatch和$broadcast,但是在2.0中取消了,同样1.0中支持的双向数据绑定<Child :fff.sync=”hu”></Child>,在2.0中也不支持了现在依然还是使用下面的方式来做。

5、进入项目文件夹

下面的例子中app为父组件,child和news为app的子组件,child1为child的子组件。下面将演示从app向另三个子组件传递数据 和 从三个子组件向app父组件传递数据。

6、npm install下载依赖项(各种loader)

先看一下目录结构:使用的是 webpack-simple模板

因为文件是.vue结尾的浏览器不认识需要loder进行解析。

Web前端 16

7、安装路由和交互

页面布局:

npm install vue-router vue-resource --save

Web前端 17

8、启动项目npm run dev

一、从子级向父级传递数据

以上就是项目的创建!

1、通过事件的方式从子级向父级传递数据:

编写项目

在父级中使用了模块后通过下面的方式和子集进行通信,getChildDate是在父级中定义的方法,这个名字随便取,通过该方法接收子集传来的数据。Getfromchild是在子集中定义的方法,通过$emit(参数)的形式向父级传递数据,其中第一个参数是在父级中绑定的方法这里就是Getfromchild,第二个参数是要传递的数据,如有多个就写成数组。

编写项目        App.vue 主文件        

<Child v-on:getfromchild="getChildDate"></Child>

所有的html写在 template            

Web前端 18

模板里面必须有一个根文件        

2、通过传递对象的方式

所有的js export default {

如果是父级传数据到子级后,修改子集数据的同时父级也要跟着改变,可以使用另一种方式,在从父级往子级传的时候把要传的数据a放在一个对象里,把这个对象传过去,在子级中我们不去修改这个对象,而是修改他的属性a的值,父级中同样会跟着改变。

name: 'app',

二、通过props的方式从父级向子级传递数据:

data () {return {msg: 'Welcome to Your Vue.js App'}},methods:{}}

在父级中:fff是在子级中要用的名字,如果fff前面有:那么后面的hu就是个变量,在data中要去定义。如果没有那么就是普通字符串。

数据必须放在函数的返回值中

<Child :fff=”hu”></Child>

组件的写法

在子级中:用props去接收传来的数据

1、创建文件 .vue结尾

父组件:

2、写文件

Web前端 19

<template>

子组件child

写HTML

Web前端 20

</template>

子组件child的子组件child1

export default {data(){return {}},methods:{}}

Web前端 21

<style>

子组件news

写样式

Web前端 22

</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

3、在主组件中引用      

您可能感兴趣的文章:

  • vue-cli之router基本使用方法详解
  • 在vue-cli脚手架中配置一个vue-router前端路由
  • 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
  • 基于vue-cli vue-router搭建底部导航栏移动前端项目

a)import XXX from ‘上面创建的文件的路径’       

 b)挂在js里 data(){},  components:{XXX}        

c)在template里面用<xxx><xxx>

路由

1、修改文件

找到webpack.config.js

看有没有

resolve: {alias: {'vue$': 'vue/dist/vue.esm.js'}}

如果没有

resolve: {alias: {'vue':'vue/dist/vue.js'}}

2、再准备一些组件

3、修改main.js(入口文件)

a)引入路由文件

import VueRouter from 'vue-router'

b)开启路由

Vue.use(VueRouter);

c)写模板,或者是引入模板 const First={template:'<div>我是第一个模板</div>'};

import second from './component/second.vue';

d)配置路由

const router=new VueRouter({

routes:[{path:'/first',component:First},{path:'/second',component:second}]

})

e)在vue中把路由挂载上

new Vue({router,el: '#app',render: h => h(App)})

f)在主模板中写路由的按钮和展示

<router-link to="/first">111</router-link>

<router-link to="/second">111</router-link>

<router-view></router-view>

项目打包:

npm run build

会生成一个文件dist文件

上线:

上线要用dist文件

注:可能会因为loader不全报错只要再重新下载loader就可以了

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:cli以及组件之间的传值,cli的使用方法