web前端项目实战_Vue项目 仿美团【爱创课堂】
目录
Vue 2.0
一、Vue Cli
1.1安装
1.2创建项目
1.3启动项目
1.4目录架构
1.5 webpack配置
二、项目实战
2.1技术架构
2.2目录部署
2.3路由
2.4 webpack拓展
2.5 vue cli拓展
2.6数据
2.7开发模块顺序
三、Vue
3.1路由守卫
一、Vue Cli
在vue项目中,我们要编译vue文件,要编译ES6文件,要编译css预编译语言等等,在项目开发之前,我们要做很多准备。vue为了简化开发前的准备,提供了vue-cli脚手架。
1.1安装
vue-cli,提供了vue指令,因此要全局安装 npm install -g @vue/cli 安装完成,提供了vue指令,通过vue -V查看版本号
。。。。
1.2创建项目
通过create 参数创建项目 vue create 项目名称 vue cli创建的项目也是基于yarn管理 npm install yarn yarn也是一个包管理器,为了替代npm 在项目中,安装模块,通过yarn来安装 npm安装: npm install 模块 yarn安装:yarn add 模块
。。。
1.3启动项目
通过yarn serve即可启动项目。
。。。
1.4目录架构node_modules 依赖的模块 public 静态资源模块 index.html 入口html文件 favicon.ico icon文件 src 开发的目录 assets 所有静态资源(会被webpack处理的) components 所有组件 views 路由页面 App.vue 应用程序组件(vue cli中组件文件首字母都大写了。) main.js 项目入口文件 router.js 路由文件 store.js store文件 .broserslistrc 浏览器配置 .eslintrc.js js校验配置 .gitigonore git提交时候忽略的文件 babel.config.js babel配置文件 package.json 模块配置文件 postcss.config.js css编译配置 yarn.lock yarn锁文件
1.5 webpack配置vue cli也是通过webpack配置的,因此我们可以定义webpack配置 在vue.config.js文件中(我们可以自定义) 通过configureWebpack定义webpack配置 yarn serve
二、项目实战
我们实现一个移动端团购网站。
2.1技术架构
vue, vuex, vue router, axios, vue组件, vue-cli, less|scss, webpack实现一个单页面应用程序。
2.2目录部署
参考vue cli目录结构,webpack编译的项目
src 开发目录
assets 静态资源
components 所有组件
views 所有路由组件
App.vue 应用程序组件
main.js 入口文件
store.js store模块
router.js 路由模块
index.html html入口文件
webpack.config.js webpack配置
2.3路由
有三个页面,定义三个路由
首页 默认路由
列表页 /list/:id
详情页 /detail/:id
2.4 webpack拓展
在加载机中,
include 加载机处理的目录
exclude 加载机不能处理的目录
2.5 vue cli拓展
我们可以通过 vue config将所有配置输出(包含webpack配置)
效果图
1// 定义配置
2module.exports = {
3 // vue入口
4 resolve: {
5 // 别名
6 alias: {
7 vue$: 'vue/dist/vue.js'
8 },
9 // 拓展名
10 extensions: ['.js', '.vue']
11 },
12 // 入口
13 entry: './src/main.js',
14 // 发布
15 output: {
16 filename: './dist/main.js'
17 },
18 // 模块
19 module: {
20 // 加载机
21 rules: [
22 // es6
23 {
24 test: /\.js$/,
25 loader: 'babel-loader',
26 query: {
27 presets: ['es2015']
28 },
29 // 过滤目录
30 include: '/src/',
31 exclude: '/node_modules/'
32 },
33 // vue组件
34 {
35 test: /\.vue$/,
36 loader: 'vue-loader'
37 },
38 // css
39 {
40 test: /\.css$/,
41 loader: 'style-loader!css-loader'
42 },
43 // less
44 {
45 test: /\.less$/,
46 loader: 'style-loader!css-loader!less-loader'
47 },
48 // scss
49 {
50 test: /\.scss$/,
51 loader: 'style-loader!css-loader!sass-loader'
52 }
53 ]
54 }
55}
2.6数据
通常来说,网站中有两类数据
一类数据是不变的,每次打开浏览器看到的结果都是一样的,因此这类数据我们可以直接写在页面中,作为同步数据,
当我们加载完页面,我们就可以直接使用这类数据了
一类数据是可变的,每次打开浏览器看到的结果都是不一样的,因此这类数据我们可以作为异步数据,通过异步请求获取
当我们的页面加载完成之后,我们发布异步请求或者这类数据
1<!-- 分类模块 -->
2<ul class="home-types">
3 <router-link v-for="(item, index) in types" :key="index" tag="li" :to="'/list/' + item.id">
4 <img :src="'/img/icon/' + item.img" alt="">
5 <p>{{item.text}}</p>
6 </router-link>
7</ul>
2.7开发模块顺序
1 获取数据并存储
2 分析页面结构,写视图
3 根据视图写样式
4 绑定交互
三、Vue
3.1路由守卫
vue路由提供了三种监听路由变化的方式
第一种 全局监听
所有的路由变化,都会监听到
在路由实例化对象上,通过beforeEach, afterEach等方法监听路由的改变
参数是回调函数
回调函数的参数
第一个表示当前路由对象
第二个参数表示上一个路由对象
如果是beforeEach会出现第三个参数,类似express路由中间件的第三个参数,next方法,是否继续执行,该方法必须执行。
第二种 局部监听
只针对某个组件监听路由的变化
我们在组件实例化对象上,通过beforeRouteEnter, beforeRouteLeave, beforeRouteUpdate等方法可以监听路由的变化。
第一个参数表示当前的路由对象
第二个参数表示上一个路由对象
第三个参数表示执行进入路由的方法,必须要执行
第三种 watch监听
我们可以通过组件实例化对象的watch监听路由数据的变化
可以监听$route属性的变化,来判断路由
第一个参数表示当前的路由对象
第二个参数表示上一个路由对象
在官网中,前两种监听路由变化的方式也称之为路由守卫
全局监听也称之为全局路由守卫
局部监听也称之为局部路由守卫
1// 局部监听
2beforeRouteEnter(route, oldRoute, next) {
3 console.log(arguments)
4 // 必须执行next方法
5 next();
6},
7// 监听路由的变化
8watch: {
9 // 路由数据的变化
10 $route() {
11 // console.log(111, arguments)
12 // 更新数据
13 this.updateData();
14 }
15}
16// 监听路由变化
17router.afterEach((...arg) => console.log(arg))
18// 改变之前
19router.beforeEach((route, oldRoute, next) => {
20 console.log(route, oldRoute)
21 // 必须要执行
22 next();
23})
需要源码、案例、视频教程可以找我或者搜索公众号:icketang
转载于:https://blog.51cto.com/14337100/2407815
web前端项目实战_Vue项目 仿美团【爱创课堂】相关推荐
- web前端项目实战_vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置 二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
- 视频教程-项目实战视频课程:美团小程序(Node.js+Express+支付)-微信开发
项目实战视频课程:美团小程序(Node.js+Express+支付) 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN ...
- 项目实战视频课程:美团小程序(Node.js+Express+支付)-李宁-专题视频课程
项目实战视频课程:美团小程序(Node.js+Express+支付)-473人已学习 课程介绍 小程序视频教程,本课程实现了美团小程序的核心部分.采用异步的方式,通过AJAX从服务端获 ...
- 视频教程-微信小程序项目实战:高仿iOS计算器-微信开发
微信小程序项目实战:高仿iOS计算器 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲师,制作视频课程超过1 ...
- Web前端布局实战:三国杀页面布局(上)
Web前端布局实战:三国杀页面布局(上) 互联网进入web 2.0时代,由单一的文字和图片组成的静态网页已经不能满足用户的需求,用户需要更好的体验.在web 2.0时代,网页有静态网页和动态网页.所谓 ...
- 【Selenium项目实战】项目环境搭建:安装JDK、mysql、Tomcat、jpress和测试系统
前言 一直想学习自动化测试,但是都没行动,业余时间学习零零碎碎并记录20210416. [Selenium项目实战] 项目环境搭建:安装JDK.mysql.Tomcat.jpress和测试系统 需求分 ...
- 转发:11个web前端开发实战项目案例+源码!拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...
- Vue3 企业级项目实战:项目须知与课程约定
本节内容很重要,希望大家能够耐心看完. Vue3 企业级项目实战 - 程序员十三 - 掘金小册Vue3 + Element Plus + Spring Boot 企业级项目开发,升职加薪,快人一步.. ...
- 百度Web前端开发实战案例解析
从 Web 诞生到如今,Web 前端技术已经逐步成长为一个丰富且有活力的技术世界.随着互联网行业发展格局的频繁演进以及产品策略的不断调整,不同阶段的业务在技术选型.前端性能优化.用户交互体验上不断产生 ...
最新文章
- 从模板方法模式到JDBCTemplate
- 向中国电信nb下发命令_中国电信物联网平台使用介绍
- 安全开发之碰撞检测与伤害计算逻辑
- 【Android Studio安装部署系列】十一、Android studio获取数字签名信息
- MATLAB 中BP神经网络算法用于回归拟合的实现
- php行为和事件是什么,Yii Framework框架中事件和行为的区别及应用实例分析
- Flutter TextField设置默认值默认值和光标位置
- cocos 创建一个js项目_如何使用Cocos2d-JS引擎快速开发一个微信游戏?
- 7z源码的编译与使用
- 设计模式(20):外观模式Facade
- python回归模型调优要运行多久_python机器学习模型参数调优
- 完整版本支付宝扫码支付 c#版本
- Could not find conda environment:
- 程序员到底有没有必要买一台阿里云服务器?
- 图片批量OCR识别--支持各种图片
- 计算机页面里的坚果云删不了怎么回事,我的坚果云文件夹为什么无法删除
- SOC与SIP小芯片两种IP互联技术
- C语言制作一个学生信息管理系统【附代码】
- 本公众号将分享有关开关电源的仿真与计算
- 基于单片机的电机转速测量系统设计