vue全家桶初步了解

墨蓝 2022-11-26 11:00 158阅读 0赞

# 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就算引用成功了，接下来我们就可以尽情的玩耍了。