前端基础（Vue的模块化开发）-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端基础（Vue的模块化开发）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：前面学习了前端HTML、CSS样式、JavaScript以及Vue框架的简单适用，接下来运用前端模块化编程的思想，继续学习Vue框架，完成自己项目项目的搭建。

响应式基础 ref reactive

学习成果展示

Vue项目搭建

搭建自己的vue项目

总结

响应式基础 ref reactive

关于ref和reactive，官方解释如下，另外一篇博客写得也很清楚

响应式基础 | Vue.js (vuejs.org)

谈谈Vue3中的ref和reactive_vue reactive_七公子77的博客-CSDN博客

学习成果展示

不用vue框架写一个table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试用例管理平台</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div calss="table" style="
    display: inline-block">
        <h2>测试用例</h2>
        <button class="add-case-button" @click="isEdit=true">
            新增用例
        </button>
        <table border="2">
            <col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
            <col style="width: 100px" />
            <col style="width: 100px" />
            <col style="width: 100px" />
            <col style="width: 100px" />
            <tr>
                <th>用例名</th>
                <th>步骤名</th>
                <th>关键字</th>
                <th>参数1</th>
                <th>参数2</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>参数正确登录成功</td>
                <td>输入正确的参数登录成功</td>
                <td>用户名 密码</td>
                <td>用户名</td>
                <td>密码</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>参数错误登录失败</td>
                <td>输入错误的参数登录失败</td>
                <td>用户名 密码</td>
                <td>用户名</td>
                <td>密码</td>
                <td><button>删除</button></td>
            </tr>
            <tr>
                <td>参数为空登录失败</td>
                <td>输入的参数为空登录失败</td>
                <td>用户名 密码</td>
                <td>用户名</td>
                <td>密码</td>
                <td><button>删除</button></td>
            </tr>
            </col>
        </table>
    </div>
</body>

</html>

前端基础（Vue的模块化开发）,前端技术,前端

上面的实现方式用到了很多个th、td标签，维护很麻烦，那有没有更好的解决方法？

如何用vue框架实现？

用v-for，遍历数组中的元素，进行列表的渲染。

关键两行代码：

取列表的表头，表头名称前加上编号，编号从1开始

<th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>

取列表里具体的内容

<tr v-for="testCase in testCases" >

