一. 前言

本次系列是为广大JAVA程序员学习vue准备的一个入门课程。中间使用的工具很多都是JAVA程序员的惯用工具。学习本课程需要有基础的编程语法，对于前端HTML,CSS与Javascript也需要有基础的认识。

二. 前端的发展

能看到的都是前端，如web,android,ios等

2.1 前端发展图例

2.2 概念解析

2.2.1 Node.js

• 前端可开发后端(仅限于小型应用)
• 异步风格深受开发人员喜爱
• NPM作为node.js的包管理系统首次发布
  • NPM是Node提供的模块管理工具，可方便的下载安装很多前端框架
  • 相当于咱们后端的Maven

2.2.2 前端目前流行框架介绍

名称	特点
Vue.js	轻量易用,当前最火，发展速度快
React.js	混合式开发(集Web开发与APP于一身)
AngularJS	曾今的老大

2.2.3 MVVM认识

• M：即Model，模型，包括数据和一些基本操作
• V：即View，视图，页面渲染结果
• VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

• 只要我们Model发生了改变，View上自然就会表现出来。
• 当用户修改了View，Model中的数据也会跟着改变。 把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上.

三.Nodejs&Npm安装

node自带npm（安装了node也就有npm了）

3.1 安装NodeJs

1. 官方网站查找下载 nodejs.org/en/download…
2. 下载后直接安装(傻瓜式,不解释)
3. 安装后测试
   • 确定环境变量中是否有nodejs的配置
   • 输入命令 node -v ：查看node的版本
   • 输入命令 npm -v : 查看npm的版本
4. 输入命令 npm install npm@latest -g 升级npm

3.2 IDEA中安装NPM

注:JAVA程序员一般使用IDEA做开发,所以我们直接在IDEA中安装NPM支持插件

• 安装后重启idea
• 在idea下方的Teminal即可输入命令

D:\ideaProductNew\vue-hello>node -v
v10.16.0

D:\ideaProductNew\vue-hello>npm -v
6.14.8

3.3 NPM的使用

maven中我们有pom.xml,而在npm中我们有package.json

3.3.1 创建普通Web项目

3.3.2 初始化命令

• npm init -> 初始化，会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)

• npm init -y -> 初始化(跳转确定信息)

  

3.2.3 安装命令

npm安装下载一般都会比较慢，建议修改npm镜像(见3.2.5小节)

• 全局安装(所有项目都能用)
  • npm install -g vue
  • npm -g root 安装路径
• 局部安装(当前项目可以使用) -> 建议使用这种
  • npm install/i vue

3.2.4 其它命令

• 查看某个模块：npm list vue
• 列表模块(查看所有模块)：npm ls
• 卸载模块：npm uninstall vue
• 更新模块：npm update vue
• 运行工程：npm run dev/test/online -> 平时运行使用(需要配置,现在无法执行)
• 编译工程：npm run build -> 上线时需要进行编译(编译完扔到服务器中运行)

3.2.5 切换淘宝镜像

1. 方案一
   • 全局安装nrm: npm install nrm -g
   • 查看镜像源 nrm ls
   • 切换淘宝镜像源 nrm use taobao
2. 方案二(cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org