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文件中。