这里我会更细致的讲解vue的一些使用,但是语法什么的大家还是仔细看看文档吧~,包括如何自定义webpack项目模版,没有接触过vue的同学,可以先了解下vue的一些语法什么的,前往时空隧道:vue官方文档
先给大家推荐一些我常用的文档吧
- Element UI 样式框架文档
- ECharts 图形绘制文档
- stylus 语法文档,区别于传统css语法
- css 动画样式文档
- HTML CSS 特殊字符表
- css 中content内容特殊形状
Vue项目搭建
这里使用的是vue-cli脚手架,webpack包管理,我的设备是mac, 不知道window上是否是一样的操作~
打开终端工具,命令行输入如下
npm install -g vue-cli # 全局安装vue-cli脚手架
vue init webpack vueDemo #初始化vue项目 vueDemo:文件夹名称
之后会提示输入一些内容,如下
? Project name (vueDemo) #输入你的项目名称
? Project description (A Vue.js project) #输入项目描述
? Author (zhangdinghui ) # 项目创建者
❯ Runtime + Compiler: recommended for most users # 直接回车即可
? Install vue-router? (Y/n) #输入y, 安装路由管理器
? Use ESLint to lint your code? (Y/n) # 选择y, 强烈推荐使用eslint规范代码
❯ Standard (https://github.com/standard/standard) # 直接回车
? Set up unit tests (Y/n) # 是否建立单元测试,我选择的是n,看情况定吧
? Setup e2e tests with Nightwatch? (Y/n) #选择n
? Should we run `npm install` for you after the project has been created? # 选择 Yes, use NPM
到这里一个新vue项目就初始化成功了,接着让我们运行一下项目看看效果
cd vueDemo # 进行项目文件夹内
npm run dev # 运行项目dev环境 输入localhost:8080 就能看到vue项目了
接下来我们看一下项目结构
bulid: 项目构建打包的一些配置文件
config: 项目环境配置
node_modules: 项目中使用到的依赖包
src: 项目主入口assets: 静态资源,logo等一些图标
components: 组件文件夹,因为vue是单文件结构,每一个页面都是一个组件
router: 路由管理
接下来看一下package.json文件
其中
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", # 用户本地编译, npm run dev
"start": "npm run dev", # rpm start 和 npm run dev 一个效果
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js" # rpm run build 构建项目用于部署,构建完成后项目内会生成dist包
},
filters的使用
很多时候后台接口给我们返回的时间都是时间戳格式,之前我们都是在获取到数据后将时间戳转成string格式在放到html标签中显示,现在用到filters后就方便多了
在刚初始化的项目中src目录下增加filters文件夹,创建index.js文件,内容如下
import Vue from 'vue'
Vue.filter('timestampFormat', function (time, format) {
var date = new Date(time)
var map = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var key in map) {
if (new RegExp(`(${key})`).test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? map[key] : numHelper(map[key]))
}
}
return format
})
function numHelper (num) {
if (num < 10) {
return '0' + num
} else {
return num + ''
}
}
上述代码就是定义了一个时间戳转日期string的一个filter方法,下面就是如何使用它, 修改
src->components->HelloWorld.vue的内容如下
{{timestamp | timestampFormat('yyyy-MM-dd')}}
这样就可以直接将时间戳转成日期string了,试试吧
directives的使用
directives 主要是绑定html标签,拿到dom节点并监听属性变化后做一些事物处理, 这里用上拉加载更多数据来做演示~
在src下创建directives文件夹,并新增loadmore.js文件,内容如下
export default {
inserted (el, binding) {
var loading = false
el.addEventListener('scroll', (event) => {
var func = binding.value
if (!func) return
var scrollHeight = el.scrollHeight
var scrollTop = el.scrollTop
var offsetHeight = el.offsetHeight
if (scrollTop >= scrollHeight - offsetHeight - 40) {
if (!loading) {
loading = true
var p = () => { loading = false }
func(p)
}
}
}, { passive: true })
}
}
这里监听的是节点scroll属性,当滚动距离与内容高度相差40的时候通知绑定者并传入一个callback,在callback没返回之前不在处理滚动事件, 接下来我们接着看vue文件中如何写
{{item}}
一波操作后是不是觉得很酷炫呢~
自定义Vue-cli的webpack项目模版
我之前按照我自己的项目规范创建了一个项目模版,大家可以先试一下
打开命令行工具,输入
vue init GitMen/webpack
是不是与之前 init webpack有很大区别呢~
推荐给搭建一篇文章,讲的很细致,所以我就不讲这里了~ 写文章太累
有兴趣的同学前往自定义自己的vue-cli模板
搞事情