使用Vuex实现一个笔记应用的方法

最近开始着手学习 Vue,先大略的过了一遍官方文档,跟着敲过一部分官方文档中的 DEMO,然而还是不甚了了。在网上找到了一个入门的笔记应用,即便是入门级的应用,在学习途中依旧困难重重。特将学习作此笔记,方便今后回看,也希望能够帮到刚开始学习 Vue 的女同学

附原作者 Github 链接:https://github.com/lichenbuliren/vuex-notes-app2

预期目标

笔记具备如下基本功能
1.新增
2.删除
3.收藏
4.在全部笔记和收藏笔记间切换
5.在当前列表中进行搜索

卖家秀

买家秀

准备工作

1.新建项目

选个文件夹存放项目,这里我用的是 Git Bush 执行语句($ 符号是 Git Bush 中自带的),你也可以使用命令行,一样的

选择项目存放位置

2.查看模块(爱看不看)

查看一下全局安装的模块  npm list --depth=0 -global

查看全局安装的模块

3.创建项目

在命令行输入 vue init webpack vuex-note 并做好设置,创建一个项目

这都什么鬼

4.简单解释一下各个配置都是干嘛的

  1. vue init webpack vuex-note:初始化(init)一个使用 webpack 构建工具构建的 vue 项目,项目名为 vuex-note
  2. Project name:项目名
  3. Project description:项目描述
  4. Author:朕
  5. Vue build:构建方式,分为独立构建和运行时构建,具体说明见如下链接,这里选择独立构建 standalone https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  6. Install vue-router:是否需要安装 vue-router ,跳转页面用的,这里用不着,我过会学
  7. Use ESLint to lint your code:ESLint 规范与法用的,可能你熟悉的写法都是不标准的,如果采用 ESLint 则可能报错,这里选择 n
  8. 剩下的都是测试用的,一路 n

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/128.html