vue App项目 首页

最新推荐文章于 2024-04-25 22:00:38 发布
最新推荐文章于 2024-04-25 22:00:38 发布
阅读量572 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/guangzhou11/p/9710957.html
版权

1. 下载

npm i mint-ui -S

2. 引入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

3. mt-header的编写

注意：从官网直接复制的代码存在一个bug  ，头部的左右两侧存在间隙

为解决这个问题 ，我们使用
fixed 就好了







4.使用轮播图的时候，注意将<!DOCTYPE html> 去掉
5.在使用轮播图后 我们可以将  fixed  去掉了

 

 
 
6.   axios  的使用
 
 
 
  
Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = 'https://www.sinya.online/api/';

 
 
 
 
　　请求数据：
 
 
 
  
created() {
    this.$axios.get('getlunbo')
      .then(res=>{
        console.log(res);
        this.imgs=res.data.message;
      })
      .catch(err=>console.log(err));
  }

 
 
 
 
　　用  v-for 循环将图呈现出来
 
 
 
  
y<mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index)  in imgs"  :key="index">
                 <img  :src="item.img" >
        </mt-swipe-item>
   </mt-swipe>

 
 
 
 
　　
 
 


 

 

转载于:https://www.cnblogs.com/guangzhou11/p/9710957.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30929295
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue项目首页

				
			

			

				

					m0_61845534的博客
				

				

					09-24
					
					1091
					
				

			

		

		

			
				
项目首页概述:总体布局主要结合了vue和element-ui组件库来实现的element-ui

https://element.eleme.cn/#/zh-CN ​组件使用具体请看element-ui官方网址





1.项目头部的布局左半部分是由一个logo图片,右半部分是两个按钮后期用于登录和注册功能,头   部下面有一个首页和菜谱大全,这两个组件主要功能是后期可以在这两个页面之间自由切换

  代码


<template>
  <el...

			
		

	



                

              
                



	

		

			

				
					
Vue项目主页

				
			

			

				

					HuaJian_Y的博客
				

				

					09-24
					
					351
					
				

			

		

		

			
				
1、 项目描述

    1. 此项目为一个前后端分离的项目；

    2. 采用vue+ES6+element ui等前端最新技术；

    3. 项目包括商家、商品信息、用户、登录注册等多个子模块；

    4. 采用模块化、组件化、工程化的开发模式；

ps：本期只带来首页内容，后续更新项目请持续关注。

2、 项目需求

    2.1 基本页面布局

    2.2 轮播图

项目文件

    vue-cli的项目文件目录

目录/...

			
		

	



                


  
              

                


	

		

			

				
					
【vue实战项目】通用管理系统：首页

				
			

			

				

					Joker_ZJN的博客
				

				

					11-19
					
					1436
					
				

			

		

		

			
				
vue实战小项目系列，一个前端项目从0到1的保姆级教学。很适合后端或者才入门的同学看！

			
		

	





	

		

			

				
					
如何在vue项目中设置首页

					
热门推荐

				
			

			

				

					bingyue0126的博客
				

				

					04-09
					
					2万+
					
				

			

		

		

			
				
如何在vue项目中设置首页
1、首先创建一个vue为后缀名的文件，最好在新建的文件夹下面创建，如下图所示：

说明：一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下，项目中所会引用到的组件放在src文件夹下的components文件夹里面。
2、找到router文件夹，在router文件夹下的index.js文件中设置主页面路由

注意：页面路径一定不能错，否则浏览器无法渲染，要设置的主页面路径等内容在routes下设置为第一位。

...

			
		

	



		

			
		



	

		

			

				
					
Vue项目首页-图标区域页面布局（7-4）

				
			

			

				

					罗彬桦的博客
				

				

					02-28
					
					354
					
				

			

		

		

			
				
图标区域页面布局

git pull //将线上推送到线下
git checkout index-icons //切换到index-icons分支


创建Icons.vue组件

注册并使用组件

代码如下


<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .icons
    overflow: hidden
    height: 0
    padding-bottom: 50%
    .icon
  

			
		

	





	

		

			

				
					
vue2.0音乐app项目源码

				
			

			

				

					12-07
				

			

		

		

			
				
本项目“vue2.0音乐app”是基于Vue 2.0的实践案例，旨在帮助开发者学习如何利用Vue 2.0构建一个完整的音乐应用程序。  首先，我们需要了解Vue 2.0的核心概念。Vue 2.0的核心包括组件系统、虚拟DOM、响应式数据绑定和...

			
		

	





	

		

			

				
					
vue移动端项目打包成app

				
			

			

				

					01-08
				

			

		

		

			
				
这几天 我做了一个vue移动端的小项目 就想着打包成 app安装在手机上看看 我就讲解下整个思路和过程 首先项目开发完之后 （我使用的是vue-cli 3.*版本） 在项目文件夹下创建一个 vue.config.js module.exports ...

			
		

	





	

		

			

				
					
详解Vue webapp项目通过HBulider打包原生APP（vue+webpack+HBulider）

				
			

			

				

					11-28
				

			

		

		

			
				
（或者直接新建一个app项目，然后把里边的unpackage和manifest这两个保留下来，其他的替换成自己dist文件里边的内容）    这个时候是web项目，需要改为APP项目（如果直接新建的app，请忽略此步）   更改前： 更改后...

			
		

	





	

		

			

				
					
vue音乐：vue音乐app

				
			

			

				

					02-12
				

			

		

		

			
				
