vue做的适配模板

第一步 下载vue脚手架

下载命令

npm install -g @vue/cli

第二步 下载插件

//路由插件下载
npm i vue-router
//less和less-loader下载
npm i less less-loader
//安装手淘的flexible,插件名称叫amfe-flexible
npm i amfe-flexible --save-dev
npm i postcss-pxtorem

第三步 创建组件

home、inform、cart、demo

第四步 配置路由

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
const routes = [ // 测试
    {
        path: "/",
        redirect: "/home"
    },

    {
        path: "/home",
        name: "home",
        component: () =>
            import ("@/pages/home/index")
    },
    {
        path: "/inform",
        name: "inform",
        component: () =>
            import ("@/pages/inform/index")
    },
    {
        path: "/cart",
        name: "cart",
        component: () =>
            import ("@/pages/cart/index")
    },
    {
        path: "/demo",
        name: "demo",
        component: () =>
            import ("@/pages/demo/demo")
    },

]
export default new Router({
    routes
});

第五步 在main.js中引入路由

import Vue from 'vue'
import App from './App.vue'
//引入公共样式
import './assets/style/regest.less'

//导入适配
import 'amfe-flexible'
import router from './router/router'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    router
}).$mount('#app')

第六步 在app.vue中写路由的出口

<template>
  <div id="app">
 <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app',
  components: {
   
  }
}
</script>

<style>

</style>

第七步 在vue.config.js中配置适配

const autoprefixer = require("autoprefixer");

const pxtorem = require("postcss-pxtorem");
module.exports = {
    // 资源路径 
    publicPath: '/web04/hemugao-fresh/dist/',
    // 打包路径
    // outputDir: 'hemugao',
    // 关闭eslint检查
    lintOnSave: false,

    css: {
        loaderOptions: {
            // 后处理器配置
            postcss: {
                plugins: [
                    // 配置样式前缀
                    autoprefixer(),
                    // 把px转为rem
                    pxtorem({
                        rootValue: 37.5,
                        propList: ["*"]
                    })
                ]
            }
        }
    }
}

项目的地址在conding.net仓库，地址如下：

git@git.coding.net:HMGDCR/vueshipeidemoban.git