vue进阶 --- 实例演示
阅读原文时间:2022年05月11日阅读:1

  这篇博客将通过一个实例来对vue构建项目的过程有一个了解。

  主要用到的知识点如下所示:

  1. vue-router 2.0路由配置
  2. router-view 和 router-link的使用
  3. transition控制页面的跳转
  4. .vue后缀的单文件组件

调整目录结构

  我们先用vue-cli构建项目,然后将 src 目录下的APP.vue删除,然后添加一个pages文件夹,这个文件夹的目的在于存放页面, 页面也是组件,但是在components下的不是一个完整的页面,而pages下的组件是一个页面组件。这样结构更清晰一些。

.vue后缀的单文件组件

  

  这就是我们最终希望做出来的效果图,其中的组件包括homeHeader和list,他们都是组件,都可以用.vue文件来表示。

  然后我们把HomeHeader.vue和DetailHeader.vue以及List.vue放在components下,因为他们都是一个页面的一部分。 接着把 Home.vue 和 Detail.vue 组件放在pages下,因为这两个是页面。 目录结构如下所示:

  

  OK! 组件的架构大体就是这样的了,接着,我们通过List.vue来看看单页面组件是如何的。

  提示: 写vue文件时,最好先安装vue高亮插件,这样可以提高我们的编码效率。

  • 其中template就是用于存放html的地方,注意: template下只能有一个标签。 和react是类似的。
  • style是来用存放css样式的,也可以使用sass和less,只要安装相应的包来编译即可。 其中的scoped属性可以让css样式只作用在这个组件之中,这样就不会影响到其他的组件了。
  • script中的js用了es6的语法,导出了对象,其中的props用于父组件像子组件传递数据。

使用vue-router2.0

  通过vue的目的是创建单页面应用,所以就没有了页面的跳转,而是组件的跳转,要实现组件的跳转,我们就要用到vue-router了。

  首先,我们可以看到packag.json中是没有vue-router的,所以我们需要自己来安装vue-router,即npm install vue-router --save。

  router-view是用来实现路由内容的地方,在这里,会通过路由不停地切换routr-view中的内容,这也就是vue创建单页面应用的内在。

  (注意:下面这段代码是处在根目录下的index.html中的一部分,也就是说,整个页面就这么一个html文件,所以称为单页面应用)

  router-link相当于a标签,在点击router-link下的元素的时候,我们就可以将to所指向的组件渲染到router-view中。

跳转页面动画

  另外,我们在根目录下的index.html中可以设置跳转动画如下所示:

  /\* 跳转页面动画 \*/  

.slide-enter,
.slide_back-enter {
position: absolute;
width: %;
}
.slide-leave,
.slide_back-leave {
position: absolute;
width: %;
}
.slide-enter-active,
.slide_back-enter-active {
transition: all .3s linear;
}
.slide-leave-active {
position: absolute;
transition: all .3s linear;
transform: translate(-%);
}
.slide-enter{
transform: translateX(%);
}
.slide_back-leave-active {
position: absolute;
transition: all .3s linear;
transform: translate(%);
}
.slide_back-enter {
transform: translateX(-%);
}

最后贴上代码:

1.根目录下的index.html



first-vue

<script type="text/javascript">  
    // 计算html的font-size  
    (function(){  
        function resizeBaseFontSize(){  
            var rootHtml = document.documentElement,  
                deviceWidth = rootHtml.clientWidth;  
            if(deviceWidth > ){  
                deviceWidth = ;  
            }  
            rootHtml.style.fontSize = deviceWidth / 7.5 + "px";  
        }  
        resizeBaseFontSize();  
        window.addEventListener("resize", resizeBaseFontSize, false);  
        window.addEventListener("orientationchange", resizeBaseFontSize, false);  
    })();  
</script>  


  这里的代码很简单,就是设置了transition和移动端字体的设置。其中 transition组件是用来控制页面切换的动画用的,transitionName绑定到的是main.js中的data中的transitionName字段。

2. src目录下的main.js代码如下:

// main.js

// 导入Vue,这个是必需的,在使用Vue之前,必须先导入
import Vue from 'vue'

// 导入 vue-router,并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 导入 pages 下的 Home.vue
import Home from './pages/Home'
import Detail from './pages/Detail'

// 定义路由配置
const routes = [
{
path: '/',
component: Home
},
{
path: '/detail',
component: Detail
}
]

// 创建路由实例
const router = new VueRouter({
routes
})

// 创建 Vue 实例
new Vue({
el: '#app',
data(){
return {
transitionName: 'slide'
}
},
router,
watch: {
// 监视路由,参数为要目标路由和当前页面的路由
'$route' (to, from){
const toDepth = to.path.substring(, to.path.length-).split('/').length
// 官方给出的例子为 const toDepth = to.path.split('/').length 由于现在只有两个路由路径'/'和'/detail'
// 按照官方给的例子,这两个路由路径深度都为 2 ,所以,这里稍作调整,不知道有什么不妥
// 但目前在这个demo中能正常运行,如果知道更好的方法,欢迎留言赐教
const fromDepth = from.path.substring(, from.path.length-).split('/').length
this.transitionName = toDepth < fromDepth ? 'slide_back' : 'slide'
// 根据路由深度,来判断是该从右侧进入还是该从左侧进入
}
}
})

 这里main.js首先引入了vue和vue-router,然后对router进行了设置,将router挂载到实例上,最后的watch路由实际上就是用来正确实现动画的效果的。不用也是可以的。

3.  HomeHeader.vue如下:

4.  List.vue如下:


5. DetailHeader.vue如下:


6. Home.vue如下:


这里值得注意的是: 我们需要使用import导入子组件。

7. Detail.vue如下:


同样,这里作为页面组件,我们也需要导入子组件。

注意:其中的 npm run dev 是在开发环境中使用, npm run build是在生产环境中使用。

参考文章

这里有vue项目和资料的汇总:https://segmentfault.com/q/1010000007073989/a-1020000007074331