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

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

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

无法安装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" ] }

}

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'],

}

};