如何使用vs2017进行html开发,VS2017开发vue单页应用

我正在学vue开发,想用VS开发一个单页应用,按照网上的提示配置好了,但是始终无法运行起来,主要有以下两点:

在main.js中使用了import Vue from 'vue',但是实际运行时提示 import 错误

bVXdc7?w=1246&h=749

无法安装npm包,一直都提示错误

package.json文件:

{

"name": "simple",

"version": "1.0.0",

"main": "main.js",

"dependencies": {

"axios": "^0.15.3",

"echarts": "^3.3.2",

"element-ui": "^1.2.8",

"font-awesome": "^4.7.0",

"nprogress": "^0.2.0",

"vue": "^2.2.2",

"vue-router": "^2.3.0",

"vuex": "^2.0.0-rc.6"

},

"devDependencies": {

"autoprefixer": "^6.7.2",

"axios-mock-adapter": "^1.7.1",

"babel-core": "^6.22.1",

"babel-loader": "^6.2.10",

"babel-plugin-transform-runtime": "^6.22.0",

"babel-polyfill": "^6.16.0",

"babel-preset-env": "^1.2.1",

"babel-preset-es2015": "^6.0.0",

"babel-preset-stage-2": "^6.22.0",

"babel-register": "^6.22.0",

"chalk": "^1.1.3",

"connect-history-api-fallback": "^1.3.0",

"copy-webpack-plugin": "^4.0.1",

"css-loader": "^0.26.1",

"eventsource-polyfill": "^0.9.6",

"express": "^4.14.1",

"extract-text-webpack-plugin": "^2.0.0",

"file-loader": "^0.10.0",

"friendly-errors-webpack-plugin": "^1.1.3",

"function-bind": "^1.0.2",

"html-webpack-plugin": "^2.28.0",

"http-proxy-middleware": "^0.17.3",

"json-loader": "^0.5.4",

"node-sass": "^4.5.0",

"opn": "^4.0.2",

"optimize-css-assets-webpack-plugin": "^1.3.0",

"ora": "^1.0.0",

"rimraf": "^2.6.0",

"sass-loader": "^6.0.0",

"semver": "^5.3.0",

"shelljs": "^0.7.6",

"style-loader": "^0.18.1",

"url-loader": "^0.5.8",

"vue-loader": "^11.1.4",

"vue-resource": "^1.3.3",

"vue-style-loader": "^2.0.0",

"vue-template-compiler": "^2.2.4",

"webpack": "^2.2.1",

"webpack-bundle-analyzer": "^2.2.1",

"webpack-dev-middleware": "^1.10.0",

"webpack-hot-middleware": "^2.16.1",

"webpack-merge": "^2.6.1"

},

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack"

},

"keywords": [],

"author": "",

"license": "ISC",

"description": "",

"-vs-binding": { "BeforeBuild": [ "build" ] }

}

bVXdeF?w=1279&h=425

log日志信息:

0 info it worked if it ends with ok

1 verbose cli [ 'D:\\VS2017\\Web\\External\\Node.exe',

1 verbose cli 'D:\\VS2017\\Web\\External\\node_modules\\npm\\bin\\npm-cli.js',

1 verbose cli 'run',

1 verbose cli 'build',

1 verbose cli '--color=always' ]

2 info using npm@3.3.4

3 info using node@v5.4.1

4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]

5 info lifecycle simple@1.0.0~prebuild: simple@1.0.0

6 silly lifecycle simple@1.0.0~prebuild: no script for prebuild, continuing

7 info lifecycle simple@1.0.0~build: simple@1.0.0

8 verbose lifecycle simple@1.0.0~build: unsafe-perm in lifecycle true

9 verbose lifecycle simple@1.0.0~build: PATH: D:\VS2017\Web\External\node_modules\npm\bin\node-gyp-bin;E:\Temporary\WebApplication4\WebApplication4\node_modules\.bin;.\node_modules\.bin;D:\VS2017\Web\External;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;D:\TortoiseSVN\bin;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies\;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\MySQL\MySQL Utilities 1.6\;D:\Java\jdk1.8.0_131\bin;C:\Program Files\dotnet\;D:\nodejs\;C:\Users\v_zwenzhou\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\v_zwenzhou\AppData\Local\Programs\Python\Python36-32\;C:\Users\v_zwenzhou\AppData\Roaming\npm;D:\VS2017\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\cmd;D:\VS2017\Common7\IDE\CommonExtensions\Microsoft\TeamFoundation\Team Explorer\Git\mingw32\bin;D:\nodejs;C:\Users\v_zwenzhou\AppData\Roaming\npm

10 verbose lifecycle simple@1.0.0~build: CWD: E:\Temporary\WebApplication4\WebApplication4

11 silly lifecycle simple@1.0.0~build: Args: [ '/d /s /c', 'webpack' ]

