vue学习笔记3——外部引入css和路由的一部分

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学习笔记，是根据网上的一些帖子，自己在学习过程中实际情况，总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。