php项目中使用element.ui和vue

1.plugins中添加axios,element-ui

 

2.全局文件下引入

<script src="/static/plugins/vue@2.5.13/vue.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="/static/plugins/element-ui@2.2.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="/static/plugins/element-ui@2.2.1/lib/index.js"></script>

3.页面内使用

  1) 容器需要增加id属性

  2) 添加script标签,创造vue组件

<script type="text/javascript">

var app = new Vue({

el: '#bm-sign',

data: {

  form:{}

 

},

watch: {},    

...  

})

</script>
3)如需使用axios,直接引入即可:

   <script src="/static/plugins/axios@0.18.0/dist/axios.min.js"></script>

4.其他script标签使用vue组件data中的数据

  app.form即可,如

 for (var obj in app.form) {}

 

转载于:https://www.cnblogs.com/fancyLee/p/9669486.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI是一个基于Vue.js的UI组件库,所以要在PHP集成Element UI,首先要确保项目已经搭建了Vue.js环境。 1. 在PHP项目安装Vue.js:可以使用npm或者yarn来安装Vue.js。在项目根目录下执行以下命令: ``` npm install vue // 或者使用 yarn add vue ``` 2. 集成Element UI:在项目根目录创建一个vue.config.js文件,并在该文件导入Element UI的样式和组件。例如: ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/element-variables.scss";` } } }, chainWebpack: config => { config .plugin('html') .tap(args => { args[0].title = 'My App'; return args; }) } }; ``` 样式文件element-variables.scss定义了Element UI的主题变量,可以根据需要进行定制。 3. 在PHP项目引入Vue.js和Element UI: ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My App</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', template: '<el-button>Click me!</el-button>' }) </script> </body> </html> ``` 4. 在PHP项目使用Element UI组件:在需要使用Element UI组件的地方,直接使用Vue组件的方式引入Element UI组件即可,例如: ```php <template> <el-button type="primary">Click me!</el-button> </template> ``` 以上就是在PHP项目集成Element UI的基本步骤,通过这些步骤可以使用Element UI的样式和组件来美化和增强PHP项目的用户界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值