1.认识Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以期轻量易用著称,vue.js和React.js发展速度最快,AngularJS还是老大。
官网:https://cn.vuejs.org/
参考:https://cn.vuejs.org/v2/guide/
![51a78f18f0b19ca19c7e11f23356b5d0.png](https://i-blog.csdnimg.cn/blog_migrate/068f52df5341412dd09afa434c4a7e3f.jpeg)
Git地址:https://github.com/vuejs
2.Node和NPM
前面说过,NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。
2.1.下载Node.js
下载地址:https://nodejs.org/en/download/
![e6ed8104cba3a11151d045d7e7ef6c81.png](https://i-blog.csdnimg.cn/blog_migrate/231963576955d92ead2f84179b89c41c.jpeg)
推荐下载LTS版本。
课程中采用的是12.0版本。目前最新的是8.11.1。大家自行下载。然后下一步安装即可。
完成以后,在控制台输入:node -v
![d061217bf56bbc0743f045e34df06346.png](https://i-blog.csdnimg.cn/blog_migrate/9f3fa3bc6bdb9196c874077ef6e3227d.jpeg)
2.2.NPM
安装完成Node应该自带了NPM了,在控制台输入npm -v查看:
![055b5fe6fe5a54ba732ca9be8133396c.png](https://i-blog.csdnimg.cn/blog_migrate/eecd57b2d75f8730aeafe21b09ebb7db.jpeg)
像的工具:nrm
我们首先安装nrm,这里-g代表全局安装
npm install nrm -g
然后通过nrm test npm来测试速度:
通过nrm use taobao来指定要使用的镜像源:
![c06893e382c721fd264f822c7f70678b.png](https://i-blog.csdnimg.cn/blog_migrate/f597b0c2c5a97c244b95a8df2b886a38.jpeg)
注意:
- 有教程推荐大家使用cnpm命令,但是使用发现cnpm有时会有bug,不推荐。
- 安装完成请一定要重启下电脑!!!
- 安装完成请一定要重启下电脑!!!
- 安装完成请一定要重启下电脑!!!
3.快速入门
接下来,我们快速领略下vue的魅力
3.1.创建工程
创建一个新的工程:
选择一个空的工程。
![5b97d33fe3a0a17351f4abeef39daa91.png](https://i-blog.csdnimg.cn/blog_migrate/4e4819f6b84f02339d0e311d75ea168e.jpeg)
然后新建一个module:选中static web,静态web项目:
![b387218e0ceb08dbbd1d9453ead30082.png](https://i-blog.csdnimg.cn/blog_migrate/ebf4f1142e5eb885f3cdc2af17c08728.jpeg)
3.2.安装vue
先输入:npm init -y 进行初始化
安装Vue,输入命令:npm install vue --save
![d8c10da3b3fc576db7b991fb4d1efa46.png](https://i-blog.csdnimg.cn/blog_migrate/ee7a49838de0c960d7fc4851133022ee.jpeg)
创建html 引入vue
![792d80b3c30496035cf75ed927b6895a.png](https://i-blog.csdnimg.cn/blog_migrate/9e527f1e01a487182b14cde320755279.jpeg)
3.3.2.vue渲染
然后我们通过Vue进行渲染:
Title
{{name}} 很帅!