vue编译成js文件

Ⅰ weex最新版如何将.vue编译成.js文件

1.在components 目录下新建一个validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
这就是我们的插件，定义了一个属性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我们到user-username.vue 组件下验证一下:
mounted(){
alert(this.$myName);
},
浏览器访问登录页面，成功弹出：
这里写图片描述
4.刚刚我们已经学会插件里定义属性，马上来学一下如何定义方法：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同样可以使用该方法：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
这里写图片描述
我们修改user-name.vue 组件，来实现文本框验证：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用户不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用户名改变的方法里判断 用户名是否复合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false; // 如果验证没有通过就显示错误提示
}else{
this.showErrorLabel = true;
}
// 调用父组件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
这里写图片描述
自定义指令
文档：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果没有填写,默认为true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 只会调用一次
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我们自定了一个uname 指令，下面来看一下如何使用的？
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我们在组件的模板里使用了 v-uname ，并且给绑定了”username”数据。
我们打开浏览器的控制台：
这里写图片描述
说明我们定义的指令里，这个方法执行了：
bind(){
console.log("bind"); // 只会调用一次
},
3、下面我们来看一下update 里的东东
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}

Ⅱ .vue文件怎么写js代码

单个组件里面可以使用import $ from 'jquery' 引用

当前你得使用npm把jquery 安装了。 把jquery 用exportdefault 导出来(就是在jquery.js的最后一行写上 exportdefault $)， 然后使用import $ from ‘jquery的文件地址’

至于 script标签里面怎么写

import$from'jquery'
exportdefault{
data:function(){
return{
testData:1//这个对象里面定义所有的变量这些变量可以在html直接和dom绑定
}
},
mounted:function(){
//生命周期函数，有好几个执行的顺序都不一样，可以根据场景选择不同的生命周期函数这块一般是初始化数据的地方
},
methods:{//这里写所有的方法，这些方法可以在方法内部使用this.方法名调用，也可以在html中使用@时间名=‘函数名()’调用
init(){
//实例方法
//使用this.变量可以访问data中的变量
console.log(this.testData)
}
}
}

Ⅲ 濡备綍瑙ｅ喅浣跨敤vue镓揿寘镞秜endor鏂囦欢杩囧ぇ鎴栬呮槸app.js鏂囦欢寰埚ぇ镄勯梾棰

