【JAVA项目开发1·前置知识（一）】前端：VUE

最新推荐文章于 2024-05-05 22:54:22 发布

Qiao_基础软件测试工程师

最新推荐文章于 2024-05-05 22:54:22 发布

阅读量261

点赞数

文章标签： vue.js 前端 java

本文链接：https://blog.csdn.net/cambridge26/article/details/120964556

版权

这个项目的默认先验知识是 JavaScript
默认前端开发软件：VSCode

1.ES6

使用软件：VSCode
步骤：
1）新建一个文件夹，之后它会成为项目的主目录；
2）在VSCode中打开这个文件夹，并在其中新建一个html文档；
3）进入文档后，使用“shift+感叹号”的快捷键，可以快速生成完整的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>Document</title>
</head>
<body>
    <script>
        var a=1;  //键盘输入一个值，而后输出
        //可以用var来声明变量
        console.info(a);

    </script>
</body>
</html>o

2.VUE快速入门

2.1 背景

中国人尤雨溪开发的，是为数不多的世界顶级开源软件，是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用。

2.2 VUE Hello World

VUE的官网就可以学习它的基础知识。

VUE Devtools——VUE的浏览器调试工具，可以使用户在更友好的界面上调试VUE应用。

步骤：
1）新建一个文件夹，作为接下来实验的主目录；

初次实验需要安装VUE：
2）用VSCode打开这个文件夹，新建一个终端（在页面最上方）；
3）新建终端后输入命令：npm init -y
4) 如果没有安装npm，则需要安装node.js，node里面就包含npm。安装方式非常简单，百度即可。
5）装好npm之后（记得配置环境变量），继续使用VSCode，在终端输入命令

npm install vue

如果想要用浏览器打开，则需要在VSCode里安装一个插件：LiveServer
编写代码，右键选择使用Live Server打开

<!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>Document</title>
</head>
<body>
    <!--首先要通过下面这个语句引入VUE-->
    <script src="./dist/vue.js"></script><!--这个路径先.一下，然后找dist文件夹-->

    <div id="app"><!--这个Name是用于绑定的-->
        <h1>Hello,{{name}}</h1>
    </div>
       
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                name:"VUE"
            }
        });

    </script>
</body>
</html>