[笔记]vue从入门到入坟《一》helloworld 环境及安装-阿里云开发者社区

[笔记]vue从入门到入坟《一》helloworld 环境及安装

2023-10-16 52

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： [笔记]vue从入门到入坟《一》helloworld 环境及安装

安装

在线版

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<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面板