vue学习笔记3——外部引入css和路由的一部分
从外部引入css文件
在.vue文件中
<style scoped>
@import '../../style/basic.css';
@import '../../style/del.css';
@import '../../style/media.css';
</style>
后面加的scoped是H5新特性,可以锁定style的范围,此处这样写就是说引入的css只在当前的vue的主页生效。不加scoped的话,可能会影响其他vue文件中的样式。
此处可以补充学习scss(sass)
移动端应用在最外层index添加:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
在入口文件main.js中import router from ,登录站点的时候,初次路由指向的初始文件夹的位置,会自动寻找里面对应的js文件
注意脚手架的格式要求十分严格
new Vue({
router,
store,
//components: { App } vue1.0的写法
render: h => h(App) vue2.0的写法
}).$mount('#app') // 挂上去(我在此处省略了)
1.首先需要了解这是 es 6 的语法,表示 Vue 实例选项对象的 render 方法作为一个函数,接受传入的参数 h 函数,返回 h(App) 的函数调用结果。
2.其次,Vue 在创建 Vue 实例时,通过调用 render 方法来渲染实例的 DOM 树。
3.最后,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数,然后 createElement 会以 APP 为参数进行调用,关于 createElement 函数的参数说明参见:Element-Arguments。
本人在网上只查了这么多。
我在查看网上的单页应用的demo的时候发现 他们的路由配置有两种:
1.router中,只有一个router.js文件,里面引入一个app后
直接const声明变量,再响应其他文件夹中文件
在部分vue文件中,自己新建路由
2.router中细分若干功能文件件,子页划分,我感觉这样对components的层级
和管理要求较高,对于第一种,比较好理解
vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。