Vue这个框架发展也有很长时间了，之前在网上也看过一些资料，但是没有实际地去学习过，这次打算花点时间开始学习一下这个框架。不看不知道，进到Vue官网一看，最新版本已经到了3.1.5了。说实话连Vue2都没有实际应用过，这就跳到从Vue3开始入门了。
话不多说，任何语言入门都从牛逼的HelloWorld开始。
正好我昨天下载了WebStorm2021版，有了利器就开始干吧。首先我做了一些准备工作，从Vue官网下载了vue.esm-browser-3.1.5.js，因为我是在浏览器环境里来运行Vue程序。
在WebStorm里建一个项目，把vue.esm-browser-3.1.5.js引入进去，这样在写Vue脚本时就有了语法提示，方便多了。看下我的Vue项目结构
新建一个html页面，为了方便测试，我把html、css、js写到一起了，页面代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue Hello World</title>
<style type="text/css">
.demo {
font-family: sans-serif;
border: 1px solid #eee;
border-radius: 2px;
padding: 20px 30px;
margin-top: 1em;
margin-bottom: 40px;
user-select: none;
overflow-x: auto;
}
</style>
</head>
<body>
<!--定义一个简单的html模板-->
<div id="helloWorldVue" class="demo">
<!--使用双括号绑定一个数据变量message-->
{{message}}
</div>
<!--引入最新的3.1.5版本Vue.js-->
<script src="../VueJS/vue.esm-browser-3.1.5.js"></script>
<!--自定义JS脚本-->
<script type="text/javascript">
/*定义一个HelloWorldApp组件*/
const HelloWorldApp = {
data(){
return{
message: 'Hello World Vue.js'
}
}
};
/*调用全局方法createApp创建一个HelloWorldApp应用，并通过调用mount方法与id为helloWorldVue的模板绑定*/
Vue.createApp( HelloWorldApp ).mount( "#helloWorldVue" );
</script>
</body>
</html>打开浏览器运行一下，卧槽竟然报错了，太不给面子了吧?
?
?
引入的vue.esm-browser-3.1.5.js文件报语法错误，Uncaught SyntaxError: Unexpected token 'export'，浏览器环境貌似不支持?export语法，于是打开vue.esm-browser-3.1.5.js文件找到最后一行注释掉
再运行一下，卧槽雷还是报错，Uncaught ReferenceError: Vue is not defined
于是又到Vue官网去找找，是不是漏引了什么JS文件，看到vue.global.js?好像是的，于是下载到本地并引入到页面中
这回应该不会有问题了吧，再刷新一下页面，运行成功没有报错
?
?
?----------------------------------------------简单分割线--------------------------------------------
本次代码已打包，链接: https://pan.baidu.com/s/1jZmY1oV6vHJ0LDuKMRH2IA? 提取码: b3tk
我的个人订阅号，谢谢关注！
?