Vue框架入门学习(五)——Vue-cli

文章目录

  • 七、Vue-cli
    • 1.环境搭建
    • 2.实例
      • 2.1 表单
      • 2.2 delete操作
    • 3.Vuex

七、Vue-cli

1.环境搭建

首先安装vue-cli
在这里插入图片描述
安装成功的话,输入vue就可以弹出菜单

Vue框架入门学习(五)——Vue-cli_第1张图片
用vue list可以查看vue-cli的功能,像热更新和编译等等
Vue框架入门学习(五)——Vue-cli_第2张图片
然后开始构建一个项目,并且在此处选第一项,构建完整项目。第二项是构建轻量级项目,但是我们的组件是需要时刻更新且到浏览器还要再次进行编译的,所以选择第一个。
在这里插入图片描述
最后是全部的配置,另外最后一个要选择手动安装,因为国外的源太慢了,直接cd进来然后cnpm i就可以了
Vue框架入门学习(五)——Vue-cli_第3张图片
开始安装node_modules
在这里插入图片描述
下载之后是这样的
Vue框架入门学习(五)——Vue-cli_第4张图片

并且都自动配置了webpack和环境等等的配置,还有alias,resolve的路径之类的信息,可以从build和config都可以看到,现在来写一个小实例简单的应用到vue2框架。

2.实例

2.1 表单

一定要记住,一旦修改了自带的文件名,要从src的几个原始文件中对应的都要进行修改。
首先先写一个很简单的页面,在此之前,先改一下文件名,并且建立一个src/components/common来作为公共组件的directory
Vue框架入门学习(五)——Vue-cli_第5张图片
然后来创建一个表格在table.vue内作为公共组件
Vue框架入门学习(五)——Vue-cli_第6张图片
思路是这样的,

  1. 公共组件已经编辑好了,然后让Index.vue引入即可
  2. 将Table在Index.vue 的template位置找到一个合适的位置放置
  3. 用父级标签包裹住Table
  4. 在App.vue内使用router-view路由,并且使用上面提到的Index.vue的template来填充这个router-view
  5. 而路由本身的连接,用默认地址直接链接到Index.vue即可

然后就可以运行了。Vue框架入门学习(五)——Vue-cli_第7张图片 在编写结束之后出现了这样的错误,这样错误的主要原因是因为Vue里的CSS解析器无法解析你定义的less sass类型,你需要手动安装第三方的CSS解析器,作者是CSS类型是less,所以直接cnpm install less less-loader --save-dev就解决了问题。然后改完了又遇到了这个问题 Vue框架入门学习(五)——Vue-cli_第8张图片
这是因为ESLint检查运行的时候出现了问题。要改成
Vue框架入门学习(五)——Vue-cli_第9张图片
顺带提一嘴,Eslint真是让人强行改了代码不规范毛病的这么个ECMA检测工具
改了十分钟代码规范···终于成功了…
在这里插入图片描述
去除掉CSS样式,最终是这样的
在这里插入图片描述

现在我们希望可以使用读取来的数据来制定出表格,而不是去手写,那就需要使用json和组件,首先创建出json,和两个v-for,一个遍历value,一个遍历key

Index.vue所产生的json数据
Vue框架入门学习(五)——Vue-cli_第10张图片
使用组件做出的读取遍历
Vue框架入门学习(五)——Vue-cli_第11张图片

Vue框架入门学习(五)——Vue-cli_第12张图片
这是提示我们在使用了v-for之后要给vue一个信息,谁是被拿来循环的key,并且要用v-bind标注起来。
重新运行也可以达到效果

2.2 delete操作

下面在表单中模拟一个delete操作
首先把delete按钮画出来
Vue框架入门学习(五)——Vue-cli_第13张图片
然后让父级去执行删除操作,调用父级参数,使用:parent="this"将父级暴露出来,用props将parent传进来进行删除操作。
主要是父子级通信的知识。

使用filter方法对数据进行过滤操作
Vue框架入门学习(五)——Vue-cli_第14张图片

3.Vuex

全局状态管理,统一组件关系,单一状态集合(一次请求,处处使用)

作用:

  1. 数据跨组件共享
  2. 防止数据被意外修改
  3. debug,Ops方便,追踪数据源的修改

Vue框架入门学习(五)——Vue-cli_第15张图片
State:所有的变量,参数
Mutations :对数据进行的某种行为操作,同步
Devtools:监控谁调用了Mutation
Actions:触发Mutation对State进行操作,异步
Vue component:修改组件的唯一办法就是,告知Actions触发Mutation修改State,对自身进行Update
Backend API:进行数据交互的API

安装

直接用npm安装即可
Vue框架入门学习(五)——Vue-cli_第16张图片
然后在vm入口处进行引入

Vue框架入门学习(五)——Vue-cli_第17张图片

接下来要实现使用Vuex管理修改数据
先创建一个新的组件来实现修改数据的功能
Vue框架入门学习(五)——Vue-cli_第18张图片
然后在父类组件中放置我们的子级组件
Vue框架入门学习(五)——Vue-cli_第19张图片
因为我们的state无法被从外界直接进行修改一定要通过mutation,所以我们来到注入Vue 的文件开始写mutation和调度mutation的action
Vue框架入门学习(五)——Vue-cli_第20张图片
另外在这里提一句,并非一定要用action才能调度mutation,外界也可以直接访问mutation进行功能的实现,commit方法可以专门用来搜索mutation内的方法,调用过来传参就可以了
Vue框架入门学习(五)——Vue-cli_第21张图片
但是看起来很怪,因为打破了常规的Vuex生态系统,所以还是使用action来进行调度。
在这里多说一句,一个mutation可以修改多个state,一个action可以修改多个mutation
Vue框架入门学习(五)——Vue-cli_第22张图片
然后action行为就完成了,最后一步就是派送action的操作,来到触发修改数据的button处,对action进行派送,使用dispatch

Vue框架入门学习(五)——Vue-cli_第23张图片
然后数据就修改成功了,运行即可

你可能感兴趣的:(js,vue)