45-VUE-2

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"的去进行更深一级的分类。