vue 入门一

Posted 2020-10-30

一，什么是vue

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

  1 是一个构建用户界面的框架
  2 是一个轻量级的MVVM(Model-view-ViewModel)框架，和angular，react类似，就是所谓是数据双向绑定【简化dom操作】
  3 核心思想：数据驱动+组件化的前段开发
  
  4 通过简单的API实现响应式的数据绑定和组合的视图组件

• vue作者：尤雨溪 【很厉害的大神，膜拜中】

  他的微博：https://weibo.com/arttechdesign

二，安装vue运行环境

• 搭建vue的开发环境

  • 安装npm

    步骤1 ：安装npm：一般要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，网址：http://nodejs.cn；
    或者直接安装npm也可以，doc指令：npm install vue
    步骤2 ：【测试是否安装成功，docs指令: node -v】
    步骤3 ：假如觉得npm比较慢，可以替换淘宝镜像，可参考 https://www.cnblogs.com/zycbloger/p/6210049.html

  • 安装webpack

    安装：npm install webpack -g
    查看：webpack -v

  • 安装命令行工具 (CLI) ， 安装全局vue-cli脚手架

    安装：npm install --global vue-cli
    查看：vue -V

  • Bower 安装 【Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如javascript、html、CSS之类的网络资源。】

    bower install vue 【如果发现bower不是内部或者外部... 可以试下，全局安装npm： npm install -g bower】

  • 可以发现全局安装的默认安装路径为：C:\Users\TYZ016\AppData\Roaming\npm

    

三，创建Hello Word

• 下载核心库

  1 查看vue版本：bower info vue
  2 快速生成json版本文件：npm init --yes
  
  3 下载最新vue版本：npm install vue --save
  
  4 vue1.0,跟vue2.0主要的诧异是引入了Virtual DOM(虚拟dom)，页面在更新的时候效率更高，速度更快。

• Hello Word

  1 如下图结构，新增一个h5页面，
  
  2 右击选择访问的浏览器
  

四，相关的项目开发软件

• 编辑工具 web Strom / subline txt 【网上各自下载】
• 调试工具 Vue Devtools