Vue打包相关

6 篇文章 0 订阅

目录

         webpack4:

VueCli3项目vue.config.js配置文件

PHP报错:unserialize(): Error at offset 0 of 100 bytes

移动端判断 

Vue实例常用属性

Vue计算属性Computed

Vue的双向数据绑定原理 

Custom elements in iteration require 'v-bind:key' directives

VueCli3运行单个 *.vue 文件


webpack4:

 

webpack.config.js:

// webpack 是node写出来的
let path = require('path');

module.exports = {
    mode:'development’, //模式 默认两种 production(生产)/development(开发)
    entry:'./src/index.js’, //入口
    output:{
        filename:'bundle.js’, //打包后的文件名
        path:path.resolve(__dirname,'dist’), //路径必须是一个绝对路径
    }
}

webpack项目中的Failed to load resource: net::ERR_FILE_NOT_FOUND问题

修改webpack.base.conf.js中:

// publicPath: process.env.NODE_ENV === 'production'
//   ? config.build.assetsPublicPath
//   : config.dev.assetsPublicPath
    
// 改成:

publicPath: process.env.NODE_ENV === 'production'
   ? './' + config.build.assetsPublicPath
   : './' + config.dev.assetsPublicPath

VueCli3项目vue.config.js配置文件

const path = require('path');
const envStr = process.env.env_config
const debugUrl = (envStr === 'prod') ? 
'https://mobile-app.yizuodao.com' : 'https://test-/mobile-app.yizuodao.com'

module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production';
        } else {
            // 为开发环境修改配置...
            config.mode = 'development';
        }
 
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components')
                }
            }
        });
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: { //设置代理
            '/*.json': {
                target: debugUrl
            },
            '/*.do': {
                target: debugUrl
            },
            '/*.m': {
                target: debugUrl
            },
        },
        before: (app) => {
            console.log(app)
        }
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};
module.exports = {
    publicPath: './',
    devServer: {
        host: '0.0.0.0',
        port: 1024, // 端口
        // https: true
    },
    lintOnSave: false, // 取消 eslint 验证
    // chainWebpack: config => {
    //     if (process.env.NODE_ENV === 'production') {
    //         // 清除css,js版本号
    //         config.output.filename('static/js/[name].js').end();
    //         config.output.chunkFilename('static/js/[name].js').end();
    //         // 为生产环境修改配置...
    //         config.plugin('extract-css').tap(args => [{
    //             filename: `static/css/[name].css`,
    //             chunkFilename: `static/css/[name].css`
    //         }])
    //     }
    // },
};

 

PHP报错:

unserialize(): Error at offset 0 of 100 bytes

function mb_unserialize($str) {
    return preg_replace_callback('#s:(\d+):"(.*?)";#s',
    function($match){return 's:'.strlen($match[2]).':"'.$match[2].'";';},$str);

-----------------------------------------------------------------------------

$str = preg_replace_callback('#s:(\d+):"(.*?)";#s',
    function($match){return 's:'.strlen($match[2]).':"'.$match[2].'";';},$str);

移动端判断 

<script>
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    console.log('移动端要执行的代码');
    window.location.href = "http://baidu.com;
}
</script>

Vue实例常用属性

数据

  • data:Vue 实例的数据对象
  • components:Vue实例配置局部注册组件

类方法

  • computed:计算属性
  • watch:侦听属性
  • filters:过滤器
  • methods:Vue实例方法
  • render:渲染函数,创建虚拟DOM

生命周期

  • created:在实例创建完成后被立即调用,完成初始化操作
  • mounted:el挂载到Vue实例上了,开始业务逻辑操作
  • beforeDestroy:实例销毁之前调用

Vue组件

  • props:用于接收来自父组件的数据
  • template:组件模板

 

Vue计算属性Computed

计算属性的应用场景,一般是在有一个变量的值需要其他变量计算得到的时候,会用到。

比如,例如用户在输入框输入一个数 x,则自动返回给用户这个数的平方 x²。你需要对输入框进行数据绑定,然后当数据修改的时候,就马上计算它的平方

<div id="vueInstance">
         输入一个数字: <input type="text" v-model="value">
         <p>计算结果:{{ square }}</p>
</div>

<script>
      var V = new Vue({
            el : '#vueInstance',
            data : {
                  value : 1
            },
            computed : {
                  square : function(){
                       return this.value * this.value;
                  }
            }
      });
</script>

Vue的双向数据绑定原理 

是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

<input type="text" id="inp" />
<div id="box"></div>
<script>
let obj = {};
let oInp = document.getElementById('inp');
let oBox = document.getElementById('box');
Object.defineProperty(obj, 'name', {
    configurable: true,
    enumerable: true,
    get: function() {
        console.log(111)
        return val;
    },
    set: function(newVal) {
        oInp.value = newVal;
        oBox.innerHTML = newVal;
    }
});
oInp.addEventListener('input', function(e) {
    obj.name = e.target.value;
});
obj.name = '内容';
</script>

 

Custom elements in iteration require 'v-bind:key' directives

迭代中的自定义元素需要“v-bind:key”指令

尽管并不影响程序的正常运行但IDE的报错还是看着不爽

//改前:

<todoitm 
      v-for="item of list"
      :com="item">
</todoitm>

//改后:

<todoitm 
      v-for="(item,index) of list"
      :com="item"
      v-bind:key="index">
</todoitm>
<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/info">Info</router-link> -->
      <a @click="goto('/')">Home</a> |
      <a @click="goto('/about')">About</a> |
      <a @click="goto('/info')">Info</a> |
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {
    goto(path){
      this.$router.replace(path);
      // 1.this.$router.push()     <<< 这个好用
      // 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。
      // 2.this.$router.replace()
      // 描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转 
      // 到上上一个页面。上一个记录是不存在的。
      // 3.this.$router.go(n)
      // 相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正            
      // 数返回上一个页面
    }
  },
}
</script>

VueCli3运行单个 *.vue 文件

安装全局拓展

npm install -g @vue/cli-service-global

运行.vue文件 > 先进入*.vue文件目录

vue serve Hello.vue

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值