JS经典实例网站首页 JS经典实例

vue实例-项目首页-完成

发布时间：2020-05-01 13:28:26编辑：雪饮阅读（）

配置自动打开浏览器

在项目根目录package.json中scripts段中配置如：

"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",

即可在运行npm run dev时候自动打开浏览器以当前项目

安装mint-ui

这个ui是饿了么移动端ui

C:\Users\Administrator\WebstormProjects\untitled\cms_project_04>npm install mint-ui

npm WARN deprecated fsevents@1.2.12: fsevents 1 will break on node v14+. Upgrade to fsevents 2 with massive improvements.

npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arc

h":"x64"})

+ mint-ui@2.2.13

added 72 packages in 10.37s

引入mint-ui

在项目目录src下的main.js中如：

// The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 
 Vue.config.productionTip = false
 //引入mint-ui
 import MintUi from 'mint-ui'
 Vue.use(MintUi);
 import 'mint-ui/lib/style.css'
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })

这里是全局导入所有mint-ui的，所以后面在项目中用到mint-ui下属组件时候可以不用单独导入每个下属组件

头部布局

在mint-ui官网文档中

Header组件可用于常见的移动端网页顶部布局

那么这里我就用了最简单一个，替换我们项目中src目录下app.vue中id为app元素中router-view元素之前的部分

那么顶部完成

底部tabbar，类似于微信小程序那样

照例把他的tab代码复制过来，放在我们的<router-view/>下面，因为<router-view/>是未来我们中间的可变内容区域

<template>
   <div id="app">
     <mt-header fixed title="信息管理系统"></mt-header>
     <router-view/>
     <mt-tabbar v-model="selected">
       <mt-tab-item id="tab1">
         <img slot="icon" src="../static/7.jpg">
         tab1
       </mt-tab-item>
       <mt-tab-item id="tab2">
         <img slot="icon" src="../static/7.jpg">
         tab2
       </mt-tab-item>
       <mt-tab-item id="tab3">
         <img slot="icon" src="../static/7.jpg">
         tab3
       </mt-tab-item>
       <mt-tab-item id="tab4">
         <img slot="icon" src="../static/7.jpg">
         tab4
       </mt-tab-item>
     </mt-tabbar>
   </div>
 </template>

复制过来要将上面图片路径中的assets目录名换为static并且提供对应图片在static目录中不然会报错：

ERROR Failed to compile with 1 errors 11:09:35

This relative module was not found:

这个报错就比较奇葩了，还模块不存在，明明是图片

另外他用了v-model并且指定的是select属性，所以我们为select属性初始化一下

export default {
   name: 'App',
   data (){
     return {select:''}
   }
 }

底部tabbar完成

Home

在src下router里的index.js中修改默认的hello word为home，做为我们router-view中的首页的组件

import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'Home',
       component: Home
     }
   ]
 })

同时修改src下components下面的hello word组件为Home文件名，其内容稍微修改下

