vue实战笔记一

初始文件

1. 全局安装vue-cli
   npm install vue-cli -g
vue -V
2. 初始化模板文件

vue init template(webpack) projectname(name)

1. 相关指令

npm run dev

npm run build

单页应用 多页应用

单页: 只加载一次 页面切换块

多页： 每次页面跳转都要加载新的页面 页面切换慢

路由 vue-router

根据地址栏哈希的变换 加载相应的组件

html <router-view></router-view>

less 预处理语言

less文档http://lesscss.cn/

在vue中使用less(sass stylus)

• 安装相关less依赖

npm install less less-loader --save

• 修改config文件配置less加载

    {
      test: /\.less$/,
      loader: "style-loader!css-loader!less-loader",
    },

• 引入less 文件

@import './index.less';

• 在使用的时候在style标签里加上lang=”less”(style标签里加上 scoped 为只在此作用域 有效)

    <style lang="less">
        @import './index.less'
        @color:blue;
        #app{
          color:@color;
        }
    </style>

变量 variable

混入 mixin（函数）

嵌套

尺寸适配 px em rem

html{
    font-size:10px;
}
div{
    font-size:14px;
    width:2em;
    height:2rem;
}

移动端适配

html <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

确定设计分辨率   
以设计分辨率/10 作为根元素字体大小
.w(@px){
  width:unit(@px/37.5, 'rem');
}
#test{
  .w(375);
  background: red;
}

添加移动端 reset样式