vue传统方式开发（非npm）集成element ui

最新推荐文章于 2024-05-25 02:06:36 发布

路上ing

最新推荐文章于 2024-05-25 02:06:36 发布

阅读量8.4k

点赞数 3

本文链接：https://blog.csdn.net/crj121624/article/details/83063292

版权

php 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.为啥会用传统方式开发

由于以前老的项目都是采用传统方式开发但是又想用vue这个开发方式将之前的代码改为npm的方式不现实只能两者结合使用cdn方式引入vue开发。

2.如何使用vue进行传统方式开发

2.1引入vue.js

<html>
<head>
	
</head>
<body>
    <div id="app" >
    {{this.test}}
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</html>
<script>
var vm = new Vue({
        el: '#app',
        data: {
            test:'this is first vue'
        }
    })
</script>

上面是一个例子非常简单引入vue.js 即可

2.2 引入elementui

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.0.3/lib/theme-chalk/index.css">

//注意这个要放在vue.js 的下面
<script src="https://unpkg.com/element-ui@2.0.3/lib/index.js"></script>

2.3 请求服务器数据实现增删改查(vue-resource)

2.3.1 post请求

                this.$http.post(
                    'www.api.com/user',{name:'chenrj',sex:'1',age:18},{emulateJSON:true}).then(function(res){
                        this.$message('添加成功');
                },function(){
                    this.$message.error('添加失败');
                });

2.3.2 get请求

                this.$http.get(
                    'www.api.com/user',{params:{user_id:1,page_size:10,page_index:1}},{emulateJSON:true}).then(function(res){
                        this.category_list = res.data.data;
                },function(){
                    this.$message.error('加载列表失败');
                });

3.组件封装

3.1 封装子组件

<template id="test">
    <div>{{this.name}}</div>
</template>
<script>
	
    Vue.component('test', {
        template: '#test',
         props: ['param'],
         data:function(){
            return{
                name:'这是一个组件'
            }
        }
    })
</script>

3.2 引入组件我这里使用的thinkphp 所以只需要include

<include file="../test" />

3.3 使用组件

<test :param='this.param'></test>

以上是vue传统使用方式的总结

路上ing

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
vue传统方式开发（非npm）集成element ui

1.为啥会用传统方式开发由于以前老的项目都是采用传统方式开发但是又想用vue这个开发方式将之前的代码改为npm的方式不现实只能两者结合使用cdn方式引入vue开发。2.如何使用vue进行传统方式开发2.1引入vue.js&lt;html&gt;&lt;head&gt; &lt;/head&gt;&lt;body&gt; &lt;div id="app" &g...
复制链接

扫一扫