移动端项目构建 [笔记]

 

安装vue-cli
    vue init webpack pro-name

———

开启首页骨架屏https://www.jianshu.com/p/0a1b01ad62d6


安装骨架屏
    npm install vue-skeleton-webpack-plugin

webpack.dev.conf.js和webpack.prod.conf.js中引入插件

创建骨架屏组件 src/skeleton.vue

创建骨架屏组件的入口文件src/entry-skeleton.js

注：yarn upgrade webpack@4.6.0

———

一个页面实现多个骨架屏https://blog.csdn.net/ly124100427/article/details/81168908?utm_source=blogxgwz9



———


vue路由按模块拆分配置https://www.jianshu.com/p/2833243987dd

分模块js ：
    export default
    component: (resolve) => import('@/components/Skeleton/SkeletonFinanceSubMenuMore').then(module => resolve(module)),
主router：
    import SkeletonRouter from './Test/index.js'
    routes: [SkeletonRouter],

————


Vue项目分环境打包https://blog.csdn.net/xinzi11243094/article/details/80521878

    01 安装cross-env
    02 修改各环境下的参数
    03 修改项目package.json文件
    04 在webpackage.prod.conf.js中使用构建环境参数
    05 调整build/build.js

******
dev.env.js:

'use strict'

let NPM_ENTER = process.env.npm_lifecycle_event
NPM_ENTER = NPM_ENTER.indexOf(':') > -1 ? NPM_ENTER.split(':')[1] : NPM_ENTER

const DEV_CONFIG = {
  dev: {
    NODE_ENV: '"development"',
    EVN_CONFIG: '"dev"',
    API_ROOT: '"api/apis/v1"'
  },
  prod: {
    NODE_ENV: '"production"',
    EVN_CONFIG: '"prod"',
    API_ROOT: '"/apis/v1"'
  }
}

module.exports = DEV_CONFIG[NPM_ENTER]

******
config/index.js:

// 添加test pre prod 三处环境的配制
DEV_ENV: require('./dev.env'),
index: path.resolve(__dirname, '../dist/index.html'),

******
webpack.prod.conf.js:

const env = config.build.DEV_ENV


————

Vue-cli脚手架中webpack配置基础文件详情https://www.cnblogs.com/zhangruiqi/p/9062005.html


————

px2rem https://www.cnblogs.com/xiaobaibubai/p/8528744.html

    01 下载lib-flexible
    02 引入lib-flexible
    03 设置meta标签
    04 安装px2rem-loader
    05 配置px2rem-loader