Vue详解＜四＞？

最新推荐文章于 2024-04-02 04:22:18 发布

浅浅一笑^*^

最新推荐文章于 2024-04-02 04:22:18 发布

阅读量283

点赞数

分类专栏：打包vue项目组件之间相互调用底部导航条的切换文章标签： vue js less

本文链接：https://blog.csdn.net/weixin_46409887/article/details/109302920

版权

组件之间相互调用同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

打包vue项目

3 篇文章 0 订阅

订阅专栏

底部导航条的切换

2 篇文章 0 订阅

订阅专栏

1.下载vue项目
vue init webpack vue-demo
2.下载完成后切换到当前项目
cd domename
3.敲击指令cnpm install 下载一些依赖
或者cnpm i（cnpm是镜像服务器下载速度快）
4.下载vue依赖样式
npm install css less-loader style-loader
或者cnpm i less less-loader style-loader
5.运行服务器
npm run dev

/---------------------------------------------------------------------------------------/
vue项目示例:

目录:
main.js:入口文件
index.js:配置路由表 （path:'/' ,component:组件名） /是默认显示的路由页面
scoped:代表只能在当前组件内单独使用的样式，去掉scoped就是共享样式了
export default:导出组件，让其他使用
import:导入组件，只有导出expoet default组件，才能导入import
static:静态资源
.gitnore:提交到git仓库 忽略的仓库
component：全局注册时使用：只注册一个
components：局部注册，可注册n+1个
msg：可以在渲染页面使用，小胡子语法可以直接调用{{msg}}
README.md：下载和运行项目
为什么组件会直接显示helloword页面?:
在main.js入口文件中new Vue根实例中有注册路由router，所以可以显示。
当前组件导入某一组件用:import(导入)   Home(组件名)     from（去）'/地址'
在components下创建的组件：是非公共的组件页面
在创建组件时需注意？
: 组件名字最好是大写系统容易区分，
：根实例最好是起个class名字
1.增加msg后效果图如下:
helloword.vue页面

在这里插入图片描述
2.使用其他组件方法:1.先创建组件2.导入组件3.注册组件4.使用组件
helloword.vue页面：

<template>
  <div class="hello">
    {{msg}}
    <!-- 4.使用组件 -->
    <Home></Home>
  </div>
</template>

