Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。首先我们来了解一下Vuex的安装,后面我们再继续具体讲解什么是Vuex。
下载安装
Vuex 有三种安装方式,下面我们一起来看一下:
直接下载
我们可以直接下载vuex的文件,链接地址:https://unpkg.com/vuex。这个链接会一直指向 NPM 上发布的最新版本,目前的版本为vuex v3.1.2
。
或者我们还可以根据自己的需要来指定版本,直接在链接后面加上版本号,这样访问的就是制定版本的文件了。例如:https://unpkg.com/vuex@2.0.0。
将下载好的vuex.js
放至本地项目中,然后我们可以在页面中,通过如下方式引入 :
<script src="/path/vuex.js"></script>
使用NPM安装
我们还可以使用npm
包管理工具来安装 Vuex
,命令格式如下所示:
npm install vuex --save
在命令中加上-save
是因为这个包需要在生产环境中使用。
示例:
使用Yarn安装
我们还可以使用Yarn的方式来安装Vuex
:
yarn add vuex
在使用yarn之前,需要先在系统中安装yarn,在Yarn 中文网可以找到 window 下的三种安装方法,或者可以npm 来安装yarn,命令如下所示:
npm install -g yarn
示例:
创建一个Vue项目
我们可以先创建一个Vue项目,然后在Vue项目中安装Vuex。
-
首先确认本机中node和 npm 环境是否已经安装配置完成,Node.js下载地址:https://nodejs.org/en/。
这里下载安装步骤就不演示了,完成好后可以在终端中运行以下命令,如果出现版本号则表示安装成功。
虽然node自带npm,但是可能不是最新版本,如果想更新npm,可以运行下列命令:
npm install -g npm
-
然后安装vue-cli,这是Vue脚手架,是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
npm install vue-cli -g // 全局安装
大家直接在终端执行即可,这里就不上图了。安装好后通过
vue list
命令来检查是否安装成功。 -
然后选定路径,创建一个新的项目,例如再桌面上创建一个命名为testvue的文件夹,在文件夹中创建一个名为testproject的项目(项目名不可以大写,会报错),执行下列命令:
vue init webpack testproject
-
创建好后,在项目根目录中安装依赖,然后再运行一下(注意是项目根目录哟),命令如下所示:
npm install npm run dev
如图所示:
- 这样vue项目已经创建成功了,此时我们会获得一个初始化的文件夹结构,如下图所示:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。