老项目引用Vue和Element框架

最新推荐文章于 2023-11-08 14:59:04 发布

龙中舞王

最新推荐文章于 2023-11-08 14:59:04 发布

阅读量425

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44695769/article/details/130260454

版权

文章介绍了如何将使用Jquery的老项目改用Vue框架重写，强调Vue的强制性数据和方法管理对后期维护的益处。步骤包括下载vue.min.js，明确引用顺序，以及在HTML中设置#app。同时提到了ElementUI的引入，并展示了基础的Vue实例应用。

摘要由CSDN通过智能技术生成

前言

公司有些老项目，用Jquery写代码特别乱，打算重新开始，用Vue框架重新写一遍。其实Vue是中小公司的福音。因为Vue是强制框架搭建，data存数据，method存方法。这种强制的约束方便后期其它人员维护。但是命名不规范，维护两行泪。

第一步：下载vue.min.js

链接: 在哪里下载vue.js或者是vue.min.js

第二步：明确载入顺序

页面引用顺序为：

vue库文件
Element文件（element引入必须在Vue之后）
body定义#app
引入js代码，js代码里面声明#app（js声明必须在dom元素创建之后）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="~/Scripts/vue.min.js"></script>
    <script src="~/Scripts/ElementUI/element-ui.js"></script>
    <link rel="stylesheet" href="~/Content/ElementUI/element-ui.css">
    <script src="~/Scripts/echarts/echarts.js"></script>
    <link rel="stylesheet" href="~/Scripts/Views/NetworkConnector/index.css">//这个是项目样式
</head>
<body>


    <div id="app" style="min-width:600px">
        <span>{{msg}}</span>
        <el-button>默认按钮</el-button>
    </div>

    <script src="~/Scripts/Views/NetworkConnector/index.js"></script>
//这个存放项目js
</body>

</html>

js文件


new Vue({
    el: '#app',
    data() {
        return {
            msg: '拉拉'
        }
    },
    methods: {
        test() {
            console.log("hello world!");
        }
    },
    mounted() {
        this.test();
    }
})