<script>
   //1.创建组件
  // 2.导入home组件
  import Home from './Home'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components: {
    //3.注册组件
    Home
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- scoped只有在当前组件下可以使用 -->
<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>

2.增加home.vue组件后效果图:
在这里插入图片描述
3.在index.js配置路由表
：里面可以随意更改路由，
：可以引入很多路由
如：
import HelloWorld from ‘@/components/HelloWorld’，
routes：[//路由映射表
{path:’/’,name:‘HelloWorld’,component:‘HelloWorld’}，
…
]

import Vue from 'vue'   //引入vue
import Router from 'vue-router'  //引入路由
import HelloWorld from '@/components/HelloWorld'  //引入组件

Vue.use(Router)  //全局使用插件 ，只要是Vue.use都可以全局使用插件

export default new Router({//导出一个新router
  routes: [//路由映射表
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

vue项目导航条切效果:如下
在这里插入图片描述
代码:
Home.vue

<template>
  <div class="home">
    首页
  </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>

List.vue

<template>
    <div class='list'>
        列表
    </div>
</template>

<script>
export default {
    name: 'List'

}
</script>

<style scoped>
   .list{

   }
</style>

Shop.vue

<template>
    <div class='shop'>
        购物
    </div>
</template>

<script>
export default {
    name: 'Shop'

}
</script>

<style scoped>
    .shop{

    }
</style>

Wo.vue

<template>
    <div class='wo'>
        我的
    </div>
</template>

<script>
export default {
    name: 'Wo'
}
</script>

<style scoped>
    .wo{

    }

</style>

Tab.vue

//公共组件
<template>
    <!-- 公共底部页面 -->
    <div class='menu'>
        <!-- 以下是跳转超链接 -->
        <router-link tag='li' to="/Home" class="menu_div" @clik="clickItem('/Home')" :class="{active:$route.path==='/Home'}">
            <!-- 图标 -->
            <span class="iconfont icon-shouye c"></span>
            <span class="menu_divp"> 首页</span>
        </router-link>
        <router-link tag='li' to="/List" class="menu_div" @clik="clickItem('/List')" :class="{active:$route.path==='/List'}">
            <span class="iconfont icon-liebiao c"></span>
            <span class="menu_divp">列表</span> 
        </router-link>
        <router-link tag='li' to="/Shop" class="menu_div" @clik="clickItem('/Shop')" :class="{active:$route.path==='/Shop'}">
            <span class="iconfont icon-qicheqianlian-  c"></span>
            <span class="menu_divp">购物</span>
        </router-link>
        <!-- tag=改变标签名 -->
        <router-link tag='li' to="/Wo" class="menu_div" @clik="clickItem('/Wo')" :class="{active:$route.path==='/Wo'}">
            <span class="iconfont icon-wode c"></span>
            <span class="menu_divp">我的</span>
            
        </router-link>

    </div>
</template>

<script>
export default {
    name: 'Tab',
    // mounted(){
    //     let now=this.$route.path;//获取路径
    //     console.log(now);
    //     var nowArr=['/','/Home','/List','/Shop','/Wo'];
    //     nowArr.forEach(function(item,index){
    //      console.log(item,index);
    //      if(now == item){
    //         $(".menu span").eq(index).addClass('red')
    //      }

    //     })

    // }
    methods:{
     clickltem:function(path){
         this.$router.push(path);
     }

    }

}
</script>

<style scoped>
  .menu{
    /* width:100%; */
    width: 100%;
    display: flex;
    display: -webkit-flex;
    left: 0;
    position: fixed;
    bottom: 0;
  }
   .menu>li>.c{
      font-size: 14px;
    };
    .menu>.menu_div{
        /* width: 25%;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center; */
    }
    .menu>li>span{
       display: block;
       font-size: 12px;
    }
    .active{
    color:#108b70;
  }


</style>

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Tab></Tab>
    <router-view></router-view>
  </div>
</template>

<script>
  import Tab from '@/base/Tab'
export default {
  name: 'App',
  components:{
    Tab
  }
}
</script>

<style>
  *{
    margin:0;
    padding:0;
  }
  ul,li{
    list-style: none;
  }
  li{
    width: 25%;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
  }
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home';
import List from '@/components/List';
import Shop from '@/components/Shop';
import Wo from '@/components/Wo';
import Tab from '@/base/Tab';

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', component: Home },
    {path:'/Home',component:Home},
    {path:'/List',component:List},
    {path:'/Shop',component:Shop},
    {path:'/Wo',component:Wo},
    {path:'/Tab',component:Tab}
  ]
})

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-name</title>
    <!-- 引入图标链接 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2159869_f0q7rnlo31s.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

安装vue三种样式后:(css、less-loader、style-loader)
要更改bulid->webbase.config.js里面加入三种样式:

module:{
rules: [
         ...
        // 在最后{}一个对象加入下面样式
      // 更改样式默认运行的vue样式，css less style 三种样式 如下：
      {
        test: /\.less$/,
        loader: ['less-loader','css-loade','style-loade'],
      }
]
}

总结下经验：运行npm下载依赖包时，如果是一个空的文件夹webpack打包后，在下载依赖包，如果是git下载（必须用git init->touch .gitignore->git add .）,之后npm就可以下载依赖包。

这边运行三种样式还有bug：暂时可以先不<style lang='less' scoped>加入样式

三种样式的好处:预加载、减少代码的使用量、
例如:

@w:100%;
.box{
@w;
.child{
@w;
...代码
}
}

后续会找到运行样式方法在分享大家共同探讨.

浅浅一笑^*^

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue详解＜四＞？

1.下载vue项目vue init webpack vue-demo2.下载完成后切换到当前项目cd domename3.敲击指令cnpm install 下载一些依赖或者cnpm i（cnpm是镜像服务器下载速度快）4.下载vue依赖样式npm install css less-loader style-loader或者cnpm i less less-loader style-loader5.运行服务器npm run dev/--------------------------
复制链接

扫一扫