Vue框架基本配置
【摘要】 Vue框架基本配置
前端之Vue配置
本教程基于vue3进行讲解
不要担心学了没用，xue你学前后端都是用的到的
本来呢，在阅读本教程之前，你应该具备以下知识：
❝❞
HTML css JavaScript
不过本篇博客并不涉及复杂代码，放心食用~~
毕竟hello world还是要的
1. vue是什么
基于官方了解：
❝Vue (读音 /vjuː/，类似于 「view」) 是一套用于构建用户界面的「渐进式框架」。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
❞
简单了解：
❝vue是一个前端框架，他的功能是简化我们的开发流程，能够让我们快速的开发页面。
❞
「说实在的，你现在不了解也没事，毕竟你只要会用，慢慢就了解了」
2. vue的优点
vue是基于MVVM的框架，vue就是组件化的框架，这么做的优点是：前后端分离，易于开发，解耦度高。
「说实在的，你现在不了解也没事，毕竟你只要会用，慢慢就了解了」
3. vue的安装
-
简单安装
❝
就像jQuery一样，你只需要将其源码下载下来，使用script标签导入就可以了。
点击，复制源代码，然后自己找个文件，粘贴进去即可
❞ -
先学会上面这个就行了~~想了解别的方式就自行查阅吧
4. 创建一个目录
在你的文件夹里面，创建一个项目目录（以后学习用，今天先搞hello world），命名你可以随意。
然后创建两个文件夹：jss，css用于用于存放js脚本和css样式。
然后创建一个html文件，命名为index，用于项目首页。
5. Hello World
在IT界，万物皆有Hello World~
「编辑器使用vs code这个我就不用多说了吧」
在vs code打开你刚刚创建的项目：
-
左上角File->Open Folder
-
找到你的项目路径，点击打开
-
打开index.html文件
-
编写如下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue_HelloWorld</title> <script src="js/vue.js"></script> </head> <body> <div id="hello"> {{ a }} <!-- 类似于变量，用于显示字符串，可以随意修改，但是大括号不能变 --> </div> <script> const hello = { // 定义一个函数，用于显示变量所代表的字符串 data(){ // 它是一个函数，具体效果不用管，他是必须要有的 return{ a: "Hello World！I'm Vue!" // 将字符串赋值给a } } } Vue.createApp(hello).mount("#hello") // 使用vue，并通过ID选择器将div选择 </script> </body> </html> -
F5运行你的HTML文件，就可以看到字符串了
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）