根据q音乐模拟音乐播放器h5项目## first  npm i或npm install或使用cnpm 第二 npm run dev  │ . babelrc │ . editorconfig │ . gitignore │ . postcssrc . js │ index . html ├─build ├─config │ dev . ...

			
		

	





	

		

			

				
					
uni-app+Vue3+pinia+uview-plus搭建的项目包

				
			

			

				

					12-28
				

			

		

		

			
				
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...

			
		

	





	

		

			

				
					
vue商城项目

				
			

			

				

					09-28
				

			

		

		

			
				
vue商城H5主页面源代码,html、css、js html+css商城首页

			
		

	





	

		

			

				
					
vue设置默认首页的操作

				
			

			

				

					11-19
				

			

		

		

			
				
在router.js设置如下：
index就是默认页面

const routes = [
// 公司项目
{ path: '/', redirect: '/index' },
{path:'/index',component:index},
{
path:'/example',
component:example,
redirect:'/edetail',
children:[
{path:'/edetail',component:edetail}
]
},
{path:'/login',component:login}
]
不使用在根目录设置router的方法，跳转页面带不同的头部信息时容

			
		

	





	

		

			

				
					
一个用vuejs20写的直播类应用web端个人中心

				
			

			

				

					08-12
				

			

		

		

			
				
一个用vue.js(2.0)写的直播类应用web端个人中心

			
		

	





	

		

			

				
					
vue基础教程（7）——构建项目级首页

					
最新发布

				
			

			

				

					关注前端，关注原创
				

				

					04-25
					
					1906
					
				

			

		

		

			
				
前面我们学习了vue的路由和登录页搭建，本文将和大家共同学习首页的搭建。首页示例如图：很多项目经验比较少的同学，一般都是对某些语法很熟悉，但是对整个项目是如何从零开始搭建的，页面布局是如何通过代码实现的，可能并未过多关注。也许有人会说，这些ui框架或者开源项目，都会开箱即用，可如果框架提供的布局无法满足要求呢，如果开源项目存在bug呢，如果企业做大做强需要UI重新设计web端呢？我们有太多的理由去了解这些基础知识，我们可以永远不做，但是不能不会！

			
		

	





	

		

			

				
					
Vue项目首页实现思路总结

				
			

			

				

					lhrdlp的学习笔记
				

				

					08-24
					
					3976
					
				

			

		

		

			
				
文章目录1.项目的基本配置项目结构css初始化和全局样式vue.config.js和.editorconfigTabBar的封装axios封装首页开发首页NavBar的开发请求首页轮播图和推荐的数据轮播图的展示推荐部分数据的展示TabControl的封装和使用请求首页商品数据展示商品数据点击TabBar切换对应的内容使用better-scroll对项目的滚动进行重构回到顶部backTop组件的封装点击组件回到顶部的封装backTop组件的显示和隐藏

根据b站上coderwhy老师的视频做的Vue项目,在老

			
		

	





	

		

			

				
					
Vue2.5开发 App 首页开发

				
			

			

				

					qq_42239520的博客
				

				

					02-25
					
					287
					
				

			

		

		

			
				
主页划 5 个组件，即 header icon swiper recommend weekend
一. header区域开发
1. 安装 stylus
npm install stylus --save
cnpm install stylus-loader --save
2. 编写样式

<template>
  <div class="header">
    &...

			
		

	





	

		

			

				
					
(最详细)VueApp项目实战2 - - 首页制作

				
			

			

				

					yuan
				

				

					12-17
					
					3983
					
				

			

		

		

			
				
一、安装stylus
1.stylus、less、sass三者的区别?
三者都是CSS的预处理器，无需考虑浏览器的兼容性问题，可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，使CSS 更加简洁，不同的是写法上存在些差异；

2.stylus的安装
cd Travel
#  进入项目目录文件
npm install stylus --save
#  安装stylus
npm install stylus-loader --save
#  安装stylus的依赖包
npm run

			
		

	





	

		

			

				
					
(最详细)VueApp项目实战 - - 项目环境搭建

				
			

			

				

					yuan
				

				

					12-17
					
					3207
					
				

			

		

		

			
				
一、项目环境准备
1.Node.js
a. 官网下载安装包：Node.js中文官网

b. 安装检测：Windows系统打开cmd命令行, Mac系统打开终端
node -v
# 输入后回车
v14.15.1
# 出现版本号, 则表示'Node.js'安装成功

npm -v
# 输入后回车(检测'Node.js'的包管理工具是否自动安装)
6.14.8
# 出现版本号, 说明安装成功

2.Vue脚手架( Vue-CLI )
a. 查看Vue官方文档：Vue-CLI脚手架

强调!!!
此项目运用的是Vu

			
		

	





	

		

			

				
					
Vue仿饿了么app项目总结

				
			

			

				

					qq_40588413的博客
				

				

					03-04
					
					1288
					
				

			

		

		

			
				
前言
这是我的第一个基于Vue项目的作品，目的是把之前的前端知识累积加上目前流行的前端框架，以项目的形式展示出来。
大家在学习Vue的时候，可以将此项目作为学习Vue框架的一个模板

源码地址
源码：https://github.com/shifengming/sell
实现功能


Goods、Ratings、Seller 组件视图均可上下滚动


商品页 点击左侧menu，右侧list对应跳转...

			
		

	





	

		

			

				
					
vue  app项目中打开链接

				
			

			

				

					03-31
				

			

		

		

			
				
在Vue app项目中打开链接，可以使用Vue Router来实现。  首先，在Vue项目中安装Vue Router：  ``` npm install vue-router --save ```  然后，在项目的入口文件（如main.js）中引入Vue Router，并将其作为Vue实例的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值