一、Vue简介
Vue(发音为/vjuː/,类似于view)是用于构建用户界面的渐进框架。与其他整体框架不同,Vue从头开始设计以逐渐采用。核心库仅集中在视图层,并且易于拾取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue也完全能够为复杂的单页应用程序提供支持。
重点:
1.只关注视图层
2.MVVM模式框架
3.SPA(single page web application)应用
-MVVM模式是一种试图与数据双向绑定的框架,即数据发生变化,试图会跟着变化;试图发生变化,数据模型也发生变化,开发者再也不需要操作DOM节点。
案例:乘法表的例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
//cdn的方式 引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--MVVM模式-->
<div id="app">
<input type="text" v-model="num"/>
<table border="1">
<tr v-for="i in parseInt(num)">
<td v-for="j in i">{{j}}*{{i}}={{j*i}}</td>
</tr>
</table>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
num:9
}
})
</script>
</body>
</html>
效果图:
-SPA 单页面应用(其实就是安装Vue的第二种方式),可以实现组件化开发,提高开发效率,适用大型项目。这种项目开发完后,只有一个html页面,内容是由一堆js、css渲染的。
spa的缺点:Spa应用部署后只有1个页面,而且这个页面只有一堆js、css文件,所以Spa应用不易被搜索引擎搜到。
二、为什么选择Vue
1.渐进式框架
2.双向数据绑定
3.不需要操作DOM,状态机,状态的改变,会引起视图的更新
4.Vue不仅仅可以构建整个大型应用,还可以作为一个项目的某一个功能 实现然后嵌入项目
5.Vue环境构建非常方便:vue-cli指令
6.Vue单文件组件:组件化开发
7.社区非常强大,提供各种各样的插件供我们使用
三、Vue创建方式分为两种
1.使用cdn方式直接引入(一般不用)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
2.利用Nodejs环境搭建Vue(SPA应用,开发一般选择这种)
基本环境安装
首先需要安装两个东西:
1.Nodejs
2.npm(国外镜像)
四、NodeJs的Windows安装
1.下载安装包
下载Nodejs安装包,地址为:https://nodejs.org/en/download/, 在页面中点击下载对应的操作系统,windows的推荐下载Windows Installer (.msi)。为了方便,百度云盘地址为:https://pan.baidu.com/s/1B13U3MlIMDFbbltuS5ZbTQ,密码为:z2yu。
2.安装
安装msi的时候需要注意的是选择安装模块的时候可以点击Add to PATH(其中包含了Node.js和npm),如下:
3.环境变量配置
1)安装完成后需要设置环境变量:即Path中添加安装地址,如: D:\java\nodejs
在cmd窗口中输入以下命令,验证安装是否成功:
四、搭建第一个完整的 vue-cli 项目
****第一步安装 Node.js 淘宝镜像加速器(cnpm)**(一般选择不装)
这样子的话,下载会快很多~
-g 就是全局安装
npm install cnpm -g#或使用如下语句解决 npm 速度慢的问题
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用!
安装位置:
C:\Users\Administrator.SC201803081145\AppData\Roaming\npm
第二步全局安装vue-cli
在指定的文件夹中 输入npm install vue-cli -g #只需要第一次安装时执行,以后的vue项目从第三步开始
第三步 使用webpack模板创建自己的项目
这里的 vuehr是项目名称,可以根据自己的需求起名
vue init webpack vuehr
第四步 初始化并执行
cd my-project #进到自己的项目中
npm install #安装依赖
npm run dev #启动项目
- > 温馨提示(出现错误时):
> npm uninstall -g vue-cli 卸载vue-cli
> npm config delete proxy 删除代理
执行完成后,目录多了很多依赖
安装并运行成功后在浏览器输入:http://localhost:8080
效果:
Vue-cli目录结构
- build 和 config:WebPack 配置文件
- node_modules:用于存放 npm install 安装的依赖文件
- src: 项目源码目录
- static:静态资源文件
- .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
- .editorconfig:编辑器配置
- eslintignore:需要忽略的语法检查配置文件
- .gitignore:git 忽略的配置文件
- .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
- index.html:首页,仅作为模板页,实际开发时不使用
- package.json:项目的配置文件
- name:项目名称
- version:项目版本
- description:项目描述
- author:项目作者
- scripts:封装常用命令
- dependencies:生产环境依赖
- devDependencies:开发环境依赖