前言

vue已经是国内最流行的框架，越来越成为前端工程师的一项基础技能。开发更加高率和简洁, 易于维护, 快!快!快!就是块 
(甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

1.为什么要学vue

通过vue可以开发：

    1.  pc 项目
    2.  移动端项目
    3.  小程序
    4.  桌面应用

2. 准备工作:

起手安装vue调试工具-devtools 1. 解压devtools.zip 2. 打开Chrome浏览器 => 点击浏览器右上角小图标，按图示操作

 3.  进入

找到第一步中解压的压缩文件

4.  安装完成后，固定显示插件

3.Vue是什么

通俗来说: vue官网。vue是一个渐进式的javascript框架

1.1库:  封装的属性或方法 (例axios.js, jquery.js)
1.2框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

渐进式: 逐渐按需添加, 想用什么就用什么, 不必全都使用

3.安装vue-cli

目标:把@vue/cli模块全局安装
思路:就是一个Npm的第三方包。全局安装即可

步骤:

 1.1设置npm的淘宝镜像:
 
 npm config set registry \https://registry.npm.taobao.org\ #设置淘宝镜像地址
 npm config get registry  #查看镜像地址

4.全局安装命令

npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。

检查是否安装成功

在任意小黑窗中：vue --version
如果可以看到版本号，就表示安装成功了。

小结

 1.  @vue/cli 是完整的包名。包括前面的@符号
 2.  它是vue生态的重要组成部分

5.vue-cli 创建项目

目标:使用vue命令, 创建脚手架项目

步骤:

 1.  创建项目
 2.  选择模板
 3.  安装依赖
 4.  启动项目

1. 创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

2. 选择模板

通过键盘的上下箭头选择合适的模板，如果选择错了，可以按下ctrl+c终止操作。

3. 回车安装依赖

等待脚手架工作自动生成项目文件夹+文件，并下载必须的第三方包。可能要花很久~~~

4. 启动项目

进入脚手架项目下, 启动服务，查看效果

cd vuecil-demo

npm run serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

6. vue-cli项目说明和运行介绍

1.初始项目目录结构

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    └── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹=》写代码
      ├── assets     # 静态资源
          └── logo.png # vue的logo图片
      ├── components # 组件目录
          └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── package.json # 描述项目及项目
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置 
    ├── README.md    # 项目说明
	  └── package-lock.json # 项目包版本锁定和下载地址

2.代码运行基础

webpack + webpackdevserve

可以在nodemoudels中找到 webpack相关的包。

3.代码运行流程

整套代码是基于webpack的。

4.项目打包

npm run build

小结

vue-cli使用vue 命令快速创建项目，它创建的每个项目都有相同的结构；
它的运行机制是基于webpack的

带你走进vue

前言