Vue系列(二)：Vue环境搭建与简单入门
重构的项目前端由原来的 JSP 改为 Vue 框架来实现，后台对应的 Controller 修改为 Restful 接口。
使用 Vue 框架来实现前端的业务，前后端分离模式，充分发挥前端的优势，熟悉前端开发工具(node,webpack,npm)，体验前端开发过程，走向全栈不归路。
环境搭建
下载 Node.js，可下载压缩版，解压缩到本地
配置 Node 本地环境变量
系统属性->高级系统设置->环境变量->系统变量->新建；
新建变量为 NODE_HOME，值为Node的安装路径(如 D:\Program Files\node-v10.8.0-win-x64); 在Path里添加:%NODE_HOME%查看Node版本
node -v
v10.8.0Node自带了 NPM 依赖管理工具, 查看Npm版本
npm -v
6.2.0设置 NPM 淘宝镜像:http://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
本地安装 webpack 打包工具
npm install –save-dev webpack
npm install –save-dev webpack-cli
webpack -v //查看版本
4.17.2
webpack-cli -v //查看版本
3.1.0安装vue：https://cli.vuejs.org/zh/guide/installation.html
npm install -g @vue/cli
vue –version | -V
3.0.1安装原型开发依赖(可省略),cli-service是全局依赖
npm install -g @vue/cli-service-global
安装@vue/cli-service，否则项目启动会报错
npm install -g @vue/cli-service
安装依赖 vue-template-compiler
cnpm install vue-template-compiler
创建项目
vue create hello-world
显示 Successfully created project hello-world. 表示项目创建成功进入项目目录
cd hello-world
启动项目
npm run serve (构建开发环境,未做优化)
npm run build (构建生产环境)
启动项目会先进行编译，显示 DONE Compiled successfully in 17596ms 表示项目编译启动成功，显示项目运行地址：
App running at:
- Local: http://localhost:8080/
- Network: http://10.0.2.2:8080/
- 访问项目，在浏览器输入访问地址
在浏览器显示 Vue 默认首页。
项目结构
初始的项目上结构如下，也可以进行修改
1 | ├── node_modules // 项目依赖包文件夹 |
Vue简单入门
- 参考官网的单示例在html页面演示 使用浏览器打开，在输入框中输入内容，下面 div 内容响应变化，这是监听到页面状态变化同步到数据的改变；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 这是 view -->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"，它连接 View 与 Model
new Vue({
//绑定的DOM元素(挂载)
el: '#app',
//绑定的数据对象
data: exampleData
})
</script>
</html>
打开调试窗口，在 Console 中输入: exampleData.message = “天天向上”, 输入框内容随之改变, 这是数据驱动DOM节点更新。
Vue系列(二)：Vue环境搭建与简单入门
