丢弃老旧的jquery开发方式吧.使用webpack构建工具开始你的新世界
ThinkPHP 5.1 + Vue 自动化构建解决方案
依赖nodejs yarn

一个index.vue文件示例的登录demo<style scoped lang="scss">
.main {
margin: 0 auto;
max-width: 500px;
background: #fff;
border: solid 1px #ddd;
padding: 15px;
}
input {
outline: none;
width: 100%;
border: solid 1px #4288ce;
padding: 10px;
color: #888;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login-btn {
background: #000088;
border: solid 1px #000088;
padding: 6px 15px;
width: 140px;
color: #fff;
text-align: center;
}
</style>

<template>
<section>
<div class="main">
<h1>登录demo</h1>
<p>
<input v-model="form.username" placeholder="请输入登录帐号">
</p>
<p>
<input v-model="form.password" placeholder="请输入登录密码">
</p>

<p style="text-align: right">
<button class="login-btn" @click="onLogin">登录</button>
</p>
</div>
</section>
</template>

<script>
import Component from 'vue-class-component'

@Component
export default class Index extends Vue {
form = {}

onLogin () {
alert('登录成功')
}
}
</script>vue-loader让我们可以使用css预处理工具.也让我们css模块化(在style写的样式都只在此文件有效,前提是你没删掉scoped)

github.com : https://gitee.com/kingeasts/tp5_vue_authbuild/tree/master

评论() 相关

收藏

赞

wdaglb

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。