vue-cli4脚手架搭建二

 vue-cli4脚手架搭建一

 

vue create vue3

cd vue3

yarn serve

http://localhost:8080/#/

 

main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

 

render: h => h(App) 这一行是ES6箭头函数的写法，等价于下面的写法
render:function(h){
    return h(App);
}

将App作为参数传入h函数


App.vue是组件的入口 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<router-view/>是组件内容显示的区域，一个组件只能有一个<router-view/>标签

router-link 是组件路由，按路径的不同，显示不同的组件
路由切换：上个组件销毁和新组件加载
由main.js文件中 import router from './router' 引入路由
main.js是项目的入口，也在main.js中完成Vue的初始化

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

运行项目看到的区域是App.vue的<router-view/>标签，App.vue是组件的入口，也可以说是视图的入口；点击不同的路径，会更换<router-view/>标签的内容

 

router/index.js

vue的中视图就是组件，路由由三部分组成：

url

名称：可以有，也可以没有

组件

这里的Home，是引入的Home.vue组件  import Home from '../views/Home.vue'

/about的组件是懒加载

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

先看About.vue组件，这是一个非常简单的组件

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

几个html dom元素，然后最外层是template标签；一个template标签内放一个div标签，就可形成一个组件。也是常见的html模板语法。

复杂一些的组件，会有更多的dom元素，为了更好地渲染这些dom元素，还会加入css样式/JS脚本,比如Home.vue组件

 

将一个组件命名并供外部使用

<template> <div> ... </div> </template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

 

在另外一个组件中使用时，需要import

<scripts>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
</scripts>

 

 CSS样式全局导入

<template>
  <div id="app">

<!--    路由展示-->
    <div></div>打

<!--    底部导行-->
    <div></div>
  </div>
</template>

<style>
  /*全局导入CSS样式*/
  @import "./assets/css/index.css";

</style>

 

CSS样式私有导入，仅当前组件生效

<style scoped>
  @import "./assets/css/index.css";

</style>

 

 路由样式

router/index.js

const router = new VueRouter({
    linkActiveClass:'active',
  routes
})

然后定义一个全局的样式

<style>
  .active {
    color:rebeccapurple;
  }
</style>

 

 动态样式

 

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div class="index-category">
<!--key指定唯一键，实时渲染-->
      <div class="category" v-for="(list,i) in lists":key="i">
        <i class="iconfont"  :style="{background:list.color}"></i>
        <label>{{list.title}}</label>
      </div>

    </div>
  </div>
</template>

<script>


export default {
  name: 'Home',
  data(){
    return {
      lists:[
        {title:'标题1',color:'#ffbb78'},
        {title:'标题2',color:'#b5cf6b'},
        {title:'标题3',color:'#4169e1'}
      ]
    }
  }
}
</script>

 

vue中的花括号

<label>{{list.title}}</label>  标签中写上双花括号，里面是js表达式

v-for="(list,i) in lists":key="i"  对于 vue指令，不需要写花括号，直接就可以写js表达式

:style="{background:list.color}"  这里写上一个花括号，是因为里面是一个键值对 对象，js中定义键值的对的方式，比如 let data = {name:"zhangsan"}，js对象本身带一个花括号

图片轮播

 

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <div class="index-category">

    <div class="banner">
        <img alt="gu zi" v-for="(v,i) in imgArr":key="i" :src="v" v-show="imageShowSeq==i">
        <div class="banner-circle">
            <ul>
                <li v-for="(v,i) in imgArr":key="i" :class="imageShowSeq==i?'selected':''" ></li>
            </ul>
        </div>
    </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'LunBo',
  data(){
    return {
        imageShowSeq:1,
        imageTimer:null,
      imgArr:[
         require('../assets/img/gu.png') ,
         require('../assets/img/jian.png') ,
         require('../assets/img/monitor.png')
      ]
    }
  },
  methods:{
      play(){
          this.imageTimer = setInterval(this.autoPlay,2000);
      },
      autoPlay(){
          this.imageShowSeq++
          if (this.imageShowSeq == this.imgArr.length){
              this.imageShowSeq = 0;
          }
      }
  },
    mounted:function () {  //页面加载后，自动执行函数
        this.play();
    },
    destroyed:function () {
        clearInterval(this.imageTimer);
    }
}
</script>