12 silly lifecycle simple@1.0.0~build: Returned: code: 1 signal: null

13 info lifecycle simple@1.0.0~build: Failed to exec build script

14 verbose stack Error: simple@1.0.0 build: `webpack`

14 verbose stack Exit status 1

14 verbose stack at EventEmitter. (D:\VS2017\Web\External\node_modules\npm\lib\utils\lifecycle.js:233:16)

14 verbose stack at emitTwo (events.js:87:13)

14 verbose stack at EventEmitter.emit (events.js:172:7)

14 verbose stack at ChildProcess. (D:\VS2017\Web\External\node_modules\npm\lib\utils\spawn.js:24:14)

14 verbose stack at emitTwo (events.js:87:13)

14 verbose stack at ChildProcess.emit (events.js:172:7)

14 verbose stack at maybeClose (internal/child_process.js:821:16)

14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)

15 verbose pkgid simple@1.0.0

16 verbose cwd E:\Temporary\WebApplication4\WebApplication4

17 error Windows_NT 6.1.7601

18 error argv "D:\\VS2017\\Web\\External\\Node.exe" "D:\\VS2017\\Web\\External\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" "--color=always"

19 error node v5.4.1

20 error npm v3.3.4

21 error code ELIFECYCLE

22 error simple@1.0.0 build: `webpack`

22 error Exit status 1

23 error Failed at the simple@1.0.0 build script 'webpack'.

23 error This is most likely a problem with the simple package,

23 error not with npm itself.

23 error Tell the author that this fails on your system:

23 error webpack

23 error You can get their info via:

23 error npm owner ls simple

23 error There is likely additional logging output above.

24 verbose exit [ 1, true ]

webpack.config.js

var path = require('path')

var utils = require('./utils')

var webpack = require('webpack')

var conf = require('./app.conf')

function resolve(dir) {

return path.join(__dirname, dir)

}

module.exports = {

entry: {

app: './wwwroot/main.js'

},

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, './wwwroot/dist/')

},

module: {

rules: [

{

test: /\.vue$/,

loader: 'vue-loader'

},

{

test: /\.js$/,

loader: 'babel-loader',

include: [resolve('wwwroot')]

},

{

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: utils.assetsPath('img/[name].[hash:7].[ext]'),

options: {

publicPath: 'dist/resources/img/'

}

}

},

{

test: /\.css$/,

loader: 'style-loader!css-loader'

},

{

test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader: 'file-loader',

options: {

publicPath: 'dist/'

}

},

]

},

resolve: {

extensions: ['.js', '.vue', '.json'],

}

};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/426870.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++语言取整为什么要加0.5_c++ 取整:四舍五入 向上取整 向下取整

AngularJS 脏检查深入分析写在开头 关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比较,所以非常损耗性能. 这是大错而特错的.我甚至在新浪前端面试的时 ...python安装MySQLdb驱动安装了好几次了,索性几个笔记吧,经…

实例29:python

#题目:给一个不多于5位的正整数,要求:一、求它是几位数,二、逆序打印出各位数字 #!/usr/bin/python -- coding: UTF-8 -- x int(input(“请输入一个数:\n”)) a x / 10000 b x % 10000 / 1000 c x % 1000 / 100 d x % 100…

java中的Sort函数,你值得看

基于C语言中的sort如此这么方便,自然而然,java中也有类似C的sort函数。 1.普通数组:Arrays.sort(数组名,开始位置,结束位置)。 2.类中属性排序: 模板: class A { int n; } class cmp implement …

2021届定远三中高考成绩查询,定远各中学高考喜报!

原标题:定远各中学高考喜报!关注定远2019年高考实现多项新突破本科达线人数较上年增加340人(点击看大图)砥砺前行新时代,定远教育写华章。6月23日,全县人民高度关注的2019年高考成绩揭晓。我县教体系统广大师生不负众望&#xff0…

实例30:python

#一个5位数,判断它是不是回文数。即12321是回文数, #个位与万位相同,十位与千位相同。 x int(input(‘输入一个五位数:’)) a int(x / 10000) b int(x % 10000 / 1000) c int(x % 1000 / 100) d int(x % 100 / 10) e int(x …

休眠后gpio状态_1.Linux电源管理-休眠与唤醒

1.休眠方式在内核中,休眠方式有很多种,可以通过下面命令查看常用的休眠方式有freeze,standby, mem, diskfreeze:冻结I/O设备,将它们置于低功耗状态,使处理器进入空闲状态,唤醒最快,耗电比其它standby, mem, disk方式高standby:除了冻结I/O设备外,还会暂停系统,唤醒较快,耗电比其…

变换之时钟实现

为了更好的利用学过的知识&#xff0c;扎实一下知识&#xff0c;也方便日后的复习&#xff0c;则需要做一些东西热身热身一下 以下是实现的代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title>…

计算机用户名登陆管理员权限,关于win10勿删用户账号下管理员身份导致无法登录系统的问题...

