vue-(响应式)项目搭建操作

安装

(项目链接：gitee.com/daiminr/pra…)

1. 全局安装 vue-cli --> cnpm install --global vue-cli
2. 创建一个基于webpack模板的新项目--> vue init webpack my-project
3. 安装依赖包 cd my-project --> cnpm install --> npm run dev

基础配置

1. router-App.vue 文件去除logo，重置style样式
2. main.js中引入rem公式 --> import './config/rem'
3. src下建文件config/rem.js
4. index.js引入页面，配置路由

import Home from '@/page/home'
import Detail from '@/page/detail'
routes: [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/detail',
        name: 'Detail',
        component: Detail
    },
]

5. src下建立文件page/home.vue和detail.vue
6. index.html文件head头部配置
7. 安装rem插件 --> cnpm install px2rem-loader
8. 配置 在build-utils.js --> 在 generateLoaders 函数前定义变量

var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 50 // 1rem = 50px
    }
};

--> 再将变量放进[cssLoader, px2remLoader] 9. 注意：配置文字大小的时候，以设计稿的宽度为基准 页面宽度是设计稿宽度时，html fontsize值是多少就设计为多少

10. sketch设计稿 -- > header 公共页面使用多，将其放在components文件夹下header/index.vue 图片存放路径 assets style标签加scoped 表示该样式仅用于当前