android分包_android dex分包方案 - CSDN
精华内容
参与话题
  • vue-cli3 配置 postcss-pxtorem

    千次阅读 2019-03-24 12:04:58
    1.首先安装依赖 (已配置postcss) yarn add 或者 npm installpostcss-pxtorem 2.更改package.json "postcss": { "plugins": { "autoprefixer": {}, "postcss-cssnext": {}, "postcss-pxtorem": { ...

    1.首先安装依赖 (已配置postcss)

    yarn add 或者 npm  install postcss-pxtorem
     

    2.更改package.json

    "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-cssnext": {},
          "postcss-pxtorem": {
            "rootValue": 16,
            "propList": [
              "*"
            ]
          }
        }
      },

    3.新建一个文件 比如  ./src/assets/rem.js

    // 设置 rem 函数
    function setRem () {
      // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
      let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
      htmlDom.style.fontSize= htmlWidth/20 + 'px';
    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setRem()
    }

    4.在main.js引入 import './assets/rem.js'

    5. 直接写px,它会自动帮你转成rem,rem.js是为了让整个页面缩放的时候整体改变

    展开全文
  • // npm installautoprefixer --save-dev 此步不需要了,因为postcss-cssnext自带这个依赖 npm installpostcss-cssnext--save-dev npm install postcss-import--save-dev npm install postcss-loader--save-dev 2...

    1. 

    // npm install autoprefixer --save-dev 此步不需要了,因为postcss-cssnext自带这个依赖

    npm install postcss-cssnext --save-dev

    npm install postcss-import --save-dev

    npm install postcss-loader --save-dev

    2. package.json中如果没有自动生成以下内容,则手动添加以下内容

    {
      ··· 
      "postcss": {
        "plugins": {
          "postcss-cssnext": {}
        }
      },
      ···    
    }

     

      

      

     
     

    转载于:https://www.cnblogs.com/XHappyness/p/7676680.html

    展开全文
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2019-05-22 13:13:49
    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: ...
    好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,
    也是试的玩了一下,大致写写怎么玩的!
    

    1.先全局安装vue-cli3.0
    这里写图片描述

    检测安装:
    vue  -V
    

    这里写图片描述

    2.创建项目(这个就跟react创建脚手架项目比较像了)

    这里写图片描述
    创建项目

    这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是
    让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个
    

    这里写图片描述

    当你选择后会出现上面图上的东西,这里你可以自由选择用哪些配置,按上下键
    选择哪一个,按空格键确定,所有的都选择好后,按enter键进行下一步,这里
    演示,我随便选了几个
    

    这里写图片描述

    下一步之后问询问你安装哪一种 CSS 预处理语言,你随意选择,我是一直用的less
    

    这里写图片描述

    上面这个是问你选择哪个自动化代码格式化检测,配合vscode编辑器的
    Prettier - Code formatter插件,我选的随后一个
    

    这里写图片描述

    这里第一个选项是问你是否保存刚才的配置,选择确定后你下次再创建新项目
    就有你以前选择的配置了,不用重新再配置一遍了
    

    这里写图片描述

    上边这俩意思问你像,babel,postcss,eslint这些配置文件放哪?
    第一个是:放独立文件放置
    第二个是:放package.json里
    这里推荐放单独配置文件,但是你随意啊
    

    这里写图片描述

    上边倒数第二行问你是否将以上这些将此保存为未来项目的预配置吗?
    最后一个是描述项目,你随意选择,点击确定就开始下载模板了
    

    这里写图片描述

    下载好后,项目结构就变成这样了,相比2.0精简了很多,
    然后cd 进项目,启动服务npm run serve,
    这里发现少了vue.config.js文件,那以前的配置怎么搞?
    

    这里写图片描述
    上边是2.0的目录结构
    这里写图片描述
    这个是3.0的目录结构,比2.0少了好多,这些都放在@vue/文件下了,你可以打开看看

    
    下边你要做的就是在根目录下新建一个vue.config.js文件,进行你的配置,具体配置看文档,我在最下边简单罗列了几个
    
    当然如果你不想用3.0的话,还是可以继续使用2.0的,官方文档是这样说的:
    

    这里写图片描述

    这里简单罗列vue,config.js一些配置项
    当然你配置接口地址时还是通过下边这个来获取
    在main.js里或者单独配置接口地址的文件里:
    var env = process.env.NODE_ENV
    console.log(env)
    
    // vue.config.js 配置说明
    // 这里只列一部分,具体配置惨考文档啊
    module.exports = {
        // baseUrl  type:{string} default:'/' 
        // 将部署应用程序的基本URL
        // 将部署应用程序的基本URL。
        // 默认情况下,Vue CLI假设您的应用程序将部署在域的根目录下。
        // https://www.my-app.com/。如果应用程序部署在子路径上,则需要使用此选项指定子路径。例如,如果您的应用程序部署在https://www.foobar.com/my-app/,集baseUrl到'/my-app/'.
    
        baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
    
        // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
    
        // outputDir: 'dist',
    
        // pages:{ type:Object,Default:undfind } 
    /*
      构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
      个对象,其中键是条目的名称,而该值要么是指定其条目、模板和文件名的对象,要么是指定其条目
      的字符串,
      注意:请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
    */
        // pages: {
            // index: {
                // entry for the page
                // entry: 'src/index/main.js',
                // the source template
                // template: 'public/index.html',
                // output as dist/index.html
                // filename: 'index.html'
            // },
            // when using the entry-only string format,
            // template is inferred to be `public/subpage.html`
            // and falls back to `public/index.html` if not found.
            // Output filename is inferred to be `subpage.html`.
            // subpage: 'src/subpage/main.js'
        // },
    
        //   lintOnSave:{ type:Boolean default:true } 问你是否使用eslint
        lintOnSave: true,
        // productionSourceMap:{ type:Bollean,default:true } 生产源映射
        // 如果您不需要生产时的源映射,那么将此设置为false可以加速生产构建
        productionSourceMap: false,
        // devServer:{type:Object} 3个属性host,port,https
        // 它支持webPack-dev-server的所有选项
    
        devServer: {
            port: 8085, // 端口号
            host: 'localhost',
            https: false, // https:{type:Boolean}
            open: true, //配置自动启动浏览器
            // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
            proxy: {
                '/api': {
                    target: '<url>',
                    ws: true,
                    changeOrigin: true
                },
                '/foo': {
                    target: '<other_url>'
                }
            },  // 配置多个代理
        }
    }
    
    展开全文
  • 这里记录一个vue-cli3.0 配置的移动端 以及postcss-pxtorem 的使用yarn add postcss-pxtorem -D复制代码1、首先利用 vue-cli3.0 创建的项目会自带一个postcss.config.jsmodule.exports = { plugins: { autoprefixer:...

    这里记录一个vue-cli3.0 配置的移动端 以及postcss-pxtorem 的使用

    yarn add postcss-pxtorem -D复制代码

    1、首先利用 vue-cli3.0 创建的项目会自带一个 postcss.config.js

    module.exports = {  plugins: {    autoprefixer: { // 添加浏览器前缀      browsers: ["Android >= 4.0", "iOS >= 7"]    },    "postcss-pxtorem": {      rootValue: 75, //结果为:设计稿元素尺寸/75,设计稿宽 750,最终页面会换算成 10rem      // unitPrecision: 5, // 允许REM单位增长的十进制数      propList: ["*"],      // selectorBlackList: [""], //(数组)要忽略的选择器并保留为px。      minPixelValue: 2 // (数字)设置要替换的最小像素值 解决 1px 问题    }  }};复制代码

    2、建立一个 vue.config.js 这也是官方推荐的,可以 修改一些默认配置

    我发现利用vue打包,背景图片不会引用线上cdn 这里可以修改 背景打包也走cdn 

    let externals = {}; // 不打包的一些插件 可以引线上cdnif (process.env.NODE_ENV === "production") {  externals = {    vue: "Vue",    axios: "axios",    "mint-ui": "MINT",    "babel-runtime/core-js/promise": "Promise"  };}module.exports = {  publicPath: process.env.VUE_APP_REALEASE === "production" ? "./" : "./",  productionSourceMap: false,  devServer: {    open: true,    proxy: {      "/api": {        target: "http://118.89.22.28:9502/", // 接口地址代理跨域        changeOrigin: true      }    }  },  configureWebpack: {    externals  },  chainWebpack: config => {    config.plugin("html").tap(args => {      args[0].env = process.env.NODE_ENV;      args[0].template = "public/index.html";      if (process.env.NODE_ENV === "production") {        args[0].minify = {          minifyCSS: true,          minifyJS: true,          removeComments: true,          collapseWhitespace: true        };      }      return args;    });    config.module.rule("images")      .test(/\.(jpg|png|gif)$/)      .use("url-loader")      .loader("url-loader")      .options({        limit: 10,        publicPath:          process.env.VUE_APP_REALEASE === "production"            ? "https://oss.xx.com/img"            : "../image/", // 这里背景图片也使用cdn        outputPath: "image",        name: "[name].[hash].[ext]",      })      .end();  }};复制代码

    3、index.html 页面加入 控制rem转换的前提 要加meta

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    
    <script>      (function (win, doc) {        if (!win.addEventListener) return;        var html = document.documentElement;        function setFont() {            var html = document.documentElement;            html.style.fontSize = html.clientWidth / 10  + "px";        }        setFont();        setTimeout(function () {            setFont();        }, 300);        doc.addEventListener('DOMContentLoaded', setFont, false);        win.addEventListener('resize', setFont, false);        win.addEventListener('load', setFont, false);    })(window, document);    </script>复制代码


    转载于:https://juejin.im/post/5d0b7a76f265da1baf7cf2ea

    展开全文
  • vue-cli3 使用postcss-plugin-px2rem

    千次阅读 2019-12-27 18:16:52
    postcss-plugin-px2rem是可以将px自动转化为rem的postcss插件 安装 npm i postcss-plugin-px2rem --save -dev package.json中添加配置(组件中px转rem才生效)在package.json、package.json、package.json中...
  • vue-cli2中的设置: 在.postcssrc.js文件中设置: module.exports = { "plugins": { "postcss-pxtorem":{ rootValue: 75, unitPrecision: 5, // 最小精度,小数...
  • vue-cli3配置参考

    千次阅读 2019-07-08 18:36:02
    vue.config.js publicPath outputDir assetsDir indexPath filenameHashing pages lineOnSave runtimeCompiler transpileDependencies productionSourceMap crossorigin integrity confi...
  • 提到 vue-cli,官方文档对其的介绍如下: A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目...
  • 2.vue-cli3.x.x 版本安装 npm install -g @vue/cli 注意:3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 3.检测vue版本(注意:-V, “V”大写) vue -V 4.构建项目(注意:“vuepr...
  • 1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 ...
  • vue-cli3配置rem

    2019-11-28 11:59:56
    cnpm i postcss-pxtorem --save 2.项目根目录下新建 postcss.config.js 文件 postcss.config.js 内容: module.exports = { plugins: { autoprefixer: { browsers: ['Android >= 4.0', 'iOS >= 7'], ...
  • vue-cli3搭建项目之webpack配置

    万次阅读 多人点赞 2019-06-03 14:25:30
    vue-cli3搭建完整项目之webpack配置 ​ 前面篇介绍了项目初始化,下面就要开始对项目webpack进行配置,由于vue-cli3将webpack的基础配置全部内嵌了,这就导致我们初始化项目完成之后发现原先的webpack的config配置...
  • 使用vue-cli脚手架新建了一个以webpack模版的项目,想在单组件的项目中使用postcss书写css。 1、安装 npm install postcss-cssnext postcss-import postcss-loader -S 2、如果已经安装postcss(npm install post...
  • 相比vue-cli2版本的'大锅混',三版本的插件系统卓识令人惊艳了一把,因此组内也在第一时间迁移了vue-cli3,本文算是对插件系统的一次探索与学习,也算是一次抛砖引玉,期待后面继续更新推出优秀的插件并...
  • 首先介绍一下本项目的背景,是基于 vue-cli3.1.1 的单页应用,目前测试环境和生产环境都在线上,并且都在同一个域名下,其中生产环境部署在根目录下,测试环境部署在名为 test 的子目录下,根据生产环境和测试环境的...
  • 1、安装 flexible和 postcss-px2rem 按照我说的一步一步去做,保证可以完成哦!有图有代码,简单明了可复制! 如果能帮助到你,还望能给个赞+关注,鼓励一下!谢谢! npm i lib-flexible postcss-px2rem --save ...
  • vue-cli3.x 配置代理,封装axios

    千次阅读 2020-05-09 14:27:31
    vue-cli3.x也发布有一段时间了。 首先是目录的更改。新增vue.config.js。 配置代理 在项目根目录下新建vue.config.js module.exports = { devServer: { open: true, //浏览器自动打开页面 proxy: { '/api': { ...
  • Vue-cli2.x中的用法 1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' ...
  • <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2.修改页面font-size: ...以往都是用js监听页面宽度来动态计算设置根元素font-size ...
1 2 3 4 5 ... 20
收藏数 11,867
精华内容 4,746
关键字:

android分包