如何经过 Vue-Cli3 - Vuex 完成一个 TodoList

昨天大概粗糙的了解了一下Vue的概况以后，并无从框架、语法的细节来进一步学习。那今天经过一个简单的实例来继续完善一下Vue这方面的空白，用一些看得见的效果摸的着的代码在不断完成小目标的过程当中慢慢消化一下相关的知识点。固然用一个简单的实例来彻底掌握Vue也不太现实，只是经过这样一个例子来树立学习的信心，了解Vue基础知识点。

Vue-cli-todolist，是一个用vue-cli3工具初始化项目，而后在此基础上完成todolist的案例，相关的技术栈：Vue-cli3， Vue，VueRouter，Vuex。Element-ui，IView, Vux等UI组件为辅助。

先看一下咱们完成的效果：

• vue-cli-todolist
• 参考自：全部前端技术实现的todomvc.com
• 尤大vue-totolist

1. 安装Vue-cli

分享前的约定: 如下大部分命令步骤基于Mac系统，Windows系统差别点也会提到。

1.1 先在Github创建仓库

为了保持代码可以长期有效，也方便面试时展现，建议将代码以Git的方式存放，好比：http://github.com，http://gitee.com,https://bitbucket.org/等等。选择任意一款新建仓库：vue-cli-todolist，git clone仓库到本地(Windows系统建议非桌面的盘符路径存储，好比D:/vue-todolist)，而后cd ..，在iTerm新建一个 tab 准备进行安装Vue-cli，留存当前的tab等安装完成以后运行npm run serve。

1.2 Vue-cli的做用

• 本地生成文件和配置，减小繁琐的配置，以最短的时间最小的文件结构让项目先跑起来，让更多的精力关注开发自己。vue-cli3中vue.config.js不是必须，新建以后自动覆盖默认设置。
• 那若是不使用vue-cli那怎么办？就是手动在本地创始化package.json，而后其它相应文件手动建立手写配置，效率低，出错可能大。

1.3 Vue-cli的全局安装

若是有旧版vuecli先得卸载，而后才能安装新版。

npm uninstall -g vue-cli
vue -V

输出：vue不是内外部命令时说明卸载成功，一样，新版安装成功经过这个命令来验证。

1. 安装前提必须安装nodejs，安装完以后经过node -v来肯定是否安装成功，若是输出相似v10.15.3字样表示安装成功。//同时也安装了npm，输入如下命令来确认npm -v，若是输入6.4.1字样表示安装成功。 call:node
2. 经过npm install -g @vue/cli命令安装最新版，其中-g的意思是安装到全局，就像一个全局变量同样，之后在任何一个目录均可以运行建立命令vue create。
   PS: 若是是使用Mac的同窗此处可能须要增长sudo，完整的命令就是这样：sudo npm install --global vue-cli，不然会报这样的错误Error: EACCES: permission denied, access '/usr/local/lib/node_modules'，若是是Windows同窗注意在右键用管理员方式打开cmd。
3. vue create vue-cli-todolist 经过此命令在原来git clone项目的Tab中来建立一个项目。
   这时会有三个选项选择，

• Overwrite
• Merge
• Cancel

建议选择Merge，若是是Overwrite会删除.git隐藏文件，致使不能进行git commit，安装完成后经过vue -V来验证是否安装成功，若是输出3.7.0这样的字样，就说明安装成功了。

$ cd vue-test
 $ npm run serve

根据命令行中提示的端口号，就能够预览到一个基础的项目页面。

1. 而后删除根目录下.gitignore文件中的dist目录，说明之后dist目录也须要提交上传，git提交代码，推送到远程，在github仓库刷新页面看到代码结构，说明代码远程推送成功。

2. npm i vue-router -S经过此命令来安装路由组件，不少朋友刚开始不太会区分-S，-D的区别，这个-S表示上线依赖，是--save缩写，表示上线以后还须要存在的代码块，好比Vue.js，对应package.json中的dependencies: {}，-D表示开发依赖，是--save-dev缩写，表示只是在开发阶段使用，上线以后只使用他的结果文件就能够了，好比sass-loader, babel，对应package.json中的devDependencies: {}。

3. npm i sass-loader -D经过此命令来安装咱们后面用到的scss，也能够经过一个命令用空格分隔安装多个组件，好比：npm i sass-loader vue-loader -D。
   ps: call:npm

2. 路由的配置

增长路由的目的仍是为了让咱们更方便的进行编程，好比：有些页面须要用户登陆以后才能访问？好比有些页面进入以后后退就不让他进入这个页面？等等这样的场景均可以经过路由来实现。

