本文相关引用来自Vue官网 https://cn.vuejs.org/
作为一个Java后端程序员觉得有必要了解一下当前流行的Vue框架（PS：公司目前后台管理系统前端用的是老掉牙的easyui~囧），是时候更新换代了。
学习目的：构建前后端完全分离的单页面应用
一、什么是Vue.js
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
二、特性
*声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
这是一个简单的Vue应用。Vue实现了数据和DOM的关联，他们之间所有的东西都是响应式的。如果我们在浏览器控制台修改message的值（app.message=Hi），页面上的Hello Vue!也相应的更新为“Hi”
*组件化构建应用
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树:
页面上存在的元素都可分解为一个一个组件
三、环境安装
1.NPM安装vue
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
如果未安装nodejs则会报错需要先行安装nodejs环境：
nodejs官网（https://nodejs.org/en/download/），选择相应的包开始安装,安装步骤如下：
安装成功后进入cmd，输入
#输入node -v 显示node.js的版本号则说明安装成功
node -v
#输入npm -v 显示npm版本说明自带的npm也已经安装成功，npm这里的作用是对Node.js依赖的包进行管理（类似于Java项目的maven）
npm -v
nodejs环境安装成功
至此nodejs安装成功。（注：以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中 。npm目录：下载的具体模块文件 npm-cache目录：npm的缓存文件）
由于国内访问速度较慢，建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度。
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.安装webpack
cnpm install webpack -g
3.安装vue脚手架
npm install vue-cli -g
在计算机创建一个工程目录例如：d:\vueproject\，并进入该目录
cd d:\vue-project\
根据模版创建项目vue init webpack-simple 项目名
vue init webpack demo
创建成功
项目结构如下:
4.安装项目依赖
cd demo #进入项目
npm install
5、安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource --save
6、安装elementui
npm install element-ui --save
6、安装axios
npm install axios
7、启动项目
npm run dev
访问：localhost://8080,成功部署~
如果需要ip地址访问需要更改config目录下的index.js文件
将localhost修改为0.0.0.0
重启应用npm run dev
个人博客：http://www.yllknight.com/
微信公众号：拾年映画
微博：拾年丶映画
网友评论