杩欑瘒鏂囩珷涓昏佷粙缁崭简浣跨敤vue镓揿寘镞秜endor鏂囦欢杩囧ぇ鎴栬呮槸app.js鏂囦欢寰埚ぇ闂棰樼殑瑙ｅ喅鏂规硶,闱炲父涓嶉敊锛屽叿链変竴瀹氱殑鍙傝冨熼壌浠峰硷纴闇瑕佺殑链嫔弸鍙浠ュ弬钥冧笅
绗涓娆′娇鐢╲ue2.0寮鍙戯纴涔嫔墠閮芥槸鐢ㄧ殑angular1.x銆傚湪浣跨敤vue-cli鑴氭坠鏋舵墦鍖呭悗锛圲I鐢ㄧ殑Element-ui锛夛纴鍙戠幇vendor鏂囦欢寰埚ぇ锛屽皢杩1M宸﹀彸銆傚悗𨱒ョ炕阒呰祫鏂欐墠鏄庣槠锛屽师𨱒webpack鎶婃墍链夌殑搴挞兘镓揿寘鍒颁简涓璧凤纴瀵艰嚧鏂囦欢寰埚ぇ銆
鎴戠殑瑙ｅ喅锷炴硶锛
1銆佹妸涓嶅父鏀瑰彉镄勫簱鏀惧埌index.html涓锛岄氲繃cdn寮曞叆锛屾瘆濡备笅闱㈣繖镙凤细
铹跺悗镓惧埌build/webpack.base.conf.js鏂囦欢锛屽湪 mole.exports = { } 涓娣诲姞浠ヤ笅浠ｇ爜
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
},杩欐牱webpack灏变笉浼氭妸vue.js, vue-router, element-ui搴撴墦鍖呬简銆傚０鏄庝竴涓嬶纴鎴戞妸main.js涓瀵筫lement镄勫紩鍏ュ垹鎺変简锛屼笉铹舵垜鍙戠幇镓揿寘钖庣殑app.css杩樻槸浼氭妸element镄刢ss镓揿寘杩涘幓锛屽垹鎺夊悗灏辨病浜嗐
铹跺悗浣犳墦鍖呭氨浼氩彂鐜皏endor鏂囦欢灏忎简寰埚殈
濡傛灉浣犺缮涓嶆弧瓒筹纴璇锋帴镌寰涓嬬湅路路路路路
2銆乿ue璺鐢辩殑镍掑姞杞斤纸鍏蜂綋浣灭敤锛屽畼缃戞煡鐪嫔摝锛岃繖閲屽氨涓嶅氢粙缁崭简锛夈
鍒氩紑濮嬫垜浠浣跨敤璺鐢卞彲鑳芥槸涓嬮溃杩欐牱锛坮outer.js锛夛纴杩欐牱涓寮濮嬭繘鍏ラ〉闱㈠氨浼氭妸镓链夌殑璺鐢辫祫婧愰兘锷犺浇锛屽傛灉椤圭洰澶э纴锷犺浇镄勫唴瀹瑰氨浼氩緢澶氾纴绛夊緟镄勬椂闂撮〉灏变细瓒婇暱锛屽艰嚧缁欑敤鎴风殑涓嶅ソ镄勪綋楠屾晥鏋溿
涓轰简鎶婅矾鐢卞垎妯″潡锛岀劧钖庢疮娆¤繘鍏ヤ竴涓鏂伴〉闱㈡墠锷犺浇璇ラ〉闱㈡墍闇瑕佺殑璧勬簮锛堜篃灏辨槸寮傛ュ姞杞借矾鐢憋级锛屾垜浠鍙浠ュ儚涓嬮溃杩欐牱浣跨敤(router.js)锛
铹跺悗浣犳墦鍖呭氨浼氩彂鐜帮纴澶氢简寰埚1.xxxxx.js锛2.xxxxx.js绛夌瓑锛岃寁endor.xxx.js娌′简锛屽墿涓媋pp.js 鍜宫anifest.js锛岃屼笖app.js杩桦緢灏忥纴鎴戣繖閲屾槸100k澶氢竴镣广
杩欓噷鎴戞病链夌敓鎴恗ap鏂囦欢锛岃繖镙锋墦鍖呴熷害蹇涓浜涳纴鏁翠釜椤圭洰鏂囦欢涔熷皬寰埚氾纸map鏂囦欢涓鑸閮藉緢澶э级;
鍙栨秷鐢熸垚map鏂囦欢锛屾垒鍒瘫onfig/index.js 锛屼慨鏀逛笅闱㈢澶存寚钖戜负false锛屽氨琛屼简銆
鍒氩紑濮嬩娇鐢锛屼竴璺纾旷旷扮板湪镓闅惧厤锛屼篃鍊熼壌浜嗗緢澶氩墠杈堜滑镄勭粡楠岋纴镓浠ュ湪杩欓噷璁板綍涓涓嬶纴甯屾湜鑳藉府鍒版洿澶氱殑浜恒

Ⅳ vue编译后的js和map文件修改不了吗

无法还原，编译后的js为压缩文件，很多代码都不存在了

Ⅳ 使用vue-cli生成的vendor.js文件太大，有办法减少体积吗

使用“js压缩”工具可缩小体积，可网络搜索“js压缩”查找工具

把vendor.js代码ctrl + a全选，再ctrl + c复制，粘贴到js压缩工具里，点击“压缩”或“普通压缩”，然后再把压缩后的代码复制粘贴到vendor.js文件中。