• 在src目录下新建router.js，引入相关的对象，而后use，最后export。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/home'),
    }
  ],
})

• 这样router路由咱们就建好了，可是他尚未被使用，因此还须要在main.js中引入以后被使用，这样配置的路由才会起做用，根据路由访问时才会跳转到指望的画面。

import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• 而后刷新页面，多了一个/#/，最后显示为http://localhost:8080/#/，且显示画面没有报错，说明咱们的路由配置文件添加成功。

3. Sass-loader

加入scss的目的是让咱们更快更方便的方式编写css，了解一下。

须要在项目中使用scss，只须要在.vue组件中的style中添加lang="scss"，就可使用了：

<style lang="scss">
</style>

//node-sass包比较难安装，须要屡次从新安装。

• 可是添加以后命令工具报错Can't resolve 'sass-loader'，这时候就须要咱们经过命令npm i sass-loader -D来安装依赖。他主要的功能就是负责把scss编译为css。

• 安装完成以后，仍是会报Cannot find module 'node-sass'，咱们继续npm i node-sass -D安装依赖。
  安装完成以后刷新页面仍是报错，这时候须要从新启动服务了。具体步骤为先：ctrl+c中止服务，而后输入命令npm run serve启动，再刷新页面，画面重现。

• 由于此次的重点是Vue-cli，因此相关Html, CSS直接复用，恰好todo相关css已经有npm包，咱们直接安装相关css模块， npm i todomvc-common todomvc-app-css -S，而后在main.js中引入：

import 'todomvc-common/base.css'
import 'todomvc-app-css/index.css'

那到这一步咱们前期的准备工做已经完成了，下面就是根据页面特色进行组件的拆分了。

4. 组件

拆分组件的难点在于，组织结构上趋于分散，但数据处理上趋于集中，集中的数据便于管理或驱动页面视图。
组件是Vue开发当中最小的组成单元，以.vue扩展名结尾，他包括：Html结构, JS, CSS，数据流，监听处理子组件触发事件，引用子组件(ref)。
如何拆分是一个开发习惯，并无一个准确的原则，细拆能够拆分一个按钮为一个组件单元，但拆的越细坏处是会形成页面维护的困难，好处是页面组件的复用性更好。若是拆的少，组件结构关系比较简单，可是页面组件复用性不高，最终要达到指望效果仍是要平衡和取舍。
根据当前页面的特色，大致拆分为如下四个部分，分别为：Header, List, Footer, Copyright，新建对应的*.vue文件而且放置在vue-cli-todolist/src/components目录下，而后相应的组件在vue-cli-todolist/src/views/home.vue中引入，而后在增长：

components:{ Header, List, Footer }

须要注意的是Copyright在整个操做容器外部，因此放在App.vue中。

4.1 home.vue

因为Vue单数据流的限制规则，此组件页面是操做整个Todolist数据源的总页面，全部对数据的操做方法都汇总在此组件来实现，包括子组件对数据源的操做。父级 prop 值的更新会向下传递，但不能反向传递，也不能在子组件直接修改 prop。这样作的目的是为了防止从子组件意外改变父级组件的状态，从而致使数据流向难以理解。其实对Todolist的操做，就是常说的是增删改查，只是少了一个查找而已，页面上的常规操做就是对Todolist数据源对象的的增长删除修改，那对应的代码其实就是数据的push, splice, forEach等方法。须要注意的是这些操做数据的结果都是基于浏览器的，刷新以后并不存在，解决办法后端接口存储和本地存储，本案例中经过localStorage存储在本地。

而后咱们找一行有特征引入组件的方式来分析一下，好比：

<main-view :todos="filteredTodos" @del-todo="delTodo" @all-done="allDone"></main-view>

• main-view表示组件名称，若是是全局组件那名称是惟一的。
• :todos="filteredTodos"，冒号表示变量是动态的，若是不是冒号默认是String，todos表示子组件接受数据的变量名称，filteredTodos表示当前页面的变量名称。子组件中经过props属性来接受父组件传来的数据，经过$emit的方法触发事件而后在父组件修改数据，整个的数据即能灵活的传下去，也能有效的回转回来。
• @del-todo="delTodo"，@表示事件处理，del-todo为子组件$emit方法名，delTodo为当前组件事件处理方法名。组件数据经过:todos="filteredTodos"传下去，而后经过@del-todo="delTodo" @all-done="allDone"进行捕获处理。

4.2 Header.vue

