精华内容
下载资源
问答
  • HTML中script标签中使用import 自定义总模块名称 from JS文件位置 script标签必须增加type="module" test.js中代码: let helloWorld=function () { console.log("Hello Vue"); } let test= function () {

    在学习Vue时,对各种JS模块的导入与导出的方式感到困惑,简单总结如下:

    一、导出与导入方式

    方式1:
    1. 导出:JS中使用export default {需要导出的模块名}
    2. 导入:
      • HTML中在script标签中使用import 自定义总模块名称 from JS文件位置
      • script标签必须增加type="module"来声明这个脚本是一个模块,否则会报错。

    test.js中代码:

    let helloWorld=function () {
      console.log("Hello Vue");
    }
    let test= function () {
      console.log("test Vue ");
    }
    let name = 'Vue'
    
    export default {
      helloWorld, //需要导出的模块1
      test, //需要导出的模块2
      name //需要导出的模块3
    }
    

    test.html代码:

      <script type="module"> 
        import justNameIt from './module.js' //justNameIt为自定义名称
        console.log(justNameIt.name) //Vue
        justNameIt.helloWorld() //Hello Vue
      </script>
    
    方式2:
    1. 导出:JS中使用export 模块名
    2. 导入:
      • HTML中在script标签中使用import {模块1,模拟2...} from JS文件位置
      • script标签必须增加type="module"来声明这个脚本是一个模块,否则会报错。

    test.js中代码:

    export function helloWorld() {
      console.log("Hello Vue");
    }
    export function test() {
      console.log("test Vue ");
    }
    export let name = "Vue"
    

    test.html代码:

       <script type="module">
         import { helloWorld, test, name } from './module.js'
        helloWorld() //Hello Vue
        test() //test Vue 
        console.log(name) //Vue
      </script>
    

    二、避免模块命名冲突:

    对导出的模块进行重命名import { helloWold as 新名称} from JS文件位置

    总结:两者使用上几无差别, 方式1倾向全部导出,方向2倾向按需部分导出
    参考: JavaScript modules 模块

    展开全文
  • methods中在定义一次

    在methods中在定义一次
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • scriptimport是js的语法, 是js去引用css文件 (ES6)模块化规范:默认导入语法 import 接收名称 from '模块标识符’ 使用 导入组件 import Vue from 'vue' 导入js、css、vue、less等文件 import ...

    import

    script中的import是js的语法, 是在js中去引用css文件

    (ES6)模块化规范:默认导入语法 import 接收名称 from '模块标识符’

    使用

    • 导入组件

    import Vue from 'vue'

    • 导入js、css、vue、less等文件

    import login from '../views/login/login.vue'
    import './styles/index.less'

    • 导入第三方插件

    import Vant from 'vant'

    • vue路由懒加载
      • 实现路由懒加载的步骤
        1. 安装 @babel/plugin-syntax-dynamic-import 包。
          npm install --save-dev @babel/plugin-syntax-dynamic-import

        2. 在 babel.config.js 配置文件中声明该插件。

          module.exports = {
            presets: [
              '@vue/cli-plugin-babel/preset'
            ],
            plugins: [
              [
                'component',
                {
                  libraryName: 'element-ui',
                  styleLibraryName: 'theme-chalk'
                }
              ],
              '@babel/plugin-syntax-dynamic-import'
          
            ]
          }
          
        3. 将路由改为按需加载的形式,示例代码如下:

          import Vue from 'vue'
          import VueRouter from 'vue-router'
          Vue.use(VueRouter)
          
          const routes = [
          //import具有变量提升机制,使用箭头函数限制作用域,实现懒加载
            { path: '/login', component: ()=> import('路由组件的路径') }
          ]
          
          const router = new VueRouter({
            routes
          })
          
          export default router
          

    @import

    style中的@import是stylus的语法,是在css中引用css文件

    使用

    • 导入css样式

    @import './icon.less';'

    展开全文
  • 动态导入文件报错,按照错误提示安装了插件,但未果,最后查到一个可行方案,记录如下: ...SyntaxError: D:\practice\vue-pro\webpack-vue-create\src\router.js: Support for the experimental syntax 'dynamicImport

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

    报错

    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"]    
      }
    
    展开全文
  • 1、ES6 模块主要有两个功能:export 和 importexport:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.js)变量的...而我们在使用 import 导入一个模块的时候通常这样使用import util from '@/li...
  • 1、ES6 模块主要有两个功能:export 和 importexport:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.js)变量的...而我们在使用 import 导入一个模块的时候通常这样使用import util from '@/li...
  • vue => 在vue中使用MUI

    千次阅读 2018-03-21 15:23:39
    首先去git上 ...main.js引入mui的css样式(前提是已经从clone下来的文件把dist文件夹放入vue项目) // 1 导入 vue import Vue from 'vue' // 导入 vue-resource import VueR...
  • 在VUE中使用ApexCharts

    2021-03-31 10:49:28
    安装Apexcharts npm install --save apexcharts ...main.js文件导入Vuevue-apexcharts,创建一个名为apexchart的全局组件。 import Vue from 'vue' import VueApexCharts from 'vue-apexchar
  • 在vue中使用Swiper

    千次阅读 2020-03-01 13:53:18
    最近在学习vue,给大家分享一下,swiper在vue中使用(两种方法)。 一,直接安装swiper 1,在项目根目录下,安装swiper npm install swiper --save 或淘宝镜像下的 cnpm install swiper --save 出现版本号,即...
  • 利用webpack的Vue项目中,main.js中使用import Vue from 'vue' 导入Vue的包,功能不完善,只是提供了runtime-only的方式,并没有提供像普通网页中使用Vue那样的功能完善。 包的查找规则 (1)项目根目录...
  • vue 中一个组件需要使用另外一个组件的时候,需要先Import,这个过程既重复又啰嗦,比如框架的一些组件,所有页面都可能会用到,那我们为什么不将他们统一挂载到vue中呢。 统一挂载框架组件 首先框架文件夹同级...
  • Vue中如何导入路由简单使用

    千次阅读 2018-10-13 19:15:04
    其实vue.router的使用,就是将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 哪里渲染它们。 vue-router网址:https://router.vuejs.org/zh/guide/#html 1 终端安装下载 cnpm install vue-router...
  • 普通网页如何使用Vue -1. 使用 script 标签 ,引入 vue 的包 -2. index 页面,创建 一个 id 为 app...注意: webpack 使用 import Vue from ‘vue导入Vue 构造函数,功能不完整,只提供...
  • 利用webpack的Vue项目中,main.js中使用import Vue from 'vue' 导入Vue的包,功能不完善,只是提供了runtime-only的方式,并没有提供像普通网页中使用Vue那样的功能完善。 包的查找规则 (1)项目根目录...
  • build/webpack.base.conf.js找到resolve 直接上代码: resolve: { // resolve是webpack的内置选项,顾名思义,决定要做的事情,也就是说当使用 import "jquery", // 该如何去执行这件事情就是resolve...
  • 怎么在vue中使用echarts

    2020-06-11 01:05:39
    怎么在vue中使用echarts 在做项目的时候遇到了一个问题,采用echarts官网的的方法导入会发生错误,在浏览器上报dom is not defined的错,于是上网查了前辈们的解决方案,成功了,解决办法如下 使用npm命令导入 npm...
  • 使用的库js-xlsx纯JS即可读取和导出excel的工具库https://github.com/SheetJS/js-xlsx安装直接下载dist目录下有很多个JS文件,一般情况下用xlsx.core.min.js就够... npm安装npm install xlsxmain.js引引入import...
  • 在Vue中使用Swiper

    2020-10-16 10:25:14
    Swiper常用于移动端网站的内容触摸滑动。 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。...需要的vue页面,导入swiper样式和js import Swiper from 'swiper' import 'swipe.
  • 普通页面导入Vue 安装 vue 运行依赖 cnpm i vue -S ... webpack 入口文件使用 import Vue from 'vue';导入Vue构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页...
  • swiper在vue中使用

    万次阅读 2018-10-27 14:47:35
    2,需要的vue页面,导入swiper样式和js import Swiper from 'swiper' import 'swiper/dist/css/swiper.css'; 3,循环出轮播或者写死都行,以循环出为例 html部分 &amp;amp;amp;amp;lt;div class=&...
  • 公用组件一般都会写components import HelloWorld from "@/components/HelloWorld.vue"; 这样导入 如果组件多了,就会每次都这样傻瓜般导入 优化 global.js import Vue from 'vue' function changeStr(str){ ...
  • 1、ES6的重要一个内容就是:模块化 ...3)、而我们在使用 import 导入一个模块的时候通常这样使用import util from ‘@/utills/request.js’ 或者路由懒加载: component: () => import(’@
  • 怎么在Vue中使用axios组件: 通过npm安装axios npm i axios 在 src/main.js中导入该组件 import axios from 'axios' axios常用请求 GET : // 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then...
  • vue中使用three.js导入外部3D模型

    千次阅读 2020-11-23 20:46:29
    最近公司有一个需要用到3D模型的项目,所以就学习了一下,这里小小的记录一下 下载依赖 npm i three -D npm i three-obj-mtl-loader -D npm i three-orbit-controls 导入依赖 import * as THREE from “three”...
  • 安装axios ...挂载在Vue的原型对象上,在全局可以使用 Vue.prototype.axios=axios 方法二: 提取axios封装,使用自己的实例 // axios.js import axios from ‘axios’ const instance=axios.create({ ...
  • Vue使用import ... from ...来导入组件,库,变量等。而from后的来源可以是js,vue,json。这个是webpack.base.conf.js设置的: module.exp...
  • 需要使用vue文件中导入 import Sortable from 'sortablejs' mounted生命周期初始化 var el = document.getElementById('itxst'); //设置配置 var ops = { animation: 100, //拖动结
  • 在vue中安装echarts cnpm install echarts --save 按需导入 这里我新建了一个新的文件,将按需导入的代码全放里面 // 按需导入echarts图表 import echarts from 'echarts/lib/echarts'; // 再引入你需要使用的图表...
  • 在vue3 中使用echarts

    千次阅读 多人点赞 2020-12-08 19:12:15
    2,main.js中导入 import { createApp } from 'vue' import App from './App.vue' import * as echarts from 'echarts' const app = createApp(App).mount('#app') app.echarts=echarts 3,需要使用的页面,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,120
精华内容 448
关键字:

在vue中使用import导入

vue 订阅