VUE||下载,安装,入门,介绍

野性酷女 2023-06-16 08:23 12阅读 0赞

# 认识Vue #

Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链][Link 1]以及各种[支持类库][Link 2]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以期轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。

官网：[https://cn.vuejs.org/][https_cn.vuejs.org]

参考：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70]  
Git地址：[https://github.com/vuejs][https_github.com_vuejs]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1]  
**尤雨溪**，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。

# Node和NPM #

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

## 下载Node.js ##

下载地址：[https://nodejs.org/en/download/][https_nodejs.org_en_download]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2]  
推荐下载LTS版本。

完成以后，在控制台输入：

node -v

看到版本信息：  
![在这里插入图片描述][20191125183846381.png]

## 2.2.NPM ##

安装完成Node应该自带了NPM了，在控制台输入`npm -v`查看：  
![在这里插入图片描述][20191125183919561.png]  
npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里`-g`代表全局安装

npm install nrm -g

然后通过`nrm ls`命令查看npm的仓库列表,带\*的就是当前选中的镜像仓库：  
![在这里插入图片描述][20191125183948912.png]  
通过`nrm use taobao`来指定要使用的镜像源：  
![在这里插入图片描述][20191125184018483.png]  
然后通过`nrm test npm`来测试速度：  
![在这里插入图片描述][20191125184042602.png]  
注意：

*  有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。
 *  安装完成请一定要重启下电脑！！！
 *  安装完成请一定要重启下电脑！！！
 *  安装完成请一定要重启下电脑！！！

# 快速入门 #

接下来，我们快速领略下vue的魅力

## 1.创建工程 ##

创建一个新的工程：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 3]  
选中一个空的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 4]  
然后新建一个module：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 5]  
选中static web，静态web项目：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 6]  
位置信息：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 7]

## 2.安装vue ##

安装vue有三种方式：

*  下载安装

下载地址：[https://github.com/vuejs/vue][https_github.com_vuejs_vue]

可以下载2.5.16版本[https://github.com/vuejs/vue/archive/v2.5.16.zip][https_github.com_vuejs_vue_archive_v2.5.16.zip]

下载解压，得到vue.js文件。

*  使用CDN

或者也可以直接使用公共的CDN服务：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

*  推荐npm安装

在idea的左下角，有个Terminal按钮，点击打开控制台：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 8]  
进入hello-vue目录：  
![在这里插入图片描述][20191125184736267.png]  
先输入：`npm init -y` 进行初始化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 9]  
安装Vue，输入命令：`npm install vue --save`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 10]  
然后就会在hello-vue目录发现一个node\_modules目录，并且在下面有一个vue目录。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 11]  
node\_modules是通过npm安装的所有模块的默认位置。

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125183438321.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[https_github.com_vuejs]: https://github.com/vuejs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125183527455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191125183753286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[20191125183846381.png]: https://img-blog.csdnimg.cn/20191125183846381.png
[20191125183919561.png]: https://img-blog.csdnimg.cn/20191125183919561.png
[20191125183948912.png]: https://img-blog.csdnimg.cn/20191125183948912.png
[20191125184018483.png]: https://img-blog.csdnimg.cn/20191125184018483.png
[20191125184042602.png]: https://img-blog.csdnimg.cn/20191125184042602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191125184129640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191125184153281.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191125184214136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2019112518424262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191125184301617.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[https_github.com_vuejs_vue]: https://github.com/vuejs/vue
[https_github.com_vuejs_vue_archive_v2.5.16.zip]: https://github.com/vuejs/vue/archive/v2.5.16.zip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191125184654699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[20191125184736267.png]: https://img-blog.csdnimg.cn/20191125184736267.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191125184805867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191125184829283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191125184848735.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvY2tMaXU=,size_16,color_FFFFFF,t_70