vue_cli项目目录介绍
build:项目构建(webpack)相关代码
config:配置目录,包括端口号等。我们初学可以使用默认的。
node_modules:npm 加载的项目依赖模块
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式
src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
1、assets: 放置一些图片,如logo等。
2、components: 目录里面放了一个组件文件,可以不用。
3、App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
4、main.js: 项目的核心文件。
# main.js
new Vue({
// 绑定挂载点
el: '#app',
router,
// 导入组件
components: { App },
// 指定使用名称App组件的模板,若没有指定,则使用当前模板
template: '<App/>',
// template:'<h1>hello Vue.Js</h1>'
})
# App.vue
<!--单文件组件,包含组件所需的模板、样式和js-->
<!--模板-->
<template>
<div>
<h1>hello Vue</h1>
</div>
</template>
<!--js-->
<script>
export default {
}
</script>
<!--css-->
<style>
</style>
利用vue_cli 开发 todo_list功能
# main.js
import TodoList from './TodoList'
new Vue({
// 绑定挂载点
el: '#app',
router,
// 导入组件
components: { TodoList },
template: '<TodoList/>' // 指定使用名称App组件的模板
})
# 方法1:单页面开发 ======================
# TodoList.vue
<!--单文件组件语法-->
<!--模板-->
<template>
<div>
<input v-model="input_val"/>
<button @click="btn_click">提交</button>
<ul>
<li v-for="(item,index) in arr" @click="del_item(index)">{{item}}</li>
</ul>
</div>
</template>
<!--js-->
<script>
export default {
// 注意写法规范,前后必须有空格,其写法不同于单页面写法
data () {
return {
input_val: '',
arr: []
}
},
methods: {
btn_click () {
this.arr.push(this.input_val)
this.input_val = ''
},
del_item (index) {
this.arr.splice(index,1)
}
}
}
</script>
<!--css-->
<style>
</style>
# 方法2:在TodoList组件中导入局部组件TodoItem ======================
# TodoList.vue
<!--单文件组件语法-->
<!--模板-->
<template>
<div>
<input v-model="input_val"/>
<button @click="btn_click">提交</button>
<ul>
<!--此处需要向局部组件传递变量-->
<todo_item v-for="(item,index) in arr"
:index="index"
:item="item"
@del_item="del_item"
></todo_item>
</ul>
</div>
</template>
<!--js-->
<script>
import TodoItem from './components/TodoItem'
export default {
// 引入模板
components: {
// 指定标签名称
'todo_item': TodoItem
},
data () {
return {
input_val: '',
arr: []
}
},
methods: {
btn_click () {
this.arr.push(this.input_val)
this.input_val = ''
},
del_item (index) {
this.arr.splice(index, 1)
}
}
}
</script>
<!--css-->
<style>
</style>
# components/TodoItem.vue
<template>
<li @click="del_item">{{item}}</li>
</template>
<script>
export default {
props: ['index', 'item'],
methods: {
del_item () {
// 触发事件 del_item并传入参数,在父组件中必须监听此事件
this.$emit('del_item', this.index)
}
}
}
</script>
<style scoped>
</style>