A. vue: WebStorm設置快速編譯運行的方法
WebSorm是一款優秀的前端開發工具，而Vue項目可以使用Node進行編譯運行，平常我們可以通過命令行部署項目進行調試。
本文介紹設置Webstorm進行快速部署Vue項目。
第一步
點擊啟動快捷按鈕旁邊的向下小箭頭，在列表中選擇Edit選項：
第二步
打開啟動設置頁面後，點擊左上角的加號添加新的運行方式：
第三步
在彈出的選擇框中，選擇node.js啟動模式：
第四步
在新打開的設置頁面中，在紅色圈中的地方設置如圖路徑的文件：
至此設置成功，直接點啟動按鈕就可以部署項目。
以上這篇vue:
WebStorm設置快速編譯運行的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:webstorm添加*.vue文件支持webstorm添加vue.js支持的方法教程webstorm中vue語法的支持詳解webstorm和.vue中es6語法報錯的解決方法詳解Webstorm
新建.vue文件支持高亮vue語法和es6語法
B. vue2.0this編譯報錯，求大神指教
正常的，你使用的編輯器命令中沒有this這個用法，就像word你打一個學術英文簡寫報錯一樣的性質，我用phpstorm的時候也會報錯的，要用專門編寫js的程序就不會出這個問題了，能正常運行就代表沒錯
C. Vue項目中中編譯正確 控制台出現下列錯誤是什麼情況
1.
程序里可以含有不支持靜態編譯的控制項.
如:
字體選擇框
選擇顏色對話框
等
2.
也有可能是易語言軟體的問題...可以重裝安裝下試試
D. 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);
}
E. vue.js 官方demo怎麼編譯
在項目中，我是這樣使用組件的:
定義一個組件
// title.vue
<template>
{{title.title}}
</template>
<script>
export default {
props: {
title: {
title: ''
}
}
</script>
在另一個組件里用
// index.vue
<template>
<nav-title :title="title"></nav-title>
</template>
<script>
import navTitle form 'title.vue'
export default {
el: '#app',
data: {
title: {
title: '標題'
}
F. Vue正式上線項目都是編譯之後的嗎
對，都是編譯後的，就像後端，也是編譯後的
G. 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方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。
H. vue npm運行項目，這個怎麼解決
1、刪除package-lock.json,重新npm install，node_moles中出現了stylus文件夾了，然而還是報錯。
2、在終端直接運行 sudo npm install stylus-loader stylus --save-dev 結果就編譯成功了、
補充：
1、這個package-lock.json 是npm 5 做的一個優化，加快了npm 下載的速度。條件就是將依賴的詳細信息，包括版本，下載地址等，都寫在了裡面。然後想要更新版本的話，就不能夠去通過修改package 裡面的版本依賴來實現了，只能通過npm install packageName@version 來實現。
背景如下：
1、npm目前升級到了5.0.3
npm install的時候目錄會多一個package-lock.json這個文件
此時我在package.json的devDependencies中添加了
2、"stylus": "^0.54.5","stylus-loader": "^3.0.1"
3、然後在終端重新運行npm install的時候，項目中的node_moles並沒有出現stylus文件夾
I. vue中如何編譯代碼使相同的模塊共用一樣的數據
Vue.js很簡單。正因為如此簡單，人們常常認為其適合於小項目。雖然真正的Vue.js核心知識只是一個視圖層庫，實際上有一組工具，將使您能夠使用Vue.js構建完整的大規模SPA（單頁應用程序）。 SPA應用可以在不完全重新載入網頁，產生一個更流暢的用戶體驗到的用戶交互響應。還有好的副作用，SPA還鼓勵後端專注於展示數據端點，這使得整體架構更加分離，並且對於其他類型的客戶端可能是可重用的。 從開發人員的角度來看，SPA和傳統的後端呈現應用程序之間的主要區別是，我們必須將客戶端視為具有自己架構的應用程序。通常，我們需要處理路由，數據獲取和持久性，查看渲染和必要的構建設置，以便於模塊化代碼庫。
J. element餓了么的vue框架，運行報錯
已解決，Vue 2.1.5 將 _h 重命名為 _c，而 Element 目前發的版本都是用以前的 compiler 編譯的，導致新版 runtime 無法運行 Element。目前的解決方案是鎖定 Vue 的版本為 2.1.4
鎖定vue相關版本
# 重新安裝一下版本
"vue-template-compiler": "2.1.4"
"vue-loader": "10.0.0"
"vue": "2.1.4"
具體命令如下：
npm remove # 卸載某個版本
npm remove vue
npm remove vue-template-compiler
npm remove vue-loader
npm install [email protected] #安裝指定版本
npm install [email protected]
npm install [email protected]