精华内容
下载资源
问答
  • 动态导入文件报错,按照错误提示安装了插件,但未果,最后查到一个可行方案,记录如下: 报错 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中安装echarts cnpm install echarts --save 按需导入 这里我新建了一个新的文件,将按需导入的代码全放里面 // 按需导入echarts图表 import echarts from 'echarts/lib/echarts'; // 再引入你需要使用的图表...

    安装

    1. 在vue中安装echarts
      cnpm install echarts --save
    2. 按需导入
      这里我新建了一个新的文件,将按需导入的代码全放里面
    // 按需导入echarts图表
    import echarts from 'echarts/lib/echarts';
    // 再引入你需要使用的图表类型,标题,提示信息等
    import 'echarts/lib/chart/bar';   // 导入柱状图
    import 'echarts/lib/chart/line';  // 导入折线图
    import 'echarts/lib/chart/pie';  // 导入饼状图
    
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend'; // 导入
    import 'echarts/lib/component/tooltip'; //导入提示
    import 'echarts/lib/component/toolbox';
    import 'echarts/lib/component/legendScroll';// 图例翻译滚动
    
    export default echarts;
    

    然后哪个文件用到echarts就引入这个文件,用法如图
    在这里插入图片描述

    import echarts from './echart';
    

    现在已经安装注册引入完毕,只管使用就好啦~
    使用

    1. 首先需要准备一个具备宽高的DOM容器,一般使用div,放echarts用。
    <div class="echart-container" ref="container"></div>
    
    <style lang='scss' scoped>
    .echart-container {
        width: 250px;
        height: 250px;
    }
    </style>
    

    JS部分

    <script>
    import echarts from './echart'; //按需引入echarts
    
    export default {
        mounted() {
            this.initEcharts(); // mounted里面调用初始化echarts的函数,一般mounted里面初始化图表相关东西,created里面初始化页面的整体数据
        },
        methods: {
        	// 三个参数的使用,使得echarts能够动态获取数据,调用此组件只要传此三个参数过来就能动态调用了
            initEcharts(legendName, name, pieData) {
            	// 初始化echarts图表
                const chart = echarts.init(this.$refs.container);
                // 图表的配置项
                const option = {
                	// 提示框信息
                    tooltip: {
                        show: false, //控制显隐
                        trigger: 'item', 
                        formatter: '{a} <br/>{b} : {c} ({d}%)', // 提示框显示所占百分比
                    },
                    // 图例,标题下面一点点
                    legend: {
                        bottom: 4,
                        left: 'center',
                        textStyle: {  // 颜色
                            color: 'white',
                        },
                        data: legendName, //展示的内容
                    },
                    // 无块饼状图每部分的颜色
                    color: ['#9196f6', '#f1817f', '#00a3df', '#11dfb7', '#9c1db7'],
                    series: [
                        {
                            name,
                            type: 'pie', //类型:饼状图
                            radius: ['45%', '57%'], // 控制饼状图的大小,两个radius使他变成环形图,
                            center: ['50%', '36%'], // 图距离左右,上下距离的百分比
                            avoidLabelOverlap: false,
                            hoverAnimation: false,  // 是否展示hover鼠标移入的动画效果
                            // 标签
                            label: {
                                color: 'rgba(255, 255, 255, 1)',
                            },
                            // 连接标签的线
                            labelLine: {
                                lineStyle: {
                                    color: 'rgba(255, 255, 255, 0.3)',
                                },
                                smooth: 0.2,
                                length: 10, //线的长度
                                length2: 10, //线拐点的长度
                            },
                            // 当鼠标hover滑过时,标签的样式
                            emphasis: {
                                label: {
                                    show: true,
                                    fontWeight: 'bold',
                                },
                            },
                            // 数据源
                            data: pieData,
                        },
                    ],
                };
                chart.setOption(option);
            },
        },
    };
    </script>
    

    在这里插入图片描述

    基础组件既然已经写好了,上调用组件

    <template>
        <div class="box-container">
            <echart1 ref="pie_echart"></echart1>
        </div>
    </template>
    
    <script>
    import echart1 from './pie_echart.vue';
    
    export default {
    	// 子父组件传值,靠props了,此处是子组件
        props: {
            title: {
                type: String,
                default() {
                    return '';
                },
            },
            pieChartData: {
                type: Object, // 类型:对象,
                default() { // 默认值
                    return {
                        lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'],
                        sericeData: [
                            { value: 335, name: 'A行' },
                            { value: 310, name: 'B行' },
                            { value: 274, name: 'C行' },
                            { value: 235, name: 'D行' },
                            { value: 400, name: 'E行' },
                        ],
                    };
                },
            },
        },
        components: {
            echart1,
        },
        data() {
            return {
            };
        },
        // 监听主要数据pieChartData的变化,
        watch: {
            pieChartData: {
                deep: true, //是否深度监听?是
                handler() { // 如果监听的数据发生变化,就执行下列函数
                    const { lengendName, sericeData } = this.pieChartData;
                    this.$refs.pie_echart.initEcharts(lengendName, sericeData);
                },
            },
        },
        mounted() {
            const { lengendName, sericeData } = this.pieChartData;
            this.$refs.pie_echart.initEcharts(lengendName, sericeData);
        },
    };
    </script>
    
    

    再上调用上面组件的组件,简直俄罗斯套娃哈哈哈,

    // 父组件传值,传值方式 在HTML标签里面直接写,对应子组件props中的,此处的值写在return里面
    <PieChart :title="pieTitle" :pieChartData="pieDat"/>
    
    <script>
    import PieChart from '@/views/panel/box3.vue';
    import { chartData } from './data';
    
    export default {
        components: {
            PieChart,
        },
        // vuex监听
        watch: {
            '$store.state.currentCity': 'changData',
        },
        data() {
            return {
                pieTitle: '天湖区网点存款份额',
                pieDat: {
                    lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'],
                    sericeData: [
                        { value: 335, name: 'A行' },
                        { value: 310, name: 'B行' },
                        { value: 274, name: 'C行' },
                        { value: 235, name: 'D行' },
                        { value: 400, name: 'E行' },
                    ],
                },
            };
        },
        methods: {
            changData() {
                if (this.$store.state.currentCity.type === 'one) {
                    this.pieTitle = chartData.one.pie.title;
                    this.pieDat = chartData.one.pie.pieDat;   // 这里涉及到数据封装
                }
                if (this.$store.state.currentCity.type === 'two') {
                    this.pieTitle = chartData.two.pie.title;
                    this.pieDat = chartData.two.pie.pieDat;
                }
            },
        },
    };
    </script>
    

    再上如何封装数据
    单独创建一个js文件,我这里叫data吧

    const chartData = {
        one: {
            pie: {
                title: '区域网点',
                pieDat: {
                    lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'],
                    sericeData: [
                        { value: 35, name: 'A行' },
                        { value: 310, name: 'B行' },
                        { value: 174, name: 'C行' },
                        { value: 135, name: 'D行' },
                        { value: 600, name: 'E行' },
                    ],
                },
            },
        },
        two: {
            pie: {
                title: '分行网点',
                pieDat: {
                    lengendName: ['A行', 'B行', 'C行', 'D行', 'E行'],
                    sericeData: [
                        { value: 15, name: 'A行' },
                        { value: 10, name: 'B行' },
                        { value: 274, name: 'C行' },
                        { value: 135, name: 'D行' },
                        { value: 600, name: 'E行' },
                    ],
                },
            },
        },
    };
    export { chartData };
    

    echarts属性设置写的很详细的一篇
    添加链接描述

    展开全文
  • 创建项目 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:项目地址

    展开全文
  • 以在vue中使用stylus为例,创建一个以 .styl结尾的文件,当你需要用它的时候,要通过以下方式动态导入: <style lang="stylus" scoped> @import '相对路径/fileName.styl' ··· ··· </style> @...

    @import

    以在vue中使用stylus为例,创建一个以 .styl结尾的文件,当你需要用它的时候,要通过以下方式动态导入:

    <style lang="stylus" scoped>
    @import '相对路径/fileName.styl'
    ··· ···
    </style>

    @import工作原理:

    遍历目录列队,并检查任意目录中是否有该文件。。。

     

    @media

    @media媒体查询与常规css一样

    
    .box
       @media screen and (max-width: 320px)
          width:100px

     

    展开全文
  • import('./'+name+'.vue') var router = { name:name, ComponentName :ComponentName } 2.使用import导入组件,直接将组件赋值给componet var name = '组件名'; var route={ name:name, component :() =&...
  • vue中请求接口中,存在多个方法同时依赖同一个方法的情形,当所依赖的方法需要新增入参时,则需要同时修改多个依赖该方法的入参,为此,可以使用vue给对象动态添加属性和值的特性在公用方法中设置共同的参数。...
  • VUE动态路由

    2020-04-22 17:01:23
    vue前端的动态路由实现: 1、首先在router配置动态路由的路径: { path: 'nolist/:no', //相对路径 component: () => import('@/views/nolist'), //导入VIEWS的展示页面 name: 'nolist', ...
  • vue页面 npm npm install qrcodejs2 import 在所需页面导入 import QRCode from ‘qrcodejs2’ use 生成二维码 qrcode (url) { // 一定要加上document.getElementById("qrcode").innerHTML = "";,否则每点击一...
  • vue动态组件注册

    2021-02-14 16:56:33
    // 自动导入components的组件 const componentsContext = require.context('@/components', true, /index.vue$/) componentsContext.keys().forEach((component) => { const componentConfig = ...
  • 1、导入echarts组件,建议使用4.9.0版本,5.0.1可能会报错 npm uninstall echarts //卸载 npm install echarts@4.9.0//引入特定组件 2、引入echarts组件,可以在main.js引入 //报表 import echarts from '...
  • vue界面的title动态改变

    千次阅读 2018-05-06 12:53:35
    vue项目的各个界面有不同的title名称,如何能做到动态改变呢 这里需要用到vue的内置插件wechat-title 1.首先在项目npm引入 vue-wechat-title --save 2.然后在全部导入,在main.js进行初始化 import ...
  • 想在页面中加入微信扫描二维码进行分享的功能,网上有demo:https://github.com/sinchang/vue-social-share ...main.js中import:import QRCode from 'qrcode' 并在需要的组件中导入:import QRCode...
  • 而在vue项目,当要在中动态引入图片时,若直接从json文件中导入item.src字段为’assets/image/XX.png’的值到:src="XXX"时,会出现图片404的情况。 如: 这么循环引入img图片,页面会报404,表明从...
  • 在日常开发,如果我们想使用一个基础组件我们得在js文件通过import手动导入一个组件,而今天所说的vue组件动态全局注册则不需要,它能让我们在html直接书写相关组件,而不用显示引入相关组件。 2、组件动态...
  • vue前端动态绘制饼图(个人整理)

    千次阅读 2020-09-26 19:04:23
    2、在需要使用的vue组件引用 import echarts from 'echarts' 3、界面处规定一个div <el-col :span="12"> <!--为echarts准备一个具备大小的容器dom--> <div id="pie" style="width: 600px;height...
  • 在您的代码中导入或要求VueVue材料: import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.min.css' Vue . use ( VueMaterial ) 或使用单个组件: import ...
  • 在进行webpack搭建单页面应用时,使用到了vue-router,配置路由的过程,出现import语法错误。针对此现象,我们一起来分析下。路由配置的代码如下:const routes = [{ path: '/customer01', name: 'customer', ...
  • vue中加载静态资源的方式,常用的方式: 1.<img :src="./static/images/logo.png" 2.动态加载组件 导入import banner from '@/assets/imges/banner.png' 定义:在 data 中定义:banner 使用:<img :src=...
  • 随着项目的复杂,文件结构越来越多,Storemodules的文件也越来越多,如果一个一个加载是不是很麻烦呢?... 1 import Vue from 'vue'; 2 import Vuex from 'vuex'; 3 4 Vue.use(Vuex); 5 6 imp...
  • one.vue界面显示每项数据,点击任意一项,跳转到detail.vue界面显示该项的详情 ... 关键点: ...1、在路由文件中导入组件 import Detail from './views/analysisWC/syntheticalAnalysisWC/detail....
  • pinch-zoom-js 在vue 的安装、 使用

    千次阅读 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...
  • 1.在main.js中导入vue-router和组件 import VueRouter from 'vue-router'; // 导入vue-router并将它命名为VueRouter import goods from './components/goods/goods'; // 引入组件 import seller from './components...
  • 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...
  • vue项目优化

    2020-03-01 08:50:52
    说明:比如在component文件下有很多的组件,在其他的组件引入,势必会有很多的import的引入,麻烦,所以动态引入在main.js,之后在其他的vue文件直接使用,无需导入 //cptsRegister.js文件 import Vue from 'vue'...
  • 1.在项目新建两个.vue组件:test1,test2 在mian.js内导入test2组件,变为全局组件: import test2 from './test2' Vue.component('item',test2); 2.test1.vue的内容: &lt;template&gt; &lt;...
  • Vue国际化处理 vue-i18n 以及项目自动切换英文 搭建 Vue2 单元测试环境(karma+mocha+webpack3) Vue实现首屏加载等待动画 Vue项目添加锁屏功能 Vue项目添加动态浏览器头部title 本项目不支持低版本浏览器(如 ie)...
  • 在style标签内使用@import导入总结 一、css是什么? CSS (层叠样式表) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等...
  • 如下所示: <template> <img :src="img" alt=""> </template> export default { ...这样动态引入图片,在页面...第一种:直接 import 导入图片 <template> <img :src="img" alt=""> <
  • ## # ## #vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。 网上百度的给下拉框加z-index和设置position:absolute都不好使,求助前端大神。 ``` <!--添加数据 - 单次引入--> <!--在...
  • vue 引入 二维码

    2021-03-19 15:44:08
    vue-cli3 动态生成二维码(不带logo的) 第一步 先下载插件 npm install qrcodejs2 --save **第二步 在需要生成二维码的 页面 导入 ** import QRCode from 'qrcodejs2' **第三步 在页面引用 ** <div id=...

空空如也

空空如也

1 2 3
收藏数 57
精华内容 22
关键字:

vue中import动态导入

vue 订阅