安装
在线版
<!-- 开发环境版本，包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
离线版2.6.14
https://github.com/vuejs/vue/tree/dev/dist/vue.js
vuedevtool调试工具安装
直接去Chrome 的谷歌应用商店搜索 vuejs devtool
github安装
git clone https://github.com/vuejs/devtools
Idea 安装vuejs插件
下载插件
https://plugins.jetbrains.com/plugin/9442-vue-js/versions/stable
找到idea版本对应的vue插件
安装
Idea内 Setting->Plugins->齿轮->install from disk
选择你vue插件目录下lib/vuejs.jar
哦 别忘了把vuejs目录放在idea插件目录
例如
D:\idea\IntelliJ IDEA 2019.2.4\plugins\vuejs\lib\vuejs.jar
创建项目
idea创建empty Project
然后
创建js目录，放入vue2.6.js离线版
创建html文件
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue01HelloWorld</title> </head> <body> <div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script type="text/javascript" src="js/vue2.6.js"></script> <!-- 开发环境版本，包含了用帮助的命令行警告 --> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <!-- 生产环境版本，优化了尺寸和速度 --> <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>--> <script type="text/javascript"> new Vue({ el:'#app', data:{ message:'vue.js大爷你好！' } }) </script> </body> </html>
运行调试
运行
调试F12
会发现有个vue面板
