45-VUE-2

本文介绍了Vue.js中过滤器的使用方法,并深入探讨了vue-cli的安装与配置过程,包括如何利用模板项目进行开发,以及项目的结构组织方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.过滤器

 

这里又是没见过的语法。

在这里{ { date | dateStr } },这里的意思是从vue里面拿date,然后调用dateStr这个方法,把date传到func里面

这里注意一下,前面的Vue.filter这里是一个静态方法

2.vue-cli

今天主要搞的就是这个,所以今天在这里需要着重讲一下vue-cli

从前端往后台发送了一个http请求,之前我所了解的,无一不是让后台的controller来控制,进行数据交互,然后页面跳转,然后今天所了解到的,还有一个称之为路由:也就是vue-router

这里的意思就是说,我在前端就可以给一些页面设置跳转路径,可以经过后台也可以不经过后台,来直接快速跳转。。。关于路由的实际使用场景,以后接触了再了解把。

3.vue-cli的安装

这里vue-cli提供了6个模板项目,意思应该是,我们执行命令以后,可以自动生成6个模板,用这6个模板来进行开发

这里注意,每一次创建一个模板项目,都要装npm,把安装指令记一下

①先安装node

②安装镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org

③cd demo

④npm install

⑤npm run dev

这里注意,每一次创建一个模板,都要npm install一下

这里vue-cli的安装是什么意思呢,首先安装node,然后通过cmd的指令来安装vue-cli,最后就可以download模板项目,然后就会生成一系列的一个完整项目

4.配置

这个项目,是有一系列的配置的地方的,比如packagejson等

index.js里面就有可以修改端口号的地方

port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

自动打开浏览器

autoOpenBrowser: true,

结构(重点)

这里写的东西,.vue后缀的文件,里面有三要素:templates,js,css

.vue的文件称之为组件

然后这里面的组件(components)里面有一个根组件,这里的根组件就是App.vue

在vue里面是这样设计的,其他的vue文件也就是其他的组件,是可以嵌套在另一个.vue的组件文件上的

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

这里就是,在js里面,会默认的保留一个{ }

在其中会写你的这个组件名,然后含有哪些组件

组件你可以分为父组件,子组件,以及不相关的组件,各个组件之间是可以进行通信的

这个通信,也是非常基本的东西,propes阿等,有点类似android的fragments和activity之间的通信

引入组件就是用import

在这里注意一下,import以后还要映射,直接import以后是没用的,要加

components

组件写完了以后,还要写main.js

main.js才是一个入口

在main.js里面创建一个vue实例,然后在这里面把vue组件加进来

但是这时候只加了app的vue

打包:

npm run build

这里就是打包成一个dist,然后可以放在服务器上跑了

小结:

我们把一个前端页面,完全可以按照功能等方面,进行拆分,拆分完以后分为各个vue,这样就可以重复的对vue进行复用了,之前对于前端的认识,还是比较肤浅的,以为前端就是一些js,其实前端也是可以有其项目结构的,也可以作为一个"project"的去进行更深一级的分类。

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值