• home.vue中输入<header>....</header>，刷新页面以后发现并无达到指望的效果，只有<header>....</header>的代码片断。这时候就发现组件名称不能与HTML的原有标签名称重复，不然当普通的html标签解析。修改Header.vue为HeaderView.vue以后刷新页面，获得指望结果页面。另外的一个办法就是大写，好比：<Header>....</Header>。

4.3 Main.vue

此页面虽然Html元素很少，但须要处理的东西仍是挺多，包括点击进行中处理，双击进入编辑状态，.enter.blur事件退出编辑状态，基本每一个Html元素上都须要js代码的处理，这里边大概有这几点分享：

4.3.1 template

• v-model
  扩展为：

<input v-model="field" />
<input :value="field" @input="field = $event.target.value" />

每当输入框内容发生变化时，就会触发 oninput ，把最新的value传递给 field。

• :class

  • 对象语法 { active: isActive, 'text-danger': hasError }，经过Boolean值控制是否有值
  • 数组语法 [activeClass, errorClass]，经过变量合并显示
    文档：https://cn.vuejs.org/v2/guide/class-and-style.html
• @dblclick，@click
  绑定事件的缩写形式，完整的为：v-on:click="handle"
  文档：https://cn.vuejs.org/v2/guide/events.html
• {{ item.title }}
  基础变量显示，原始html须要v-html="rawHtml"指令。
  https://cn.vuejs.org/v2/guide/syntax.html
• @keyup.enter.prevent
  经过事件修饰符连写，达处处理冒泡，阻止自定义事件等等的目的
  https://cn.vuejs.org/v2/guide/events.html

• computed -> set || get
  通常计算属性默认都是getter，全选的处理须要主动的修改数据源。
  https://cn.vuejs.org/v2/guide/computed.html

4.3.2 script

• props接受数据，data初始化变量
• computed中allDone经过进行中的数量是否为零来有效的在初始化时获得全选的状态。
• util方法就是对跨组件代码块复用的封装export而后import以后使用。

4.3.3 style

• vh
  css3新单位，相对于视口的高度的百分比，视口被均分为100单位的vh，1vh = 视口高度的1%。

h1 {
    font-size: 8vh;
}

若是视口的高度是200px，那么上述代码中h1元素的字号将为16px，即(8x200)/100=16

4.4 Footer.vue

点击状态每次切换须要切换画面，画面的变化依赖于路由，因此须要记录路由名称 this.current，在home.vue中经过watch来实现：

'$route' (to) {
  this.current = to.name
},

4.5 Copyright.vue

版权页面布局采用Flex形式布局。扩展认识：Flex垂直水平居中对齐

5. main.js

若是说App.vue是项目的组件入口文件的话那么main.js就是项目的代码入口，全部相关js的初始化以及npm包的引用都在此文件处理。ES6规定，import必须放在首行，有的组件须要Vue.use，有的则不须要。
Vue全家桶相关的Router, Vuex都须要在此文件绑定。

6. package.json

• dependencies 上线依赖，npm i -S moduleName
• devDependencies 开发依赖 npm i -D moduleName

同时习惯于vue-cli2 npm run dev方式的同窗，也能够在package.json中增长：

"scripts": {
  "dev": "npm run serve",
  "serve": "vue-cli-service serve"
}

能够用npm run dev继续运行当前项目。

7. package-lock.json

记录当前状态下实际安装的各个npm package的具体来源和版本号，package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑几乎是不敢随意升级依赖包的，这将致使多出来不少工做量，因此package-lock.json安装一个依赖的时候就锁定在你安装的这个版本。

8. npm run build

在根目录增长vue.config.js，css,js默认访问根目录，而咱们发布以后的目录是http://www.host.com/dist/，多了一层dist，因此须要配置publicPath，不然控制台报找不到资源的错误：

module.exports = {
  publicPath: './',
  productionSourceMap: false
}

至此为止，今天阶段性的学习就到此告一段落了。学习到此处有疑问的同窗，加QQ群：364912432，Vue交流微信群须要加入QQ群以后邀请。
源码在这，vue-cli-todolist
若是还想进一步学习，那能够看咱们这些分支：

带m的移动端，由此能够发现，这个项目不可是能够学习入手的项目，也是能够作为相关其它UI组件Demo场地，再加个路由就能够自由的玩耍了：

• dev-base: 是基础版，没有Vuex的版本
• dev-vuex: 是Vuex版本
• dev-element-ui: 是element-ui版本
• dev-m-vux: 是移动端vux版本，带m的移动端
• dev-base: 是基础版
• gh-paes: 在线预览页面分支