VUE训练营——Todo List
项目截图
项目技术点
项目比较简单,主要包括:
- vue-cli
- vue基本指令
- vue-router
关键代码
关键代码均在TodoList.vue中,这里只贴出js相关处理:
<script>
let store = {
save (key, value) {
localStorage.setItem(key, JSON.stringify(value))
},
fetch (key) {
return JSON.parse(localStorage.getItem(key)) || []
}
}
let list = store.fetch('all')
let filter = {
all: function (list) {
return list
},
finished: function (list) {
return list.filter(function (item) {
return item.isChecked
})
},
unfinished: function () {
return list.filter(function (item) {
return !item.isChecked
})
}
}
export default {
name: 'todoList',
data () {
return {
todo: '',
list: list,
editorTodoItem: null,
beforeTodoContent: '',
hash: 'all',
hashItems: [
{
title: '所有任务',
isActive: true,
hash: 'all'
},
{
title: '未完成的任务',
isActive: false,
hash: 'unfinished'
},
{
title: '完成的任务',
isActive: false,
hash: 'finished'
}
]
}
},
methods: {
addTodo () {
let item = {title: this.todo, isChecked: false}
this.list.push(item)
this.todo = ''
},
deleteTodo (index) {
this.list.splice(index, 1)
},
editTodo (item) {
this.beforeTodoContent = item.title
this.editorTodoItem = item
},
isEditorItem (item) {
return item === this.editorTodoItem
},
editCompleted () {
this.editorTodoItem = null
},
cancelEdit (item) {
item.title = this.beforeTodoContent
this.editorTodoItem = null
},
handleHash (item) {
for (let i = 0; i < this.hashItems.length; i++) {
this.hashItems[i].isActive = false
}
item.isActive = true
this.hash = item.hash
}
},
computed: {
noCheckedLength: function () {
let count = 0
for (let i = 0; i < this.list.length; i++) {
if (!this.list[i].isChecked) {
count++
}
}
return count
},
filterList: function () {
return filter[this.hash] ? filter[this.hash](this.list) : this.list
}
},
directives: {
'focus': {
update (el, binding) {
if (binding.value) {
el.focus()
}
}
}
},
watch: {
list: {
handler: function () {
store.save('all', this.list)
},
deep: true
}
}
}
</script>
vue-cli脚手架使用
运行如下命令,创建一个名为todolist的vue项目,通过本地8080端口启动服务
# install vue-cli
npm install -g vue-cli
# create todo list project
vue init webpack todolist
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
在运行bash vue init webpack todolist
后,会依次要求输入以下配置内容:
- 项目名称(Project name)
- 项目描述(Project description)
- 项目作者(Author)
- 选择vue构建方式:
- 运行+编译(Runtime + Compiler)
- 运行时(Runtime only)
- 是否安装vue-router(Install vue-router)
- 是否使用ESLint(Use ESLint to your code)
- 标准模式(Standard)
- Airbnb
- 自定义模式(none)
- 是否使用Karma+Mocha的单元测试(Setup unit tests with Karma + Mocha)
- 是否使用Nightwatch e2e测试(Setup e2e tests with Nightwatch).
npm install安装完成后,项目目录结构如下:
|-- build // 项目构建相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查npm、node等相关版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量(例如ProxyTable)
| |-- prod.env.js // 生产环境变量
|-- node_modules // 依赖项目存放目录
|-- src // 项目源码目录
| |-- assets // 资源文件目录
| |-- components // 组件目录
| |-- router // 路由目录
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .eslintignore // ESLint检查忽略的文件
|-- .eslistrc.js // ESLint文件
|-- index.html // 项目入口页面
|-- package.json // 项目配置信息