精华内容
下载资源
问答
  • 动态导入文件报错,按照错误提示安装了插件,但未果,最后查到一个可行方案,记录如下: 报错 ERROR in ./src/router.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: D:\...

    动态导入文件报错,按照错误提示安装了插件,但未果,最后查到一个可行方案,记录如下:

    报错

    ERROR in ./src/router.js
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: D:\practice\vue-pro\webpack-vue-create\src\router.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (19:13):
    

    解决方案
    一:安装插件babel-plugin-dynamic-import-webpack
    npm install babel-plugin-dynamic-import-webpack --save-dev
    二:在vue工程的配置文件package.json下进行插件的配置,如下

    "babel": {
        "plugins": ["@babel/plugin-syntax-dynamic-import"]    
      }
    
    展开全文
  • 创建项目 vue create super-vue ...import HelloWorld from "@/components/HelloWorld.vue"; 这样导入 如果组件多了,就会每次都这样傻瓜般导入 优化 global.js import Vue from 'vue' function changeStr(str){ ...

    创建项目

    vue create super-vue
    

    组件导入

    在这里插入图片描述
    公用组件一般都会写在components中

    import HelloWorld from "@/components/HelloWorld.vue";
    

    这样导入

    如果组件多了,就会每次都这样傻瓜般导入

    优化

    global.js

    import Vue from 'vue'
    
    function changeStr(str){
        return str.charAt(0).toUpperCase()+str.slice(1);   //首字节大写
    }
    
    const requireComponent = require.context('.',false,/\.vue$/); // 参数说明  文件目录 是否展开子目录 匹配文件规则
    // console.log(requireComponent.keys())  // ["./HelloWorld.vue", "./child.vue"]
    requireComponent.keys().forEach(fileName=>{
        const config = requireComponent(fileName);
       // console.log(config,'config')
       const componentName = changeStr(
           fileName.replace(/^\.\//,'').replace(/\.\w+$/,'')
       )
       // console.log(componentName)
       Vue.component(componentName, config.default || config);
    })
    

    在这里插入图片描述

    之后在main.js导入

    import global from "./components/global"
    

    以后项目可以按照这样,修改匹配规则,公共组件一键导入,之后就不要在每个项目文件中单独导入了。

    组件动态导入

    import Index from "./views/index.vue";
    
        {
          path: "/index",
          name: "index",
          component: Index
        },
    
    优化

    如果模块化
    在这里插入图片描述
    导入 模块话虽然可以方便让我们导入的文件少写,但模块多了,还是会烦

    router.js

    import Vue from "vue";
    import Router from "vue-router";
    import Home from "./views/Home.vue";
    // import Index from "./views/index.vue";
    // import Login from './router/login.router.js'
    
    Vue.use(Router);
    
    const routerList = [];
    
    function importAll(r){
      r.keys().forEach(
        (key)=>{ 
          console.log(r(key))
          routerList.push(r(key).default)
        }
      )
    }
    console.log(routerList)
    importAll(require.context('./router',true,/\.router\.js/))
    export default new Router({
      mode: "history",
      base: process.env.BASE_URL,
      routes: [
        ...routerList,
        {
          path: "/",
          name: "home",
          component: Home
        },
        // {
        //   path: "/index",
        //   name: "index",
        //   component: Index
        // },
        {
          path: "/about",
          name: "about",
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () =>
            import(/* webpackChunkName: "about" */ "./views/About.vue")
        }
      ]
    });
    
    

    Render

    • template里一值多判
    • 代码冗余,杂乱
    <!-- button -->
    <script>
    export default {
        props: {
            type:{
                type:String,
                default:'normal'
            },
            text: {
                type: String,
                default:'normal'
            }
        },
        render(h){
            return h('button',{
                // v-bind
                class:{
                     btn:true,
                    'btn-success':this.type === 'success',
                    'btn-danger':this.type === 'dangerous',
                    'btn-warning':this.type === 'warning',
                    'normal':this.type==='normal',
                },
                // dom 属性
                domProps: {
                    innerHTML: this.text || '默认'
                },
                // 事件
                on: {
                    click: this.handleClick
                }
            })
        },
        methods: {
            handleClick() {
                this.$emit('myClick','参数')
            }
        }
    }
    </script>
    <style scope>
        .btn{
            width: 200px;
            height: 40px;
            line-height:40px;
            text-align: center;
           
        }
        .normal{
             color: white;
        }
        .btn-success{
            color: green
        }
        .btn-danger{
            color: red
        }
        .btn-warning{
            color: orange
        }
    </style>
    
    
    <Button :type="type" :text="text" @myClick ="parDome"></Button>
    
    import Button from './button'
    
      methods: {
        parDome(a){
            console.log(a,111)
        }
      }
    

    权限设置

    array.js

    export function checkArray(key){
        let arr= ['1','2','3','4']
    
        let index = arr.indexOf(key);
    
        if(index>-1){
            return true
        }else {
            return false
        }
    }
    

    main.js

    import {
      checkArray
    } from './common/array'
    
    Vue.directive('display-key', {
        inserted(el, binding) {
          let displayKey = binding.value;
    
          if (displayKey) {
            let hasPermission = checkArray(displayKey)
            // 如果没有权限 删除dom节点
            if (!hasPermission) {
              el.parentNode && el.parentNode.removeChild(el)
            }
          } else {
            throw new Error('需要key值')
          }
        }
      }
    )
    
    
        <!-- 注意单引号 -->
        <div v-display-key="'2'">
          <button>我是权限一</button>
        </div>
        <div v-display-key="'12'">
          <button>我是权限二</button>
        </div>
        <div v-display-key="'3'">
          <button>我是权限三</button>
        </div>
    

    github:项目地址

    展开全文
  • 在您的代码中导入或要求VueVue材料: import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.min.css' Vue . use ( VueMaterial ) 或使用单个组件: import ...
  • pinch-zoom-jsvue 的安装、 使用

    千次阅读 2019-12-03 16:27:20
    npm i pinch-zoom-js --save ...import 导入 import PinchZoom from 'pinch-zoom-js' 动态设置高度 <div id="father" :style="{ height: height }"> <div id="vhtml" v-html="content" /> </div...
    npm i pinch-zoom-js --save
    

    import 导入

    import PinchZoom from 'pinch-zoom-js'
    

    动态设置高度

        <div id="father" :style="{ height: height }">
          <div id="vhtml" v-html="content" />
        </div>
    

    js方法

      data() {
        return {
          height: '500px'
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.reSetSize()
          setTimeout(() => {
            const el = document.getElementById('vhtml')
            new PinchZoom(el, {})
          }, 1000)
        })
      },
      methods: {
        // 获取宽高
        reSetSize() {
          this.$nextTick(() => {
            const height = window.innerHeight || document.documentElement.clientHeight
            this.height = height - 46 + 'px'
            console.log(this.height)
          })
        }
      }
    

    标记文本
    遇到的坑:
    1、导入
    2、获取元素
    3、动态设置高度的问题

    展开全文
  • 2、引入echarts组件,可以在main.js中引入 //报表 import echarts from 'echarts' //Vue.use(echarts) Vue.prototype.$echarts = echarts 3、单独把echarts的图表提取出来 4、写echarts组件 //柱状分析

    效果如下:

    在这里插入图片描述

    在这里插入图片描述

    1、导入echarts组件,建议使用4.9.0版本,5.0.1可能会报错

    npm uninstall echarts //卸载
    
    npm install echarts@4.9.0//引入特定组件
    

    2、引入echarts组件,可以在main.js中引入

    //报表
    import echarts from 'echarts'
    //Vue.use(echarts)
    Vue.prototype.$echarts = echarts
    

    3、单独把echarts的图表写出来

    在这里插入图片描述

    4、写echarts组件

    柱状分析图

    <template>
      <div ref="chart" class="container"></div>
    </template>
    
    <script>
      export default {
        data: function() {
          return {};
        },
        methods: {
          initChart() {
            let myChart = this.$echarts.init(this.$refs.chart);
            myChart.setOption({
              title: {
                text: '柱状分析图'
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: this.keyData,
              },
              yAxis: {
                type: 'value',
              },
              series: [{
                data: this.valueData,
                type: 'bar'
              }]
    
            })
          }
    
        },
        computed: {
          keyData: function() {
    
            return this.$store.getters.getKeyData;
    
          },
          valueData: function() {
            return this.$store.getters.getValueData;
          }
    
        },
    
    
        mounted() {
          this.initChart();
        },
    
      }
    </script>
    
    
    <style>
      .container {
        width: 500px;
        height: 300px;
      }
    </style>
    
    

    饼状图

    <template>
      <div ref="chart" class="container"></div>
    </template>
    
    <script>
      export default {
        data: function() {
          return {};
        },
        methods: {
          initChart() {
            let myChart = this.$echarts.init(this.$refs.chart);
            myChart.setOption({
              title: {
                text: '圆形分析图',
                subtext: '',
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                left: 'left',
              },
              series: [{
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: this.pieData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }]
            })
          }
    
        },
        computed:{
          pieData:function(){
            return this.$store.getters.getPieData;
          }
        },
        mounted() {
          this.initChart();
        }
      }
    </script>
    
    <style>
      .container {
        width: 500px;
        height: 300px;
      }
    </style>
    
    

    5、在需要的地方引入图表组件

    <template>
      <!--客户流失-->
      <div>
        <!--面包屑-->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/hello' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>销售统计</el-breadcrumb-item>
        </el-breadcrumb>
    
        <!--按钮-->
        <div align="center" class="div-button">
          <el-button-group>
            <el-button type="primary" icon="el-icon-s-data" @click="cutColumnar">柱形分析图</el-button>
            <el-button type="success" @click="cutRound">圆形分析图 <i class="el-icon-pie-chart"></i></el-button>
          </el-button-group>
        </div>
    
        <!--分析图-->
        <div align="center" class="div-analysis">
          <Histogram v-show="columnar" v-if="isRouterAlive"></Histogram>
          <PieChart v-show="round" v-if="isRouterAlive"></PieChart>
          <div v-if="!isRouterAlive">
            <br>
            <br>
            <br>
            <h1>暂无数据</h1>
            <br>
            <br>
            <br>
          </div>
        </div>
        <!--表单按钮组-->
        <div align="center" class="div-button">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="日期:">
              <el-date-picker v-model="formInline.ataDate" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
    
            <el-form-item>
              <el-button type="primary" @click="onSubmit(1)">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--表格-->
        <div align="center">
          <template>
            <el-table :data="tableData" height="250" border style="width: 96%">
              <el-table-column type="index" label="编号" width="250" :index="indexMethod">
              </el-table-column>
              </el-table-column>
              <el-table-column prop="tName" label="商品类型">
              </el-table-column>
              <el-table-column prop="sumPrice" label="销售额">
              </el-table-column>
            </el-table>
          </template>
          <!--分页组件-->
          <div class="div-pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
              :page-sizes="[5, 10]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
    
        </div>
        <router-view>
        </router-view>
      </div>
    </template>
    
    <script>
      import Histogram from '@/views/statistic/graph/Histogram.vue'
      import PieChart from '@/views/statistic/graph/PieChart.vue'
    
      export default {
        data: function() {
          return {
            //控住图表组件切换
            columnar: true,
            round: false,
            //
            formInline: {
              ataDate: '',
            },
            //表格
            tableData: null,
            //控制表格显示,用于刷新组件
            isRouterAlive: true,
    
            //分页
            page: 1,
            rows: 5,
            total: 0,
          }
    
        },
        components: {
          Histogram,
          PieChart
        },
        methods: {
          //表格的编号(这个编号不是在数据库查到的,而是在前端自己定义的,这样更灵活)
          indexMethod: function(index) {
            return (this.page - 1) * this.rows + (index + 1);
          },
          //切换组件
          cutColumnar: function() {
            this.columnar = true;
            this.round = false;
          },
          cutRound: function() {
            this.round = true;
            this.columnar = false;
          },
          //分页
          handleSizeChange: function(rows) {
            this.page = 1;
            this.rows = rows;
            this.query();
          },
          handleCurrentChange: function(page) {
            this.page = page;
            this.query();
          },
          //表单提交
          onSubmit: function(page) {
            //页码跳转第一页
            this.page = page;
            //查询
            this.query();
          },
          //查询
          query: function() {
            //跳转路径
            let url = this.axios.urls.STATISTIC_QUERYSALES;
            //参数
            if(this.formInline.ataDate==null){
              //日期组件如果不加判断,在清空再查的时候会报错
              this.formInline.ataDate="";
            }
    
            let primarys = {
              startTime: this.formInline.ataDate[0],
              endTime: this.formInline.ataDate[1],
              page: this.page,
              rows: this.rows,
            }
    
            this.axios.post(url, primarys).then(resp => {
              //ajax返回的数据
              let json = resp.data;
              //判断是否请求成功 这个基于后台的响应封装类
              if (json.status == 200) {
                //后台返回的表格数据
                let arr = json.data;
                //把数据绑定在数据表格上
                this.tableData = arr;
                /*
                            柱状图需要的数据格式是这样的:
                            option = {
                              xAxis: {
                                type: 'category',
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                              },
                              yAxis: {
                                type: 'value'
                              },
                              series: [{
                                data: [120, 200, 150, 80, 70, 110, 130],
                                type: 'bar'
                              }]
                            };
    
                            饼状图是这样的: {
                              value: 535,
                              name: '荆州'
                            }, {
                              value: 510,
                              name: '兖州'
                            }, {
                              value: 634,
                              name: '益州'
                            }, {
                              value: 735,
                              name: '西凉'
                            }
    
                            */
                //我们需要把数据格式转换成想要的效果(当然也可以查出来就是符合的格式)
    
                //柱状图需要的数据格式
                let keyData = [];
                let valueData = [];
                //饼图需要的数据格式
                let pieData = [];
    
                //数据转换
                for (let i = 0; i < arr.length; i++) {
                  keyData.push(arr[i].tName);
                  valueData.push(arr[i].sumPrice);
    
                  pieData.push({
                    value: arr[i].sumPrice,
                    name: arr[i].tName
                  });
                }
    
                //放入vuex中
    
                //柱状图所需要的数据
                this.$store.commit('setKeyData', {
                  keyData: keyData,
                });
                this.$store.commit('setValueData', {
                  valueData: valueData,
                });
                //饼状图所需要的数据
                this.$store.commit('setPieData', {
                  pieData: pieData,
                });
    
              } else {
                this.tableData = null;
              }
    
            })
    
          }
        },
        watch: {
          //监听表格,当表格数据发生变化就要引起统计图的值改变
          tableData(searchWord, retWord) {
            //当表格没有值的时候显示"暂无数据"
            if (searchWord == null) {
              this.isRouterAlive = false
            } else {
              //当表格刷新且有值就刷新这图表
              this.isRouterAlive = false
              // //this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
              this.$nextTick(() => (this.isRouterAlive = true))
            }
    
    
          }
    
        },
        created: function() {
          this.query();
        }
    
      }
    </script>
    
    

    以上给大家一个动态实现统计报表的思路,这样做的好处是一个图表可以用在多个页面中,只需要做参数上的处理就可以,其他的图表可以依照这个思路参考

    展开全文
  • vue界面的title动态改变

    千次阅读 2018-05-06 12:53:35
    vue项目的各个界面有不同的title名称,如何能做到动态改变呢 这里需要用到vue的内置插件...2.然后在全部导入,在main.js中进行初始化 import VueWechatTitle from 'vue-wechat-title'; Vue.use(VueWechatTitl...
  • 想在页面中加入微信扫描二维码进行分享的功能,网上有demo:https://github.com/sinchang/vue-social-share ...main.js中import:import QRCode from 'qrcode' 并在需要的组件中导入:import QRCode...
  • 在日常开发,如果我们想使用一个基础组件我们得在js文件通过import手动导入一个组件,而今天所说的vue组件动态全局注册则不需要,它能让我们在html直接书写相关组件,而不用显示引入相关组件。 2、组件动态...
  • vue+BaiduMap

    2020-06-09 10:07:07
    vue实现路径导航vue+BaiduMap在Vue中安装BaiduMap申请百度ak秘钥在main.js导入vue+BaidMap官方文档Template根据起点和终点动态选择路线话不多说上效果 vue+BaiduMap 在Vue中安装BaiduMap npm i vue-baidu-map --save...
  • 1.在main.js中导入vue-router和组件 import VueRouter from 'vue-router'; // 导入vue-router并将它命名为VueRouter import goods from './components/goods/goods'; // 引入组件 import seller from './components...
  • vue项目优化

    2020-03-01 08:50:52
    说明:比如在component文件下有很多的组件,在其他的组件引入,势必会有很多的import的引入,麻烦,所以动态引入在main.js,之后在其他的vue文件直接使用,无需导入 //cptsRegister.js文件 import Vue from 'vue'...
  • 在mian.js导入test2组件,变为全局组件: import test2 from './test2' Vue.component('item',test2); 2.test1.vue的内容: &lt;template&gt; &lt;ul id="demo"&gt; &lt;...
  • 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、axios 和 element-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。 相关文档 老板让我十分钟上手nx-admin Vue2.0...
  • 我们想要监听组件A里面data里的某个值,然后传给组件B使用,还要达到动态改变组件B里面data里的某个值 ...在组件A:save.vue中导入pubilc.js <template> <div> <i class="iconf...
  • vue路由懒加载

    2020-04-04 19:45:10
    1.安装babel-plugin-syntax-dynamic-import(用以解析识别import()动态导入语法—并非转换,而是解析识别) npm install babel-plugin-syntax-dynamic-import 2.在babel.config.js中配置文件声明该插件 { ...
  • vue 下载文件

    2019-09-29 10:16:18
    项目动态生成 a 标签, 再添加download 属性 需求是点击下载按钮, 向后台发送请求, 后台返回一个url 之后调用这个返回的url地址, 进行数据下载 // 导入 axios 和 公用url地址 import axios from "axios"; ...
  • VUE常用方法整理.pdf

    2020-03-28 22:56:18
    2、 vue中的this是vue封装好给我们使用的,跟平常方法里面的this是不同的 9 第六节 数据监听watch(深度监听)计算属性computed 9 watch监听单个,computed监听多个 9 总结: 10 第二章 组件化开发知识介绍 11 第一节 ...
  • 在需要的页面或组件里面使用import导入方式使用 在mounted钩子函数调用,将密钥传给js文件加载 new一个BMap,使用其方法 过程 1.新建loadBMap的js文件, export default function loadBMap(ak) { return new ...
  • 即便你在代码中导入Vue。如果这个库会通过一个打包器使用,它将尝试通过打包器以依赖的方式加载 Vue;否则就会回退到一个全局的 Vue 变量。 <p>2.在编译主项目的时候,通过 InsertScriptPlugin...
  • 3.在需要的页面或组件里面使用import导入方式使用 4.在mounted钩子函数调用,将密钥传给js文件加载 5.new一个BMap,使用其方法 新建loadBMap的js文件 export default function loadBMap(ak) { return new Promise...
  • 前端动态生成二维码与条形码

    千次阅读 2018-08-23 16:50:30
    vue项目:在main.js中引入导入的qrcode.js文件 import '../static/js/qrcode.js' 在需要显示二维码的页面 &lt;div&gt;  &lt;div id="qrcode"&gt;&lt;/div&gt; &lt;/div...
  • 项目需求:中英切换 1.安装vue-i18n ...3.在main.js中导入 import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale:'zh', //默认语言 messages: { zh: require
  • 数据库脚本使用 Flyway 管理,不需要手动导入数据库脚本,只需要提前在本地 MySQL 创建一个空的数据库 vhr,并修改项目关于数据的配置(resources 目录下的 application.properties 文件)即可 提前准备好 ...
  • 最近做了项目,把vuex...此时index.js里的内容如下,将各个模块导入即可,但要注意此时modules.js是用来引入modules文件夹下的各个模块的 import Vue from 'vue' import Vuex from 'vuex' import state from './sta
  • 在SFC中导入js / ts文件 CSS范围 异步导入 无法运作 HMR在第一个文件更改时,仅在大于1个保存时起作用 目前暂无build支持 没有router 没有源地图 CSS模块 进行SSR时CSS范围似乎无法正常工作 不支持JSX / TSX 自定义...
  • vue.config.js 主应用可以不配置 vue.config.js 或者为了方便找到主应用运行端口可以只设置一个 port module.exports = { devServer: { port: 3333, }, }; 更多的设置: const port = 7770; // dev port ...
  • 主应用项目主要在5个文件:utils文件夹,app.vue,appRegister.js,main.js,render.js 前提条件 cnpm i qiankun -S 在主应用下载qiankun,注意使用2.0以上版本 改造主应用app.vue <template> <div ...
  • 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、axios 和 element-ui,所有的请求数据都使用Mock.js模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。 相关文档 老板让我十分钟上手nx-admin Vue2.0...
  • </li><li>在JS中倒序循环会略微提升性能</li><li>减少迭代的次数</li><li>基于循环的迭代比基于函数的迭代快8倍</li><li>用Map表代替大量的<code>if-else和<code>switch会提升性能</li></ul> <h2>3. 静态资源优化 ...
  • 全新3.0版本:一、前端半vuejs化,更多动态加载项。二、支持更多生成设置,优化生成场景。三、js导入支持本地/CDN模式,支持断网环境轻松使用。 2020.10.22 1.tinyint多加一个Short类型转换(感谢@wttHero的建议...

空空如也

空空如也

1 2
收藏数 32
精华内容 12
关键字:

vue中import动态导入js

vue 订阅