首先需要在电脑上安装nodejs,因为nodejs中已经内置了npm
npm的下载安装:https://blog.csdn.net/YyjYsj/article/details/109669338
打开IDEA,创建工程
1、创建一个新的工程
选择 Static Web
命名,点击完成
2、安装 vue
2-1、下载安装 vue.js
下载地址:https://github.com/vuejs/vue
可以下载 2.6.12 版本:https://github.com/vuejs/vue/archive/v2.6.12.zip,在 dist 文件夹中可找到 vue.js 文件
2-2、直接使用公共的CDN(内容分发网络)服务:(这种方式需要联网的情况下使用)
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2-3、通过 npm 安装(推荐)
2-3-1、点击项目的左下角 Terminal ,打开控制台
输入 npm init -y 来初始化项目,-y 代表全部使用默认的信息,不用一步一步的确认
package.json 文件内容:
下载安装 vue.js
以管理员身份打开命令提示符
使用 npm install vue --save 命令局部安装,安装到当前项目中
回到 IDEA,发现 package.json 文件中多了一个版本号
vue.js 文件也被下载到了项目中,需要时只需引入就可以了
3、演示双向绑定与事件处理
创建一个HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="num--">-</button>
<input type="text" v-model="num">
<button v-on:click="num++">+</button>
<h2>{{name}},有{{num}}个朋友</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
name:"张三",
num:1
}
});
</script>
</body>
</html>
运行效果: