vue怎麼編譯成js文件

Ⅰ weex最新版如何將.vue編譯成.js文件

將內核切換成 Vue 之後，原先基於 Weex 語法開發的項目將如何過渡到 Vue ？
首先需要明確一點：Weex 原有的前端框架也會繼續存在於 WeexSDK 中，依然支持 .we 文件格式的寫法。
此外，由於 .we 和 .vue 文件的格式本身就比較接近，所以遷移成本比較小，建議大家將現有 .we 格式的文件都轉換成 .vue 格式。我們也推出了相應的工具和方法輔助遷移，在內部也有大量的成功實踐，下邊將重點介紹一下將 .we 文件轉成 .vue 文件的方法。

Ⅱ vue壓縮後的js可以反編譯出來嗎

vue壓縮後的js可以反編譯出來，反編譯方法為：

1、在桌面找到自己下載的瀏覽器軟體，點擊瀏覽器圖標。

Ⅲ vue如何引入js文件

1、vue-cli webpack全局引入jquery
(1) 首先 npm install jquery --save (--save 的意思是將模塊安裝到項目目錄下，並在package文件的dependencies節點寫入依賴。)
(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在mole.exports的最後加入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了 (測試這一步不用也可以)

1

import $ from 'jquery'

(5)然後 npm run dev 就可以在頁面中直接用$ 了.

Ⅳ 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 組件實現文本框驗證：


用戶名


用戶合
寫圖片描述
自定義指令
文檔：
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 指令面看何使用

我組件模板使用 v-uname 並且給綁定username數據
我打瀏覽器控制台：
寫圖片描述
說明我定義指令執行：
bind(){
console.log("bind"); // 調用
},
3、面我看update 東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}

Ⅳ weex中 vue頁面編譯成js怎麼實現頁面間的跳轉

使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api：get(url,[data],[success],[options])post(url,[data],[success],[options])put(url,[data],[success],[options])patch(url,[data],[success],[options])delete(url,[data],[success],[options])jsonp(url,[data],[success],[options])具體舉例如下：1、導入vue-resource2、基於全局Vue對象使用http//通過someUrl獲取後台數據，成功後執行then的代碼Vue.http.get('/someUrl',[options]).then(successCallback,errorCallback);3、在一個Vue實例內使用$http//$http是在vue的局部范圍內的實例this.$http.get('/someUrl',[options]).then(successCallback,errorCallback);說明：在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

Ⅵ vue怎麼導入自己寫的js文件

1. 首先我們要改變我們要映入的外部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);
}

Ⅷ vuePress裡面怎麼寫vue.js代碼

2.1 新建文件夾docs

配置package.json，添加下述兩行

{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}}

進入docs文件夾 創建 README.md文件

此時運行命令

npm run docs:dev

此時文件夾結構

study
+--docs
+----README.md
+--package.json

運行訪問http://localhost:8080/

image.png

結束運行 ，執行命令

npm run docs:build

然後看文件變化 多了個node_moles
docs 多了個 .vuepress文件夾

study+--docs+----.vuepress+------ dist //打包後的文件夾+----README.md+--package.json+--node_moles

我們在.vuepress 創建
config.js 文件
添加

mole.exports = {
title: 'Adroi媒體API 介面文檔', // 設置網站標題
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '介面定義', link: '/apiword' },
{ text: '介面欄位定義', link: '/api' },
{ text: '附錄：錯誤碼', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目錄的md文件 也就是 README.md 裡面的內容
"apiword", 根目錄創建 apiword.md文件 "api",根目錄創建 api.md文件 "error" 根目錄創建 error.md文件 ]
},
sidebarDepth : 2
}}

image.png

3）添加靜態圖片


4)添加指定樣式

添加樣式 分兩種 一種不用預編譯處理、一種使用

//不使用預編譯處理//直接在md文件底部添上<style></style>

//使用預編譯處理
首先需要安裝所需的模塊 舉例：stylus
npm i stylus stylus-loader -D<style lang="stylus"></style>

5)vuePress可添加js代碼

既然是尤大大的作品 那肯定是支持vue語法的
在MD文件中直接寫入js的語法

<script>
export default{
//...do something
}</script>

6)代碼發布或上傳至伺服器

關於發布問題：首先我們知道在打包後的文件都是靜態文件之前的MD文件都被打包成html靜態文件了,其次在文件config.js中 base至關重要

6-1發布在雲盤中如網路雲盤 github上可直接通過鏈接訪問

在雲盤上創建根目錄如vuepress，然後在config中 bese這部分就填寫/vuepress,然後進行打包操作，再然後把打包後的文件上傳至雲盤上的vuepress文件中

6-2 通過伺服器發布

在伺服器上安裝Apache或者nginx 這里拿nginx舉例：
至於nginx 安裝 以及配置文件的解讀使用 我這里就不詳述了，不了解的童鞋可以自己查閱相關文件

同樣base的填寫很重要

//為了簡單明了 我們把打包好的文件放入nginx中html文件下 之前的文件可以清空server {
listen 8081; //監聽8081埠
server_name localhost; //localhost:8081即可指向也可寫別名如local.vuepress.com.cn 那我們訪問這個埠的別名加埠就可以
location / {
root /nginx/nginx-1.9.15/html; //至關重要你的入口文件在本機的位置
index index.html index.htm; //入口文件
}
}

轉載於：https://www.jianshu.com/p/7a2cc8a7f40c

Ⅸ .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)
}
}
}