<template>
   <div class="hello">
 
   </div>
 </template>
 
 <script>
 export default {
   name: 'Home',
   data () {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h1, h2 {
   font-weight: normal;
 }
 ul {
   list-style-type: none;
   padding: 0;
 }
 li {
   display: inline-block;
   margin: 0 10px;
 }
 a {
   color: #42b983;
 }
 </style>

Home-轮播

<template>
   <div class="hello">
     <mt-swipe :auto="4000">
       <mt-swipe-item v-for="(item,index) in imgs">
         <img :src="item.img">
       </mt-swipe-item>
     </mt-swipe>
   </div>
 </template>
 
 <script>
 export default {
   name: 'Home',
   data (){
     return {
       imgs:[{img:'../static/7.jpg'},{img:'../static/7.jpg'},{img:'../static/7.jpg'}]
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .mint-swipe{
   width:100%;
   height:300px;
 }
   .mint-swipe img{
     width:100%;
     height: 100%;
   }
 </style>

安装axios

一个请求类库

安装

C:\Users\Administrator\WebstormProjects\untitled\cms_project_04>npm install axios

npm WARN deprecated fsevents@1.2.12: fsevents 1 will break on node v14+. Upgrade to fsevents 2 with massive improvements.

npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ axios@0.19.2

added 69 packages and updated 1 package in 8.903s

配置axios

// The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 
 Vue.config.productionTip = false
 //引入mint-ui
 import MintUi from 'mint-ui'
 Vue.use(MintUi);
 import 'mint-ui/lib/style.css'
 //引入axios
 import Axios from 'axios';
 Vue.prototype.$axios=Axios;
 Axios.defaults.baseURL='127.0.0.1';
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })

Home-使用axios

Home组件中使用示例如：

export default {
   name: 'Home',
   data (){
     return {
       imgs:[{img:'../static/7.jpg'},{img:'../static/7.jpg'},{img:'../static/7.jpg'}]
     }
   },
   created() {
     this.$axios.get("test").then(res=>{
       console.log("then res",res);
     }).catch(res=>{
       console.log("catch res",res);
     });
   }
 }

home-宫格

这个mint-ui上没有可参考的，靠自己了

在上面轮播之下

<div class="grid">
   <ul>
     <!--显式声明key有益于性能-->
     <li v-for="(module,index) in modules" :key="index">
       <router-link :to="module.route">
         <span :class="module.className"></span>
         <div>{{module.title}}</div>
       </router-link>
     </li>
   </ul>
 </div>

Data中新增属性

modules:[
   {title:'新闻咨询',className:'back-news',route:{name:'home'}},
   {title:'图文分享',className:'back-pic',route:{name:'home'}},
   {title:'商品展示',className:'back-goods',route:{name:'home'}},
   {title:'留言反馈',className:'back-feed',route:{name:'home'}},
   {title:'搜索咨询',className:'back-search',route:{name:'home'}},
   {title:'联系我们',className:'back-callme',route:{name:'home'}},
 ]

样式新增

ul{
   margin:0;
   padding:0;
   overflow: hidden;
 }
 li{
   list-style: none;
   float: left;
   width: 33.333%;
   text-align: center;
 }
   .grid span{
     display: inline-block;
     margin: 10px 0;
     width: 50px;
     height: 50px;
     background-repeat: round;
   }
   .back-img{
     background-image:url(../../static/img/callme.png);
   }
 .back-news{
   background-image:url(../../static/img/news.png);
 }
 .back-pic{
   background-image:url(../../static/img/pic.png);
 }
 .back-goods{
   background-image:url(../../static/img/goods.png);
 }
 .back-feed{
   background-image:url(../../static/img/feed.png);
 }
 .back-search{
   background-image:url(../../static/img/search.png);
 }
 .back-callme{
   background-image:url(../../static/img/callme.png);
 }

定制我们自己的插件

项目目录中新建src/plugins/ installer.js如：

function Installer(){
   //自身初始化行为
 }
 Installer.install=function(Vue){
   Vue.component('test',{
     template:'<h1>哈哈</h1>'
   });
   let log=function(){
     console.log('我们自己插件的log函数');
   }
   Object.defineProperty(Vue.prototype,'$log',{
     //显示声明set后则我们自定义的log函数是无法被外部更改的
     set:function(newV){
       console.log('你做梦');
     },
     get:function(){
       return log;
     }
   })
 }
 
 export default Installer;

上面plugins目录默认是没有的需要自行新建

然后src/main.js中引入我们新建的插件

//引入自己的插件
 import Installer from '@/plugins/installer';
 Vue.use(Installer);

我们自定义的插件的组件名刚才是test

我们在home组件中引入该test组件

<mt-swipe :auto="4000">
   <mt-swipe-item v-for="(item,index) in imgs">
     <img :src="item.img">
   </mt-swipe-item>
 </mt-swipe>
 <test/>

然后在home的created中就可以使用该自定义插件了

created() {
   this.$log='abc';
   this.$log();
   this.$axios.get("test").then(res=>{
     console.log("then res",res);
   }).catch(res=>{
     console.log("catch res",res);
   });
 }

关键字词：mint-ui,饿了么,宫格,自定义插件,axios,自动打开浏览器

上一篇：vue 项目实例-首页 webpack项目搭建

下一篇：Vue项目第二天(moment)

您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

vue实例-项目首页-完成

相关文章

您当前的位置：首页 > 学无止境 > JS经典实例网站首页 JS经典实例