一、Vue-Cli3 环境安装
- node安装
到官网地址http://nodejs.cn/download/ 下载最新版本的node
安装后，打开cmd 输入 node –v ，npm –v 可以查看版本号
node的安装主要是为了安装npm ，npm是Node.js的包管理工具（package manager）,类似vs里的nuget 。
为啥需要这么预估包管理工具，因为我们在开发时会用到别人写的插件，如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。
更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。
有了npm ,我们就可以通过npm install 很轻松的安装我们所需要的包；
- npm安装淘宝镜像
为了下载速度，我们可以把registry 设置到淘宝的镜像网站上
在cmd里输入npm config set registry https://registry.npm.taobao.org
通过 npm config get registry 查看
- 安装Vue-Cli3
通过vue create 快速创建一个新项目的脚手架，免去我们自己去进行webpack
的配置
npm install –g @vue/cli
通过 vue –V 查看 vue版本
二、开发工具
VS Code
安装扩展Vetur，方便我们写vue代码
三、创建vue项目
vue简单介绍
Vue.js是什么
Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，拥有非常容易上手的 API； Vue.js是一个构建数据驱动的 Web 界面的库。
Vue.js的特性
轻量级的框架
双向数据绑定
指令
插件化（组件化）
MVVM框架
『View』：视图层（UI 用户界面） 『ViewModel』：业务逻辑层（一切 js 可视为业务逻辑） 『Model』：数据层（存储数据及对数据的处理如增删改查）
· MVVM 将数据双向绑定（data-binding）作为核心思想，View 和 Model 之间没有联系，它们通过 ViewModel 这个桥梁进行交互。
· Model 和 ViewModel 之间的交互是双向的，因此 View 的变化会自动同步到 Model，而 Model 的变化也会立即反映到 View 上显示。
· 当用户操作 View，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。
2．创建vue项目
在你需要创建的项目目录下打开cmd 输入 vue create 项目名称 ，就自动创建了，生成项目文件如下。
node_modules 文件夹:存放第三方依赖包，通过npm install 安装的包都是放到该目录下。
public 文件：存放静态文件，包括网站图标和页面入口文件
src：存放我们的源码文件，其中main.js为入口js，app.vue为根组件
package.json：项目描述及依赖
3.运行和发布项目
使用npm run serve 就可以运行该项目，使用npm run build就可以打包发布该项目，打包后的文件存在dist文件夹里，该配置命令来做package.json文件里
运行npm run serve 会出现运行成功如下图
- 生命周期
5.编写代码
四、集成element-ui
element-ui提供了大量好用的组件，可以帮助我们快速的进行开发。
采用npm安装 命令：npm i element-ui –S
-
安装完成后在main.js全局引用
image.png
-
在页面上使用
image.png
组件的具体使用方式参考element-ui 官网
五、学习资料
es6：https://es6.ruanyifeng.com/ （开发过程中尽可能使用es6的用法，变量（let，const）的申明，Promise、async的使用）（必学）
Vue：https://cn.vuejs.org/ （必学）
Vue-Router：https://router.vuejs.org/zh/ （必学）
Vuex：https://vuex.vuejs.org/zh/（必学）
webpack：https://www.webpackjs.com/