我昨天在控制面板-用户-管理计算机内置账户&#xff0c;在“Zhao Yikang”用户名(另外还有administrator用户&#xff0c;名我没动)属性里面&#xff0c;“隶属于”那个界面里面&#xff0c;删除了administrator账户&#xff0c;同时还保留有一个user账户没动没删。之后重启电脑…

实例31:python

#题目&#xff1a;请输入星期几的第一个字母来判断一下是星期几 #!/usr/bin/python -- coding: UTF-8 -- letter input(“please input:”) #while letter ! ‘Y’: if letter ‘S’: print (‘please input second letter:’) letter input(“please input:”) if lette…

python聚类分析结果很差_python中的聚类分析:value错误:x和y的大小必须相同

我尝试了以下代码&#xff0c;但在执行时&#xff0c;显示以下错误&#xff1a;(ValueError: x and y must be the same size)代码&#xff1a;import pandas as pdimport matplotlib.pyplot as pltfrom sklearn.preprocessing import StandardScalerfrom sklearn.cluster impo…

实例32:python

#按相反的顺序输出列表的值。 #!/usr/bin/python -- coding: UTF-8 -- a [‘one’, ‘two’, ‘three’] for i in a[::-1]: print (i)

整样运用计算机考试,2017年9月计算机二级考试《MS Office高级应用》上机操作题(2)...

字处理题12012级企业管理专业的林楚楠同学选修了“供应链管理”课程&#xff0c;并撰写了题目为“供应链中的库存管理研究”的课程论文。论文的排版和参考文献还需要进一步修改&#xff0c;根据以下要求&#xff0c;帮助林楚楠对论文进行完善。(1)在考生文件夹下&#xff0c;将…

mysql search yum_CentOS 7 yum安装配置mysql

首先去官网下载要用的yum源传送门&#xff1a;http://dev.mysql.com/downloads/repo/yum/yum源文件&#xff1a;/home/mysql57-community-release-el7-8.noarch.rpm是一个rpm包&#xff0c;如果是Gnome&#xff0c;可以选择centos7的软件包安装程序安装即可。也可以用命令的方式…

Django缓存和内置信号

缓存 简单概括就是将对数据库操作查询所得到的数据放入另外一台机器上(缓存)中&#xff0c;当用户再次请求时&#xff0c;直接去缓存中拿&#xff0c;避免对数据库的频繁操作&#xff0c;加快数据的显示时间&#xff0c;需要知道的是&#xff0c;缓存里面的数据一般都设置有超时…

实例33:python

#题目&#xff1a;按逗号分隔列表。 #!/usr/bin/python -- coding: UTF-8 -- L [1,2,3,4,5] s1 ‘,’.join(str(n) for n in L) print (s1)

大工19春计算机文化基础在线测试1,大工19春《计算机文化基础》在线测试1(含答案)...

1.[单选题]第四代计算机所采用的主要逻辑元件是( )。奥鹏作业答案奥鹏大连理工大学作业A.晶体管B.小规模集成电路C.电子管D.大规模和超大规模集成电路正确答案:——D——2.[单选题]二进制数11111010所对应的十进制数是( )。A.250B.252C.253D.255正确答案:——A——3.[单选题]下…

f2 柱状图滚动 钉钉小程序_详解钉钉小程序组件之自定义模态框(弹窗封装实现)...

背景开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个…效果大概长这个样点击指定按钮&#xff0c;弹出模态框&#xff0c;里面的内容可以自定义&#xff0c;可以是简单的文字提示&#xff0c;也可以输入框等复杂布局。操作完点击取消或确定关闭。开始封装上图所示文件…

Python List reverse()方法

描述 reverse() 函数用于反向列表中元素。 语法 reverse()方法语法&#xff1a; list.reverse() 参数 • NA。 返回值 该方法没有返回值&#xff0c;但是会对列表的元素进行反向排序。 实例 以下实例展示了 reverse()函数的使用方法&#xff1a; #!/usr/bin/python aList [12…

你的第一个Django程序

本文使用Pycharm、Django 2.0.9、Python 3.6环境&#xff0c;本文大纲 建立Django项目建立页面什么是URLconf和ROOT_URLCONFDjango怎么处理URL请求关于URL尾部的“/” 反斜线1. 建立一个Django项目 Application name如果填写会自动帮你建立一个APP&#xff0c;而且APP是必须的&…

闪电对计算机或网络设备的威胁,计算机网络的雷电防护_计算机网络

摘?要 雷电对计算机网络稳定性造成了很多的危害。雷电主要通过电源线、网络线和接地反击的途径来侵入设备&#xff0c;造成设备损坏。如何来确保设备的安全&#xff0c;本文从网络系统的防护、网络线路的防护、及其防雷工程中需要特别考虑过电压防护几个方面提出了防护措施。关…