html页面使用vuex,使用 Vuex 实现一个笔记应用

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

预期目标

笔记具备如下基本功能

1.新增

2.删除

3.收藏

4.在全部笔记和收藏笔记间切换

5.在当前列表中进行搜索

卖家秀

买家秀

准备工作

1.新建项目

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

选择项目存放位置

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

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

查看全局安装的模块

3.创建项目

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

这都什么鬼

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

vue init webpack vuex-note：初始化(init)一个使用 webpack 构建工具构建的 vue 项目，项目名为 vuex-note

Project name：项目名

Project description：项目描述

Author：朕

Vue build：构建方式，分为独立构建和运行时构建，具体说明见如下链接，这里选择独立构建 standalone

https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Install vue-router：是否需要安装 vue-router ，跳转页面用的，这里用不着，我过会学

Use ESLint to lint your code：ESLint 规范与法用的，可能你熟悉的写法都是不标准的，如果采用 ESLint 则可能报错，这里选择 n

剩下的都是测试用的，一路 n

Should we run 'npm install' for you after the project has been created：是否需要直接替你安装(npm install)相关的依赖，回车就行，之后会替你安装各种玩意

5.安装完后会有提示，我们接着按照提示走

先是 cd vuex-note 进入刚刚创建的 vue 项目文件夹

安装完成

再通过 npm run dev 跑起项目

后续操作

6.访问页面

此时通过浏览器访问 localhost:8080 就可以打开一个新的 vue 页面

崭新的 vue 页面

7.项目结构

截止目前的项目结构如图

项目结构

由于是初学，为了先搞个东西出来，所以暂时先不管一些乱七八糟的配置，只挑跟这次相关的说(其实多了我也没学到...)

8.查看 Vuex

既然是使用 Vuex 来实现笔记应用，我们就应该先查看一下构建的项目是否包含 Vuex 模块。

node_modules 文件夹包含了现有的模块，然而里面并没有我们想要的 Vuex，不信自己去看

package.json 文件描述了项目包含的文件，项目如何运行等信息

package.json

9.安装 Vuex

在命令行中输入 npm install vuex --save：--save 就是将安装信息写入 package.json