如果要修改表头、列表里内容，不需要在标签里一个一个改，只需要去维护tableName、testCases里的值即可。是不是很省劲！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试用例管理平台</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="test">
        <div calss="table" style="
    display: inline-block">
            <h2>测试用例</h2>
            <table border="2">
                <col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <thead>
                    <tr>
                        <th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="testCase in testCases">
                        <td>{{testCase.caseName}}</td>
                        <td>{{testCase.stepName}}</td>
                        <td>{{testCase.keywords}}</td>
                        <td>{{testCase.param1}}</td>
                        <td>{{testCase.param2}}</td>
                        <td>{{testCase.opration}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        const { createApp, computed, ref, reactive } = Vue;
        const = MRJJ{
            setup() {
                let tableName = reactive({
                    "caseName": "用例名",
                    "stepName": "步骤名",
                    "keywords": "关键字",
                    "param1": "参数一",
                    "param2": "参数二",
                    "opration": "操作",
                })

                let testCases = ref([
                    {
                        "id": 1,
                        "caseName": "参数正确登录成功",
                        "stepName": "登录成功",
                        "keywords": "用户名",
                        "param1": "用户名",
                        "param2": "密码",
                        "opration": "删除"
                    },
                    {
                        "id": 2,
                        "caseName": "参数错误登录失败",
                        "stepName": "登录失败",
                        "keywords": "用户名",
                        "param1": "用户名",
                        "param2": "密码",
                        "opration": "删除"
                    },
                    {
                        "id": 3,
                        "caseName": "参数为空登录失败",
                        "stepName": "登录成功",
                        "keywords": "用户名",
                        "param1": "用户名",
                        "param2": "密码",
                        "opration": "删除"
                    },
                ])
                return { tableName, testCases }
            }
        };
        createApp(MRJJ).mount('#test');
    </script>
</body>

</html>

可以看到td标签里的内容自动取出来了。

前端基础（Vue的模块化开发）,前端技术,前端

踩坑记录：

createApp(MRJJ).mount('#test');

id为test这个div标签里的内容，才能引用MRJJ里面的方法。

结合前面的内容，最终写出来的页面！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试用例管理平台</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<header id="title">
    欢迎来到MRJJ_9的自动化测试平台
</header>
<body>
    <div class="learn-website">
        <h3>前端学习网站</h3>
        <a class="biglink" href="https://www.w3school.com.cn/html/index.asp">w3school.com</a>
        </br>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">MDN 社区</a>
        </br>
        <a class="test01" href="https://www.csdn.net">CSDN社区</a>
        </br>
        <h3>本人博客</h3>
        <a href="https://blog.csdn.net/mrjj_9/category_12393537.html">前端学习博客</a>
    </div>
    <div id="test">
        <div class="form" style="
        display: inline-block">
                <h2 id="form-title">添加测试用例</h2>
                <!-- <button class="close-button" @click="isEdit=false">关闭</button> -->
                <label>
                    用例名：
                    <input type="text" placeholder="输入测试用例名称" name="caseName" v-model="newCase.caseName">
                </label>
                <label>步骤名：
                    <input type="text" placeholder="输入测试步骤名称" name="stepName" v-model="newCase.stepName">
                </label>
                <div>请选择用例类型：
                    <label>
                        <input type="radio" name="type" value="api">接口自动化
                    </label>
                    <label>
                        <input type="radio" name="type" value="ui">UI自动化
                        <br>
                    </label>
                </div>
                <label for="keywords">
                    关键字：
                </label>
                <select name="keywords" v-model="newCase.keywords">
                    <option value="openBrowser">打开浏览器</option>
                    <option value="params">传入必传参数</option>
                </select>
                </br>
                <lable>参数一：<input type="text" name="param1" v-model="newCase.param1"></lable>
                <lable>参数二：<input type="text" name="param2" v-model="newCase.param2"></lable>
            </br>
                <button id="addSubmit" type="button" @click="addCase">提交新增</button>
            </form>
        </div>
        <div calss="table" style="
    display: inline-block">
            <h2>测试用例</h2>
            <table border="2">
                <col style="width: 100px; overflow: hidden; text-overflow: ellipsis" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <col style="width: 100px" />
                <thead>
                    <tr>
                        <th v-for="(Name,key,index) in tableName " :key="key">{{index+1}}{{Name}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="testCase in testCases">
                        <td>{{testCase.caseName}}</td>
                        <td>{{testCase.stepName}}</td>
                        <td>{{testCase.keywords}}</td>
                        <td>{{testCase.param1}}</td>
                        <td>{{testCase.param2}}</td>
                        <td>
                            <button id="delete" @click="deleteCase(testCase)">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        const { createApp, computed, ref, reactive } = Vue;
        const MRJJ = {
            setup() {
                let tableName = reactive({
                    "caseName": "用例名",
                    "stepName": "步骤名",
                    "keywords": "关键字",
                    "param1": "参数一",
                    "param2": "参数二",
                    "opration": "操作",
                })

                let testCases = ref([
                    {
                        "id": 1,
                        "caseName": "参数正确登录成功",
                        "stepName": "登录成功",
                        "keywords": "用户名",
                        "param1": "用户名",
                        "param2": "密码",
                        "opration": "删除"
                    },
                    {
                        "id": 2,
                        "caseName": "参数错误登录失败",
                        "stepName": "登录失败",
                        "keywords": "用户名",
                        "param1": "用户名",
                        "param2": "密码",
                        "opration": "删除"
                    },
                    {
                        "id": 3,
                        "caseName": "参数为空登录失败",
                        "stepName": "登录成功",
                        "keywords": "用户名",
                        "param1": "用户名",
                        "param2": "密码",
                        "opration": "删除"
                    },
                ])
                let newCase = reactive({
                    "caseName": "用例名",
                    "stepName": "步骤名",
                    "keywords": "关键字",
                    "param1": "参数一",
                    "param2": "参数二",
                })
                let isCaseName = ref(true);

                function deleteCase(testCase) {
                    console.log("要删除的用例是：", testCase)
                    testCases.value.splice(testCases.value.indexOf(testCase), 1);
                }

                function addCase() {
                    let lastId = testCases.value[testCases.value.length - 1].id;
                    console.log(lastId);
                    let addCase = { ...newCase };
                    addCase.id = lastId + 1;
                    testCases.value.push(addCase);
                    isEdit.value = false;
                }

                return { tableName, testCases, newCase, addCase, deleteCase}
            }
        };
        createApp(MRJJ).mount('#test');
    </script>
    <link rel="stylesheet" href="case.css">
    <style>

        body {
            background: aliceblue;
            background-image: url("./picture.jpg");
            background-size: 60vw;
            background-position: 10% 10%;
        }
    </style>
</body>
</html>

前端基础（Vue的模块化开发）,前端技术,前端

Vue项目搭建

npm init vue

前端基础（Vue的模块化开发）,前端技术,前端

创建的项目结构，在本地将项目启动起来，进入工程目录，打开终端，输入命令：npm run dev

前端基础（Vue的模块化开发）,前端技术,前端本地启动完成的项目

前端基础（Vue的模块化开发）,前端技术,前端

vue插件安装必备，推荐看下面的这篇博客

开发vue3必备的几个vscode插件，你用上了吗？-腾讯云开发者社区-腾讯云 (tencent.com)

vs code切换主题，File->preferences-Theme

前端基础（Vue的模块化开发）,前端技术,前端

搭建自己的vue项目

搭建过程遇到一些坑，特开了一个博客记录

启动Vue项目踩坑记录_MRJJ_9的博客-CSDN博客

使用组件化的方式，搭建的Vue项目大功告成了！！！

前端基础（Vue的模块化开发）,前端技术,前端

总结

从前面的基础学习，一路走到Vue框架这里，可以看到组件化编程确实很省劲，这也是实际项目中大都要用到vue3框架的原因，到这里前端方面的基础自己再好好学习一下，为后面自己做个网站打一个坚实的基础！！！前端还挺有意思的！文章来源地址https://www.toymoban.com/news/detail-659956.html

到了这里，关于前端基础（Vue的模块化开发）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！