目录文件大致作用：
node-modules文件：（包）
public文件：（html的根）
src文件（主要操作文件）：
assets：（公共资源，例如：小图标。在public的index使用@调用）
componets:(组件，存放工具，存放组件，存放不是页面的东西)
router:（路由，路由配置）
store:(存储，状态管理，用于处理views)
views：视图（放界面页面）
app.vue(全局导航，入口，导航路径，公共配置，操作界面)
main.js(调用模块，全局配置，网站资源)
registerservicework.js(pwa技术，关于服务配置)
过滤器：
过滤器科用在两个地方：双大括号插值 和 v-bind 表达式 中。过滤器应该被添加在js表达式的尾部，由管道符号指示
// 双大括号中
{{ message | capitalize }}
// 在v-bind 中
<div v-bind:id=" rawId | formatId"></div>
定义过滤器的方式：
1.在组件选项中定义本地过滤器。过滤器的内容由过滤器的返回值决定
2.在创建Vue实例前定义全局过滤器
3.过滤器串联
4.接收多个参数的过滤器
抽离过滤器，定义到当个文件中
1.抽离过滤器到当个文件夹中
2.在组件js中引入过滤器
3.Vue组件中使用过滤器
全局过滤器：
<body>
<div id="app1">
app1的时间格式化：{{dataStr | formatData}}
</div>
<div id="app2">
app2的时间格式化：{{dataStr | formatData}}
</div>
<script type="text/javascript">
Vue.filter('formatData',function(dataStr){
var newDate = new Date();
var y = newDate.getFullYear();
var m = newDate.getMonth() + 1;
var d = newDate.getDate();
var hh = newDate.getHours();
var mm = newDate.getMinutes();
var ss = newDate.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
});
var vm1 = new Vue({
el : "#app1",
data : {
dataStr : new Date()
},
methods : {}
});
var vm2 = new Vue({
el : "#app2",
data : {
dataStr : new Date()
},
methods : {}
});
</script>
</body>
运行如下：
私有过滤器: 私有过滤器的定义需要放在Vue对象里，属性名为：filters，其值为对象，对象内容为方法，其中方法名为私有过滤器的名称，方法参数是需要处理的数据，返回值为处理之后的展示值，也可以同时定义多个私有过滤器。
<body>
<div id="app1">
app1的时间格式化：{{dataStr | formatData}}
</div>
<div id="app2">
app2的时间格式化：{{dataStr | formatData}}
</div>
<script type="text/javascript">
var vm1 = new Vue({
el : "#app1",
data : {
dataStr : new Date()
},
methods : {},
filters:{
formatData:function(dataStr){
var newDate = new Date();
var y = newDate.getFullYear();
var m = newDate.getMonth() + 1;
var d = newDate.getDate();
var hh = newDate.getHours();
var mm = newDate.getMinutes();
var ss = newDate.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
});
var vm2 = new Vue({
el : "#app2",
data : {
dataStr : new Date()
},
methods : {}
});
</script>
</body>
运行如下:
