推荐这篇日记的豆列
&&&&&&&&&&&&问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我在使用vue的时候预先将所有的依赖安装在了D:\lib\node_modules下面，并且在环境变量中设置了NODE_HOME=D:\lib\node_modules。之后使用vue init webpack 创建了一个vue项目并在代码里添加了require('vuex')等相关插件，但却提示我缺少了vuex,vue-router等我已经在D:\lib\node_modules中安装的模块。
我在上建立了一个测试文件test.js并尝试require('vuex);发现运行正常并未出现运行vue项目时出现的缺少相关已安装的模块的问题。我想问一下大家出现过这种情况吗，是怎么处理的。
文件位置：{ vuex,vue-router等： D:\lib\node_modules,
D:\project\myproject,
C:\Users\xx\desktop
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你直接node test.js运行的?
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
init 完还要 npm install
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可能是你的vuex,vue-router跟你用的脚手架的版本不一样 用脚手架提供的版本吧。npm install一下
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
初学者。用Vue开发前端，webpack打包。在实际应用中，对于一些需要在部署到服务器后可能需要修改的配置项，一般是怎么操作的？打个比方，前端vue中需要调用的服务webAPI的url，写在配置变量APIURL中，我看教程和网上的例子，建议做法是在config木料下的prod.env.js 和dev.env.js里面去分别指定APIURL，可以达到开发和部署不用频繁手动修改url的目的。但是，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，修改prod.env.js的APIURL后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。以前用过asp.net，一般这样的配置可放在web.config里面，这个改动只要在服务器端编辑修改下web.config的url，重启web服务即可生效。请教大神，webpack是否也有相类似的机制或者方法，可以把这样的可能发生运行时修改的配置进行保留，便于运维时可以方便的修改？或者在实际项目中，这样的配置一般是怎么操作的？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
从其它问题中找了一个方法，暂时算是解决。参考：
用了generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.json文件，让其在build的时候输出：
var GenerateAssetPlugin=require('generate-asset-webpack-plugin');
var createServerConfig=function(compilation){
//console.log("info from GenerateAssetPlugin:");
//console.log(compilation);
let cfgJson={ApiUrl:"192.168.11.90"};
return JSON.stringify(cfgJson);
//在plugins:[]中
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) =& {
cb(null, createServerConfig(compilation));
extraFiles: []
然后，在用axios，get一下这个json
getConfigJson(){
axios.get("serverconfig.json").then((result)=&{
console.log('read from json');
console.log(result);
}).catch((error)=&{console.log(error)});
入口main.js的时候，去调用一下这个getConfigJson(),算是把配置读到了。费了半天劲，就是为了可以在server端可以有个可以用记事本随时修改的serverConfig.json供自己和有同样需求的人参考。望有实际项目经验的分享下其它的方法。ps：自问：这个会不好不安全？把服务api的url的暴露出来了，浏览器地址只要请求这个json，配置岂不是都看到了？
自答：如果害怕暴露，觉得webpack封装起来比较安全，那浏览器调试时，随便看下http请求也就知道url了，没有费更多的精力，所以应该和安全不安全没啥关系，就是怕有写权限json被篡改了吧？
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 Appvue实现可增删查改的成绩单
作者：！win ！
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了vue实现可增删查改的成绩单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端变化层出不穷，去年NG火一片，今年react,vue火一片，ng硬着头皮看了几套教程，总被其中的概念绕晕，react是faceback出品，正在不断学习中，同时抽时间了解了vue,查看了vue官方文挡，看完格外入眼，总觉得要拿来试一试手。
正好周未，做一个小成绩单玩玩，以前有用avalon也做过一个类似的，从过程来看，二个框架都在避免开发者频繁操作dom,脱离dom苦海，安心处理数据业务逻辑，从二个示例来看，可以成倍的提高开发效率。
vue示例代码如下：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&vue成绩单&/title&
&style type="text/css"&
padding:0;
.report_card{
font-size:12
.report_card table{
width:100%;
border-collapse:
text-align:
.report_card caption{
font-size:14
text-align:
line-height:30
font-weight:
.report_card table th,.report_card table td{
border:1px solid #
.report_card table th{
background:#f8f8f8;
.report_card table td{
background:#f8f8f8;
width:100%;
line-height:32
.content input{
width:100%;
color:#999;
padding-left:10
-webkit-box-sizing:border-
box-sizing:border-
-webkit-animation:borderAn 2
animation:borderAn 2
.studyForm select{
.searchInput{
.searchButton{
@-webkit-keyframes borderAn{
border-color:
border-color:
@keyframes borderAn{
border-color:
border-color:
.studyForm{
margin:10px 0;
.studyForm input{
&div class="report_card" id="reportCard"&
&table class="studyForm"&
&caption&成绩录入/处理&/caption&
&td width="170"&学号:&input type="text" v-model="addArr.stuId"&&/td&
&td width="170"&姓名:&input type="text" v-model="addArr.name"&&/td&
&td width="170"&语文:&input type="text" v-model="addArr.ywScores"&&/td&
&td width="170"&数学:&input type="text" v-model="addArr.sxScores"&&/td&
&td colspan="2" width="120"&
&a href="javascript:void(0);" v-on:click="submitStu"&录入&/a&
&a href="javascript:void(0);" v-on:click="resetStu"&重置&/a&
&td align="left"&
搜索：&input v-model="searchTxt" type="text" class="searchInput"&
&select v-model='sortKey'&
&option value="ywScores"&语文&/option&
&option value="sxScores"&数学&/option&
排序类型：
&select v-model="sortClass"&
&option value="1"&升序&/option&
&option value="-1"&降序&/option&
&td colspan="3"&&/td&
&table class="scoreList"&
&caption&成绩列表&/caption&
&th width="170"&学号&/th&
&th width="170"&姓名&/th&
&th width="170"&语文&/th&
&th width="170"&数学&/th&
&th colspan="2" width="120"&操作&/th&
&tr v-for="item in studyArr | filterBy searchTxt | orderBy sortKey sortClass"&
&td&&div class="content"&{{item.stuId}}&input v-model="editArr.stuId" type="text" v-if="$index==nowEditCol"&&/div&&/td&
&td&&div class="content"&{{item.name}}&input v-model="editArr.name" type="text" v-if="$index==nowEditCol"&&/div&&/td&
&td&&div class="content"&{{item.ywScores}}&input v-model="editArr.ywScores" type="text" v-if="$index==nowEditCol"&&/div&&/td&
&td&&div class="content"&{{item.sxScores}}&input v-model="editArr.sxScores" type="text" v-if="$index==nowEditCol"&&/div&&/td&
&a href="javascript:void(0);" v-on:click="startEdit($index)" v-if="$index!=nowEditCol"&编辑&/a&
&a href="javascript:void(0);" v-on:click="cancelEdit" v-if="$index==nowEditCol"&取消&/a&
&a href="javascript:void(0);" v-on:click="sureEdit($index)" v-if="$index==nowEditCol"&确认&/a&
&td&&a href="javascript:void(0);" v-on:click="deleteStu($index)"&删除&/a&&/td&
&script type="text/javascript" src="vue.js"&&/script&
&script type="text/javascript"&
var studyArrJson=[
{'stuId':'stu0001','name':'张三','ywScores':85,'sxScores':90},
{'stuId':'stu0002','name':'李四','ywScores':88,'sxScores':85},
{'stuId':'stu0003','name':'王五','ywScores':65,'sxScores':75},
{'stuId':'stu0004','name':'刘六','ywScores':58,'sxScores':96}
var reportCardVm=new Vue({
el:'#reportCard',
studyArr:studyArrJson,//成绩花名册
addArr:{'stuId':'','name':'','ywScores':'','sxScores':''},//新增的表单字段
nowEditCol:-1,//当前编辑的行
editStatus:false,//当前是否在编辑状态
searchTxt:'',//搜索字段
sortKey:'ywScores',//排序健
sortClass:'1',//升降排序1为升,-1为降
//启动索引index数据编辑
startEdit:function(index){
this.nowEditCol=
//取消编辑状态
cancelEdit:function(){
this.nowEditCol=-1;
//启动索引index数据修改确认
sureEdit:function(index){
this.studyArr.$set(index,this.editArr);
this.nowEditCol=-1;
//删除索引index数据
deleteStu:function(index){
this.studyArr.splice(index,1);
//新增成绩
submitStu:function(){
var addArr={
'stuId':this.addArr.stuId,
'name':this.addArr.name,
'ywScores':this.addArr.ywScores,
'sxScores':this.addArr.sxScores
this.studyArr.push(addArr);
this.resetStu();
//复位新增表单
resetStu:function(){
this.addArr={
'stuId':'',
'name':'',
'ywScores':'',
'sxScores':''
computed:{
//存储当前编辑的对象
editArr:function(){
var editO=this.studyArr[this.nowEditCol];
'stuId':editO.stuId,
'name':editO.name,
'ywScores':editO.ywScores,
'sxScores':editO.sxScores
在线测试地址：/kavugufuci/edit?html,output
一个VUE对象就是一个view model,基本由下面几部分组成
其中data主动存放当前view的属性也就是在页面上能用来绑定的数据，methods主要用来存当前view model的方法，computed也是用来存当前view的属性的，只是它是计算属性，它的值可能由data里某一个值直接影响，相当于你修改了view里的data里的某一个值 ，它会自动跟着修改，就想当于ng里用$watch来实现的功能，当前vue也提示了$watch功能,但是用计算属性使用起来更快捷高效。
当前示例view model分析
这是当前的view model属性，如果数据要绑定到html上去，可响应的那都要在这一块初始定好，如果后续会用到的也要在初始的时候挂好位置，后期手动添加是不会起作用的，此项目各字段功能具体看文字注释。
这是此 view model的方法，可直接绑定到html上也可以内部以this.开头来调用，内部的this都是指向当前view model，可以调用当前view model上的所有属性跟方法，这里也是我们处理数据，书写业务逻辑的地方，此示例项目各方法功能具体看文字注释。
这里是计算属性，它的值由data下的nowEditCol来决定，相当于你写一个$watch方法在监听nowEditCol,但是此处vue内部帮你处理了，推荐在项目中使用。
当前项目使用view model方式，都是直接绑定在DOM元素上来做的，这也是热门的MVVM框架的模式.
我一直都有在了解vue跟avalon ,ng,react这方面的东东，但是考虑到切入速度跟入手难受，我首先选择的是vue,avalon,但是又由于vue的兼容，如果要使用vue就得放弃
安卓4.2以下的版本的原生浏览器，于是就开始使用avalon，用avalon 做过一些H5项目，但是由于avalon只是一个司徒正美个人项目总觉得在一些稳定性和未来发展上感觉
很难说，在跑很多测试案例的时候也发现一些BUG，当然在我做的那些项目还没有掉进avalon的大坑，但是avalon的兼容是值得称赞的，司徒正美应该是花费了很大精力，
如果你做的项目要兼容到非标准的浏览就如IE6-7-8，又想体验MVVM框架开发的高效的时候，avalon是你的首选。在目前兼容环境越来越好的情况，后期如果再接到H5的项目，
我会选择用vue来做做项目。
更多vue的学习了解，请查阅官方文挡：http://cn.vuejs.org/guide/，这也是你入手vue最佳地方。
本文已被整理到了《》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具