-
ts-require-vue typescript编写的vue create pages e.g. node ./build/code-gen/page.js path=pages account/accountList config/localConfigList config/thirdConfigList log/logList menu/menuList order/...
-
require引入js vue_请教 关于使用require 引入vue 和公共js的问题
2020-12-20 15:59:27移动端布局 计算font-size的1、引入公共样式失败。没有去计算2、aa 是vue 引入成功。 但是 我以后一个文件需要一个vue 文件 应该... 在页面引入main文件在使用一个script 引入一个新的js 依赖vue 用require的写法这...移动端布局 计算font-size的
1、引入公共样式失败。没有去计算
2、aa 是vue 引入成功。 但是 我以后一个文件需要一个vue 文件 应该怎么引入好点啊。 怎么分解开进行引入?
3、在vue的情况下。 引入Mint UI
我理解是在main的文件里面加载vue Mint ui 和一些公共样式。 在页面引入main文件
在使用一个script 引入一个新的js 依赖vue 用require的写法
这样的想法是正确的吗
还有引入公共样式和Mint UI 应该怎么引入好点。 无头绪。
但这样引入 直接报错了。 - -
每次引入一个新的入口文件。 每个入口文件引入config.js 然后引入需要需要vue文件。
最后就是怎么在config.js加载公用js了。和Mint UI 了。 请指教 公用js用不起来的问题
--------------------------------------------------
config.js。 paths应该只是规定好路径吧。 使用还是需要另外的方面 那怎么使用公用js和Mint UI呢。。
有没有dom给我参考一下。
-
require引入js vue_require.js 加载 vue组件 r.js 合并压缩
2021-01-12 16:27:03准备:vue.js 原本是学习vue组件require.js 然后想到用require 加载r.js 文件太多 合并文件目录忽略部分文件及文件夹一、先说vue 组件先引入vue 再引入vue组件Vue.extend({}) 定义组件 template data methodsVue....准备:
vue.js 原本是学习vue组件
require.js 然后想到用require 加载
r.js 文件太多 合并
文件目录
忽略部分文件及文件夹
一、先说vue 组件
先引入vue 再引入vue组件
Vue.extend({}) 定义组件 template data methods
Vue.component(),注册组件的标签,标签在html中是一个挂载点
new Vue() 进行实例化
index.html
// css引入 略
tq-header.js
//数据
var data = {
list: [{
name: "首页",
url: "./index.html",
}, {
name: "博客",
url: "http://taoquns.com"
}, {
name: "微博",
url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
}, {
name: "简书",
url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
}, {
name: "作品展示",
url: "http://taoquns.com/mypage"
}],
};
//定义组件 模板 数据 方法
var header = Vue.extend({
template: '
\',\\- \
- \
{{i.name}}\
\
\
data: function() {
return data;
},
methods: {
show: function() {
}
},
});
// 注册组件标签 绑定组件
Vue.component('tq-header', header);
//实例化
new Vue({
el: '#header'
});
tq-footer.js
// 定义组件内容,数据,方法
var footer = Vue.extend({
//模板
template: '
',//数据
data: function() {
return {
name: 'test name'
}
},
//方法
methods: {
show: function() {
alert(this.name);
}
}
});
// 注册组件的标签 绑定组件
Vue.component('tq-footer', footer);
//实例化
new Vue({
el: '#footer',
});
//vue组件结束
二、使用require 加载 vue 组件
引入require.js
data-main 制定主模块,负责引入哪些文件
子组件 需要用 define()函数包裹 见例子
将vue 和vue组件的引入注释掉,引入require.js data-main 指定主模块文件 js文件夹下的 script.js
baseUrl 默认路径 基目录
shim 非AMD规范的文件
paths 制定各个模块的加载路径
script.js
require.config({
baseUrl:'lib',
shim:{
'vue':{
exports:'vue'
}
},
paths:{
'vue':'../lib/vue',
'header':'../vue-module/tq-header',
'footer':'../vue-module/tq-footer'
},
});
require(['vue','header','footer'],function(vue,header,footer){
});
这样主模块就会先引入vue ,在陆续引入vue组件文件
vue 组件用define() 包裹
由于子组件依赖vue,所以需要写好依赖,并将参数Vue传进去 如:
// 函数参数Vue 大写的V哦
// 这样内部的调用Vue.extend() 等方法就可以正常使用了
define(['vue'],function(Vue){
Vue.exxtend({...});
Vue.component(.....);
new Vue({....});
});
tq-header.js 和之前差不多就是加了define()
// 头部 header
//require define 函数 start
define(['vue'], function(Vue) {
//数据
var data = {
list: [{
name: "首页",
url: "./index.html",
}, {
name: "博客",
url: "http://taoquns.com"
}, {
name: "微博",
url: "http://weibo.com/1654438844/profile?topnav=1&wvr=6"
}, {
name: "简书",
url: "http://www.jianshu.com/users/633b8f612f8e/latest_articles"
}, {
name: "作品展示",
url: "http://taoquns.com/mypage"
}],
};
//定义组件 模板 数据 方法
var header = Vue.extend({
template: '
\',\\- \
- \
{{i.name}}\
\
\
data: function() {
return data;
},
methods: {
show: function() {
}
},
});
// 注册组件标签 绑定组件
Vue.component('tq-header', header);
//实例化
new Vue({
el: '#header'
});
});
//require define 函数 end
tq-footer.js
// 尾部 footer
// require.js define() 函数包裹
define(['vue'], function(Vue) {
//vue 组件
/*
* template html模板文件
* data 数据 返回函数中返回对象
* methods 方法集合
*/
// 定义组件内容,数据,方法
var footer = Vue.extend({
template: '
',data: function() {
return {
name: 'function'
}
},
methods: {
show: function() {
alert(this.name);
}
}
});
// 注册组件的标签 绑定组件
Vue.component('tq-footer', footer);
//实例化
new Vue({
el: '#footer',
});
//vue组件结束
});
//define end
require 方法 预览成功
三、r.js 合并压缩
使用require 的方式 会加载很多的js文件,我们都知道这样会产生对服务器的多次请求,优化性能第一就是减少http请求次数
简单的说下r.js
r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。
就是写一个配置文件,将页面需要的js组件文件合并到一个,然后require.js 直接引用合并压缩后的文件就可以了,只需要加载一个文件。
准备
r.js 下载一个r.js文件放到目录中
node.js 本地需要安装node.js
这里我们将r.js 放到js文件中,建立一个build.js 配置文件
然后说下build.js 的配置
build.js
({
baseUrl:'../vue-module/',
paths:{
'header':'tq-header',
'footer':'tq-footer',
'imgview':'tq-img-view',
'vue':'../lib/vue',
},
name:'script',
out:'main.js'
})
我这里比较简单
baseUrl 设置基目录
paths 模块的引用
name 主模块的引用
out 输入位置
然后控制台 定位到r.js目录下 node r.js -o build.js 命令进行合并压缩,当目录下出现main.js 文件时,表示成功了。
然后将 index.html 中 data-main 原来的script.js改成 main.js 打开就好了
-
requirejs-css: https://github.com/guybedford/require-css/blob/master/README.md requirejs-text: https://github.com/requirejs/text/blob/master/README.md vue: https://cn.vuejs.org/v2/guide/ vue-router...
-
require引入js vue_Vue实战之require与import的区别和使用
2020-12-30 09:01:54我们都知道Vue之所以这么受大众喜爱的原因之一就是Vue的组件化开发模式,这样不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加...我们都知道Vue之所以这么受大众喜爱的原因之一就是Vue的组件化开发模式,这样不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加简单方便,整个开发效果也更高,可维护性也更强,也能适合多人协同开发。我们在阅读别人项目的时候经常会看到文件中出现require和import,作用都是用来引入模块化编程使用的。那么这两个有什么区别呢?
CommonJS的由来
在早期没有模块化思想时代码没有很好的编写规范,导致很多代码、逻辑重复、缺乏条理性且不易管理维护,这也让很多开发者头疼不已。随着JavaScript 社区的发展,社区为JavaScript制定了相应的规范,而CommonJS规范的提出得到了大家的承认和广泛的应用,2009年CommonJS就此诞生了。
CommonJS介绍
CommonJS实现了Javascript的模块化规范,规范了模块的特性和各模块之间的相互依赖性,使得代码可以更好的编写和维护,同时提高了代码的复用性。定义每个文件都是一个模块(module变量代表当前模块)并有自己的作用域,而每个文件里面定义的变量、函数、类,都是私有的,对于其他模块是不可见。模块的exports属性是对外的接口,只有通过exports导出的属性才能被加载识别。Node就是基于CommonJs规范实现的,因为CommonJS规范加载模块是同步的,而服务器中的Node模块都直接存储在服务器本地硬盘中的,加载起来自然比较快,可以说node项目是CommonJs规范目前的最好实践应用。
require
require是Node内置的用于加载模块文件函数,require函数可以读取并执行一个JavaScript文件,然后返回该模块的exports对象。module.exports变量(用于导出模块),require函数(用于导入模块)是CommonJS定义了两个主要概念,module.exports属性表示当前模块对外输出的接口,当其他文件通过require函数加载该模块时实际上就是读取module.exports中的变量。
ECMAScript 6 (简称ES6)
ECMAScript是(European Computer Manufacturers Association Script)的缩写,它是由ECMA国际标准化定制的一项JavaScript脚本语言的标准化规范。ECMAScript 6 是ECMA在2015年发布的JavaScript 的规范标准,解决 ES5 的很多先天不足并引入了模块化思想。ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系以及输入和输出的变量。
import
import是ES6中的语法标准也是用来加载模块文件的,import函数可以读取并执行一个JavaScript文件,然后返回该模块的export命令指定输出的代码。export与export default均可用于导出常量、函数、文件、模块,export可以有多个,export default只能有一个。
require与import的区别
1,require是CommonJS规范的模块化语法,import是ECMAScript 6规范的模块化语法;
2,require是运行时加载,import是编译时加载;
3,require可以写在代码的任意位置,import只能写在文件的最顶端且不可在条件语句或函数作用域中使用;
4,require通过module.exports导出的值就不能再变化,import通过export导出的值可以改变;
5;require通过module.exports导出的是exports对象,import通过export导出是指定输出的代码;
6,require运行时才引入模块的属性所以性能相对较低,import编译时引入模块的属性所所以性能稍高。
require的使用
定义模块:module变量代表当前模块,它的exports属性是对外的接口。通过exports可以将模块从模块中导出,其他文件加载该模块实际上就是读取module.exports变量,他们可以是变量、函数、对象等。在node中如果用exports进行导出的话系统会系统帮您转成module.exports的,只是导出需要定义导出名。
加载模块:require方法用于加载后缀为js的模块文件,如果参数字符串以“/”开头则表示加载的是绝对路径的模块文件,如果参数字符串以“./”开头则表示加载的是相对路径的模块文件,模块同步加载并按照JavaScript运行时查找的顺序进行处理。
import的使用
定义模块:在模块中可以使用export关键字可以将变量、对象、函数、类等从模块中导出,再通过import语句就可以使用它们。一个模块中只能有一个默认导出export default,但是可以有多个export导出。
加载模块:import加载模板可以有多种形式,可以以整个模块的内容、单个接口、多个接口、带别名接口、默认值等方式载入。这样就可以实现按需加载模块模块,提高代码的性能。
-
vue路由require方法_vue 动态注册路由 require.context
2021-01-30 13:53:13一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,...一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
页面代码:
如下图示,views文件夹下的内容,都需要进行路由注册。
文件的路径有2种,(1)简单的vue功能页面,直接挂在views文件夹下;(2)复杂的页面,在views下在新建文件夹进行处理。
目前需要自动注册的路由页面,是针对“直接挂在views文件夹”下的页面。(因为views下的二级页面,暂时没有想到好的方案)
router/index.js页面代码
心路历程:
(1)一开始的想法,是想着用数组对象的方式定义好,路由名称和引入的路径地址,但是觉得还是不够自动化,新建.vue文件的时候还是需要手动添加;
(2)后来想到用使用require.context方法得到fileName,然后根据字符串裁减和拼接,得到我所需的url和文件相对路径;
例如: component: () =>import(【变量】),但是后来发现,import()里面,不能使用变量!!!!!!!!!
原因:根据es6module语法,由于import是静态执行,所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。
(3)由由于import的使用限制,不能动态使用() =>import的语法,因此在考虑,能否直接替换掉这种异步加载引入的写法。经过分析,得出pathConfig字段里面有一个属性的内容,是指定的vue页面的default模块内容。经测试,可以使用。
pathConfig的打印内容如下示:
(4)因此“views”文件夹下的".vue"文件,引入成功,并用变量routerAry存储起来,使用concat方法把其他需要手动注册的路由信息,连接起来,进行路由注册。
1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3 Vue.use(VueRouter)4
5
6 //查询指定文件夹下的vue页面,自动注册路由
7 //仅适用于:一个文件夹下的多个路由页面。用于简单的页面的注册
8 //pathConfig.default的内容,是指定的vue页面的default模块内容,等同于: () => import('xxxx')
9 const contextInfo = require.context('../views', false, /.vue$/);10 let routerAry =[]11 contextInfo.keys().forEach(fileName =>{12 const pathConfig = contextInfo(fileName)13 let path = "/" + fileName.substring(2,fileName.length-4)14 routerAry.push({15 path,16 component: pathConfig.default
17 })18 })19
20 const routerList =[21 {22 path: "/",23 redirect: "/animate",24 },25 {26 path: "/openlayers",27 component: () => import('../views/openlayers/openlayers')28 },{29 path: "/render",30 component: () => import('../views/render/render')31 },{32 path: '/vuex',33 component: () => import('../views/vuex/vuex')34 },{35 path: "/echarts",36 component: () => import('../views/echarts/echarts')37 },{38 path: "/ztree",39 component: () => import('../views/ztree/ztree')40 },{41 path: "/ocxplayer",42 component: () => import('../views/ocxplayer/ocxplayer')43 },{44 path: "/animation",45 component: () => import('../views/animation/animation')46 },47 ]48 const newRouterAry = routerList.concat(routerAry)49 const router = newVueRouter({50 routes: newRouterAry51 })52 export default router
-
Vue require 使用
2020-01-10 11:04:00require.context 使用 一次引入多个文件 require.context('文件路径',true/false,正则表达式) const modulesFiles = require.context('./modules', true, /\.js$/) const modules = modulesFiles.keys().reduce... -
require引入js vue_vue中import和require的用法
2020-12-20 15:59:16其实用了这么久的vue,里面有很多东西都没有去细细整理分析,今天就整理一下Import(模块、文件)引入方式1.引入js文件在用的那一页,引入文件Import tools from ‘./tools.js’相应的js文件,必须暴露出来2.引入组件... -
require引入js vue_VUE项目面试讲解
2020-12-25 10:55:46个人博客网站(三) - 前端项目www.cnblogs.com1.搭建VUE基础框架1.1安装node.js(node -v , npm -v)1.2安装vue脚手架vue-cli(npm install -g vue-cli)(-g表示全局安装)1.3初始化一个项目 vue init webpack ... -
require引入js vue_vue中的js引入图片,必须require进来
2020-12-20 15:58:34需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。1.在img标签里面直接写上路径:2.利用数组保存再循环输出: {{ item.title }}data: () => ({carouselData:[{url:require('../assets/a1.png... -
require引入js vue_vue中的js引入图片,使用require相关问题
2020-12-20 15:59:18vue中的js引入图片,必须require进来 或者引用网络地址 // @ is an alias to /src// import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'home',// components: {// HelloWorl... -
require引入js vue_vue项目基础配置
2021-01-02 02:51:41本地初始化bash 切换到桌面 运行 vue init Webpack vue-demo 生成初始化vue项目2.建立和码云的连接在Gitlab创建一个没有readme的空项目3.建立本地仓库打开第一步创建的项git init <!-- 初始化git仓库 > git ... -
vue require图片_vue的三种图片引入方式
2020-12-12 05:06:16vue的三种图片引入方式:首先给图片地址绑定变量:在script中设置变量://方法1:直接将图片引入为模块require imgUrl from "../assets/test.png"//方法2:把imgUrl放在数据中data() {return {imgUrl:require("../... -
require引入js vue_vue-i18n国际化
2020-12-30 13:42:49首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架。2、我们需要安装 vue-i18n, 推荐 npm... -
require-vue not working when run cordova app in IOS
2020-12-09 10:32:36components/test.vue_unnormalized2,vue!components/test.vue http://requirejs.org/docs/errors.html#timeout</p> <pre><code> var asyncComp = function (componentName) { return function (resolve) { ... -
vue require和import 区别
2020-04-15 13:57:35vue中require与import之间的区别 -
vue路由require方法_vue中的路由编写方法
2021-01-30 13:53:11方法一:在router/indexs.js文件下配置路由import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({mode: 'history',// 使用 HTML5 的 History 路由模式,通过‘/’设置... -
require引入js vue_vue系列之requireJs中引入vue-router的方法
2020-12-20 15:59:26requiredefine其中define是用于定义模块,而require是用于载入模块以及载入配置文件。define([id,deps,] callback);require(deps[,callback]);加载配置文件独立的引入配置文件也有两种方式,一种是通过script标签加.... -
require引入js vue_利用requirejs实现vue的模块化开发
2020-12-20 15:59:19这里提出一个解决方案:1、加载requirejs,并且指定main函数2、定义main函数require.config({paths: {"text": 'https://cdn.bootcss.com/require-text/2.0.12/text.min','vueLoader': 'compo... -
require引入js vue_抛开vue-cli 利用requireJS搭建一个vue项目
2020-12-20 15:59:28---恢复内容开始---现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp install XXX帮我们搭建系统。... -
require引入js vue_Vue.js 引入外部js方法
2020-12-30 13:42:40切图网专注web前端开发,在做vue开发的时候,难免有时候需要引用外部的JS文件,比如一个3级的地区数据,或者一个方法,或者一个JS类文件等等,下面介绍Vue.js 引入外部js方法,亲测有用。1、外部文件config.js第一种... -
require引入js vue_requirejs + vue 项目搭建
2020-12-20 15:59:30以前都是支持 司徒正美 的,毕竟咱们也是跟着司徒正美 一起走进了前端的世界。所以一般MVVM都是用avalon的,当然也是...看了比较流行的一些框架,最后选择了vue。选择他的原因是 文档比较全,而且还有中文的(你懂的... -
vue require 图片动态地址_Vue 之引入图片
2020-11-25 05:05:06上次老师跟大家分享了Vue 之is的作用和用法的知识,今天跟大家分享下Vue 之引入图片的知识。1Vue 之引入图片参考文献:http://www.fly63.com/article/detial/1797?type=3需求:如何components里面的inde... -
require.context 注册vue组件
2020-11-26 10:15:22VUE 优雅的组件全局注册高复用vue的组件花式引入注册引入的方式 require.context组件结构src目录下 高复用组件目录 @src/moreComponentglobal.jsmain.js在任意组件调用demo预览 高复用vue的组件花式引入注册 引入的... -
vue 无法识别require方法
2020-06-24 15:46:04vue无法识别require,执行一下命令即可: npm install @types/node --save-dev -
vue中使用require报错
2020-06-08 18:03:58vuecli中不能使用require 1.添加开发环境配置 2.命令行 npm install 搞定!!!! -
Vue 图片 三目require
2019-03-01 11:27:15'require(`@/assets/imgs/head/cose_a.png`)':require(`@/assets/imgs/head/cose_aa.png`)"/> <img @click="cosMo(b)" :src="cosemo.cosemoIm_c?'require...