Visual Studio中使用vue.js开发单页面程序

Vue.js是一个多功能的JavaScript框架,对构建ASP.NET Core Web应用程序的开发人员有很多好处。然而,开始使用这个框架并不容易,这篇文件就来介绍如何用Visual Studio开发一个基于Vue的Web应用程序。

前置准备
- Windows 10 Home
- Visual Studio 2017 v15.8.5
- Package Management (Node JS)
- Module Bundling (Webpack)
- NPM Task Runner
- Vue/Vue-router
- ASP.NET Core Web Routing

前言:本文中没有提供所有的源码,源码放在github,你可以自行下载学习,地址:https://github.com/iissy/vue-spa-in-visual-studio

1. 安装Visual Studio 2017
从官网可以下载最新的版本,最好下载企业版,然后从网上找个破解码。(没有破解的也不影响使用)

2. 安装Node JS
从网站:https://nodejs.org/,下载windows版本的安装包,安装后,执行下面命令是否安装成功
> node -v
> npm version

3. 安装Node包
Visual Studio 2017 会自动下载node包,新建一个文件package.json,内容如下,如果没有自动下载,也可以执行命令下载
> npm install

package.json文件包含内容,你也可以不用自己新建一个文件,我提供的源代码已经包含所涵盖的代码
{
"version": "1.0.0",
"name": "spademo",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --config App/Build/webpack.config.js",
"prod": "cross-env NODE_ENV=production webpack --config App/Build/webpack.config.js",
"watch": "cross-env NODE_ENV=watch webpack --config App/Build/webpack.config.js"
},
"devDependencies": {
"babel-core": "6.26.3",
"babel-loader": "7.1.5",
"babel-preset-es2015": "6.24.1",
"css-loader": "1.0.0",
"cross-env": "5.2.0",
"eslint": "5.5.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.1.0",
"file-save": "0.2.0",
"html-webpack-plugin": "3.2.0",
"path": "0.12.7",
"vue-loader": "15.4.1",
"vue-style-loader": "4.1.2",
"vue-template-compiler": "2.5.17",
"webpack": "4.17.2",
"webpack-cli": "3.1.0"
},
"dependencies": {
"vue": "2.5.17",
"vue-router": "3.0.1"
}
}

4. 安装NPM Task Runner
这个是用来执行npm命令的一个工具,是Visual Studio 2017的一个插件,可以如下图下载安装,安装完需要重启生效


5. 创建一个api项目


6. 添加相应的文件
这里我没有贴出所有源代码,我将源代码放在github上,地址:https://github.com/iissy/vue-spa-in-visual-studio


js/bundle.js文件为打包生成的文件,在生产环境中,这个是用hash名字,每次修改后再生成的名字会变化,而这个变化会自动在index.html引用中一起变化

修改Startup.cs,在Configure方法最前面添加如下代码,使得它支持前端路由匹配
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.Use(async (context, next) =>
{
await next();
var path = context.Request.Path.Value;
if (context.Response.StatusCode == 404 && !Path.HasExtension(path) && !path.StartsWith("/api"))
{
context.Request.Path = "/index.html";
await next();
}
});
app.UseStaticFiles();

......省略本身有的代码
}

7. 打包生成
上面我们介绍了NPM Task Runner,在这里我们可以用它来生成打包的js文件,右键dev,运行即可


我们也可以在build事件中执行命令来生成,npm run dev


还可以在命令行中执行,npm run dev


8. 测试


总结:这篇文章不是一篇vue的入门教程,也不是webpack的入门教程,但是你可以从这篇文章,对应vue,webpack学习入门,它给你一个活生生的可以执行的代码,标准化vue+visual studio的使用方式。
Posted by 何敏
on 2018/10/11 01:03:59
Copyright ©2018 程序员网址导航 粤ICP备14091834号