vue入门实践

一、VUE简介

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

二、Vue.js安装

2.1 兼容性

Vue不支持IE8及以下版本，Vue中使用了ECMAScript5特性，IE8及以下无法支持。

Vue支持所有兼容ECMAScript5的浏览器

2.2 安装方法

1.安装Node.js

Node.js自带npm环境，下载地址https://nodejs.org/en/download/

下载之后安装，cmd命令查看Node.js是否安装成功

查看指令：node –v

安装完成后，需要在node的主文件夹下建立两个文件夹：node_global和node_cache，这两个是用于存储nodejs的全局模块。然后需要在命令行修改配置

npm config set prefix “C:\Program Files\nodejs\node_global”

npm config set cache “C:\Program Files\nodejs\node_cache”

具体位置以nodejs的安装位置为准

2.安装淘宝镜像

npm访问的是国外的网站，速度较慢，安装淘宝镜像加快速度

在cmd中执行，持久使用

 

npm config set registry https://registry.npm.taobao.org

此处设置的镜像一定要设置成持久型的，不然后续项目打开，安装构建工具的时候下载失败。

 

/*

npm install -g cnpm –registry=https://registry.npm.taobao.org

回车，等待安装,

该方式安装的是临时使用的镜像，当有新的项目引入时，仍然是从npm去加载

*/

 

安装成功后，则将系统中npm的注册表源设置为国内的镜像了。

3.安装webpack

在完成上述两个步骤之后，输入

npm install -g webpack

4.安装Vue

设置系统环境变量path增加C:\Program Files\nodejs\node_global

cnpm install -g vue

5.安装vue-cli（脚手架，选择安装）

这个vue-cli是Vue官方提供的CLI，可以为单页面应用快速搭建（SPA）繁杂的脚手架。为现代前端工作流提供了batteries-included的构建环境。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

 

cnmp install -g vue-cli

6.初始化demo

完成上述步骤之后，就可以初始化了//具体的执行过程

vue init webpack vue-projectName

其中，projectName是项目文件夹的名称。在执行初始化命令的时候，会依次有项目文件夹、项目名称、描述、作者等内容需要自行输入。

7.运行projectName

完成初始化后，会在初始化过程中指定文件夹下创建项目，以项目路径为D:\vueTest\vue-demo，项目名称为vue-demo为例

 

1.首先需要在命令行cd到vue-test，

d:

cd vueTest/vue-demo

 

2.然后运行cnpm install进行依赖包的安装

cnpm install

 

3.完成安装包的依赖后，执行cnpm run dev命令启动

cnpm run dev

 

3.使用localhost:8080可以访问,（由于当前电脑中8080端口被占用，所以我这边的端口号8081）可以看到如图1所示界面

 

图 1程序运行界面

2.3.小结

在此处的demo项目，仅有一个欢迎界面，是系统自动生成的。可以使用webstrom软件进行项目的构建，因为使用的是现有的代码，所以使用webstrom构建的方法为了解，webstrom可以完成项目构建、编码、执行等工作，不需要再在命令行下进行执行。推荐使用。

三、Vue初识

在webstrom中打开项目，项目的结构如图2所示

 

图 2 项目结构

 

其中重要的文件和文件夹有四个：index.html、App.vue、components和router，下面来依次介绍

3.1 index.html

index.html是最外层的框架，是项目的入口，index.html中的内容如图1所示，在页面的中载入一个名字叫app的vue module，因此我们可以知道App.vue是嵌套在index.html中的。

3.2 App.vue

打开App.vue文件如图3所示。

vue文件都是如图3所示的结构，由三部分组成。

第一部分:最上边的