概要：
主要内容：vue安装时常用命令，文件目录介绍，better-scroll库的使用，项目部分优化措施
* node安装
node -v 检查node版本
* vue-cli全局安装
npm install -g vue-cli //加-g是安装到全局 安装完成后使用vue 回车 可以看到针对vue的命令行
* 使用淘宝镜像 网址:http://npm.taobao.org
安装：npm install cnpm -g --registry=https://registry.npm.taobao.org
* vue项目创建
1、vue init webpack vue-project-name
或者使用简单创建 vue init webpack-simple vue-project-name
2、cd vue-project-name
3、npm install //安装vue以及vue插件
4、npm run dev //运行项目
注：vue-project-name 是项目的名称
* 项目目录结构介绍
build和config是关于webpack的配置 里边包括一些server和端口
node_modules：安装依赖代码库
src:源码
static:存放第三方静态资源，static里面的.gitkeep，如果为空，也可以提交到gitHub上面，正常情况下，是不可以提交的。
.babelrc：把es6文件编译成es5
.babelrc文件
{
"presets": ["es2015", "stage-2"], //表示预设，表示babelrc转换预先需要安装的插件
"plugins": ["transform-runtime"], //把es6的方法做转换
"comments": false //false表示转换后代码不生成注释
}
.editorconfig：编辑器的配置
.editorconfig
charset = utf-8 //编码
indent_style = space //缩进风格,基于空格做缩进
indent_size = 2 //缩进大小是2格
end_of_line = lf //换行符的风格
insert_final_newline = true //当你创建一个文件，会自动在文件末尾插入新行
trim_trailing_whitespace = true //自动移除行尾多余空格
.eslintignore 忽略语法检查的目录文件
就是忽略对build/*.js和 config/*.js
package.json :
{
"name": "demo",
"version": "1.0.0",
"description": "demoApp",
"author": "",
"private": true,
"scripts": { /*表示可以执行一些命令，例如：npm run dev会执行node build/dev-server.js，npm run build会执行node build/build.js，因此可以通过scripts配置脚本*/
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": { /*项目的依赖*/
"vue": "^2.2.2",
"vue-router": "^2.2.0"
},
"devDependencies": { //编译需要的依赖
.......................
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
入口文件： index.html 和 main.js
* 列表滑动相关 better-scroll 基于iscroll库实现
import BScroll from 'better-scroll'
new BScroll('.warpper') 通过实例化容器来实现滚动
需要确保在数据列表加载完成后实例化
* 优化相关
==> 缓存路由组件 实现方式 在router-view 外边包裹keep-alive标签实现对应组件的缓存
子路由使用回退的时候反复跳转的原因是使用push的方式进行跳转 路由队列里保存了重复的项
解决的方案是在router-link中使用replace的方式进行跳转
==> 路由懒加载 在打包前进行代码分割
import xxx from '.../xx.js' 改写成 const xxx=()=>import('.../xx.js')
这样的话路由中配置的组件compinent对应的组件即为路由组件函数
当且仅当执行此函数才会加载路由组件、这个函数在请求对应的路由路径是才会执行到
==> 图片懒加载 使用到一个库 vue-lazyload
安装 npm install --save vue-lazyload
引入 import VueLazyLoad from 'vue-lazyload'
申明 Vue.use(VueLazyload，{
loading:loading-img
})
或者
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
使用 测试时候网速限制工具 赛风
==> 日期过滤器 import Vue from 'vue'
import moment from 'moment'
//自定义过滤器
Vue.filter('data-format',function(value,formatStr='YYYY-MM-DD HH:mm:ss'){
return moment(value).format(formatStr)
})
date-fns 轻量级的日期格式化库 仅需要引用对应的函数即可
引用 import './filters' //加载过滤器
使用 {{time | data-format}}
==> 打包文件分析与优化
npm run build --report