vue全家桶初步了解

vue全家桶初步了解

1、Vue-cli

Vue-cli是vue官方出品的快速构建单页应用的脚手架，这里牵扯的东西很多，有webpack，npm，nodejs，babel等等。

1.1、安装vue-cli

npm install -g @vue/cli
//卸载  npm uninstall -g @vue/cli

• -g :代表全局安装。如果你安装时报错，一般是网络问题，你可以尝试用cnpm来进行安装。安装完成后，可以用vue
• -V :来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是3.4.1

PS G:\Demos\VUE\VUECLI> vue --version
3.4.1

1.2、初始化项目

在实际开发中，一般我们都会使用webpack这个模板，那我们这里也安装这个模板，在命令行输入以下命令：

vue init webpack vuecliTest

2、vue-router

简介： 由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

有的小伙伴会有疑虑，为什么我们不能像原来一样直接用标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。

2.1、安装vue-router

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

 npm install vue-router --save-dev 

3、vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。比如：我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有很多共用的数据，所以尤大神给我们提供了vuex。

3.1、引入vuex

1. 先使用vuecli创建项目，然后利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了

   npm n install vuex --save
   

   需要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

2. 新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

   import Vue from 'vue';
   import Vuex from 'vuex';
   

3. 使用我们vuex，引入之后用Vue.use进行引用。

   Vue.use(Vuex);
   

   通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。