vue-cli3 将自己写的组件封装成可引入的js文件

2024-08-03

vue-cli3 将自己写的组件封装成可引入的js文件

一.调整项目结构首先用 vue-cli 创建一个 default 项目 // 顺便安利一篇文章<Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目> 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件然后将 src 目录改为 examples 用作示例二.修改配置启动项目的时候,默认入口文件是 src/main.js 将 src 目录改为 examples 之后,就需要重新配置入口文件在根目录下创建一个 vue.config.js 文件 //

将自己写的组件封装成类似element-ui一样的库，可以cdn引入

在写好自己的组件之后第一步修改目录结构在根目录下创建package文件夹,用于存放你要封装的组件第二部在webpack配置中加入 pages与publicpath同级 pages: { index: { entry: 'src/main.js', template: 'public/index.html', filename: 'index.html' } }, 第三部编写组件在package文件夹下新建一个你的组件名的文件夹里面存放一个你的组件的.vue文件再新建一个j

vue组件内部引入远程js文件

之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第

vue页面引入外部js文件遇到的问题

问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/publicFun.js';//这里如果有多个方法的话也引用一次就可以了 //import {test,test2,test3} from '../../../publicJavaScript/publicFun.js';//这样如果引用的方法比较多的话就会比较麻烦,而且不美观 export default {

Vue中引入静态JS文件（爬坑）

前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-admin2.0.尝试了许多方法,算是填坑了吧.... 1.首先找到项目下的index.html,我的是在public下.如图 2.接着将你要引入的js文件写在index.html里面 tip:1.js文件要放在public下,其他目录无法引用成功.目录的跳级规则还没有找到,与普通跳级方式不同. 2.p

JS高级---案例贪吃蛇，把封装的函数移动到js文件中

案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> .map { width: 800px; height: 600px; background-color: #CCC; position: relative;

Vue引入远程JS文件

问题最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法第一版代码(直接在操作 Do

vue引入静态js文件

由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件

在vue的js文件引入自定义js文件

自定义js var provinces=[] export default provinces vue页面js引入 import riskLeft from "./index.js"; export default riskLeft; riskLeft内引入自定义js(背景:.vue文件内html和js分离) import provinces from './province-data' export default { data() { return { provinces: []

vue，基于element的tree组件封装

封装组件代码 // 组件:树 /* 参数说明-属性: 1.treeData:展示数据(array) 2.treeEmptyText:内容为空的时候展示的文本(String) 3.treeNodeKey:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的(String) 4.treeRenderAfterExpand:是否在第一次展开某个树节点后才渲染其子节点(boolean) 5.treeHighlightCurrent:是否高亮当前选中节点,默认值是 false(boolean) 6.tre

vue-cli3 将自己写的组件封装成可引入的js文件

热门专题