这篇博客将通过一个实例来对vue构建项目的过程有一个了解。
主要用到的知识点如下所示:
我们先用vue-cli构建项目,然后将 src 目录下的APP.vue删除,然后添加一个pages文件夹,这个文件夹的目的在于存放页面, 页面也是组件,但是在components下的不是一个完整的页面,而pages下的组件是一个页面组件。这样结构更清晰一些。
这就是我们最终希望做出来的效果图,其中的组件包括homeHeader和list,他们都是组件,都可以用.vue文件来表示。
然后我们把HomeHeader.vue和DetailHeader.vue以及List.vue放在components下,因为他们都是一个页面的一部分。 接着把 Home.vue 和 Detail.vue 组件放在pages下,因为这两个是页面。 目录结构如下所示:
OK! 组件的架构大体就是这样的了,接着,我们通过List.vue来看看单页面组件是如何的。
提示: 写vue文件时,最好先安装vue高亮插件,这样可以提高我们的编码效率。
{{title}} ¥{{price}}元
通过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
<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如下:
{{ title }} ¥{{ price }}元
5. DetailHeader.vue如下:
6. Home.vue如下:
这里值得注意的是: 我们需要使用import导入子组件。
7. Detail.vue如下:
崇贤馆始置唐代太宗朝。1999年,李克先生及志同道合者复兴其宗旨。以积累、传播中华优秀传统文化,提供全新国学体验馆为宏愿。 其间,在季羡林、冯其庸等国学大师及著名文史学家傅璇琮、毛佩琦先生指导下,耕注先贤原典,以宣纸线装精品形式呈奉世人。作为一家国学传播机构,崇贤馆始终致力于中华传统文化的传承和推广,以古籍线装宣纸书的形式,对浩繁的史海巨著进行经典复刻。不仅如此,崇贤馆还延请了傅璇琮、毛佩奇等诸位在国学界内享有盛誉的专家和学者担纲学术顾问,以精益求精的治学态度面对每一部崇贤馆的作品,使之成为学术史中无尚的精品。
同样,这里作为页面组件,我们也需要导入子组件。
注意:其中的 npm run dev 是在开发环境中使用, npm run build是在生产环境中使用。
这里有vue项目和资料的汇总:https://segmentfault.com/q/1010000007073989/a-1020000007074331
手机扫一扫
移动阅读更方便
你可能感兴趣的文章