思否购买后，视频教程即可永久观看
付费内容：
【4天速成】文档、视频、源码
Vue项目，实践课程
适用人群
1.零基础，想快速学习，前端的人
2.适合无项目，经验的人，毕业生
3.想全面提升，自己技术栈
周期：4天
第一天: Vue(重点)
作业
一. 熟知课堂上案例，及运行效果
二. 为代码，写注释，简单阅读vue底层源代码
第二天: Vant(轻松)
作业
亲自调试，1~2案例
第三天: Element(轻松)
作业
亲自调试，1~2案例
第四天: 项目实践(重点)
第一个项目: 小拼团官网
第二个项目: APP下载页
第三个项目: PDF在线生成
第四个项目: 迷你版Vue框架
Vue3.js框架（day1.重点）
快速开始
Using unpkg CDN:
<script src="https://unpkg.com/vue@next"></script> Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>完整案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data: function () {
return {
message: "hello world"
}
}
}).mount('#app')
</script>
</html>Vant3.js组件库（day02.移动端）
Using jsDelivr CDN：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" /> <script src="https://cdn.jsdelivr.net/npm/vue@next"></script> <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script> 完整案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
<script>
const app = Vue.createApp({});
app.use(vant);
app.mount('#app');
</script>
</html>Element.js (day03.后端)
Using jsDelivr CDN：
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script> 完整案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
visible: false
}
}
})
</script>
</html>Vue最佳实践(day04)
小拼团官网：
需求背景：由于小程序或者app，在缺乏官网的情况下，很难用最简短的描述出产品的核心功能。官网的作用：一方面,可以突出核心产品的功能，另一方面，快速高质量，满足域名备案的需要，于是这个官网，产品就有了。
作者将带领大家，把原先静态官网，改版为vue.js框架
APP下载页：
线上体验：https://admin.yihuo88.com/app...
需求背景：由于2021年帮公司开发出来了APP。但是由于缺乏app引导页下载，于是这个项目有。
作者将带领大家，把原先avalon框架，改版为vue.js框架
PDF在线生成
体验地址： https://notestore.cn/v1.2/pdf...
需求背景：由于文档，放在每次都是需要，打开网页阅读不是特别方面。在这个需求非常明确的情况下，我们就打算把文档做成能生成PDF，于是这个需求也有了
作者将带领大家，改版为element.js + vue.js框架
购买须知：
1、本课程为虚拟产品，一经购买，概不退款（讲师特别声明除外）
2、在使用过程中，遇到任何问题，请邮件联系：pr@sifou.com
3、划线价说明：商品展示的划横线价格为参考价，并非原价。该价格仅供您参考。
版权声明：讲者在本产品上发表的全部原创内容（包括但不限于文字、视频、图片等）著作权均归讲师本人所有。未经讲师授权许可，观众用户不得以任何载体或形式使用讲师的内容。
