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 vue@2.1.4 #安装指定版本
npm install vue-template-compiler@2.1.4
npm install vue-loader@10.0.0