个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
我已经花了 2 天时间对此进行试验，到目前为止还没有取得任何进展。我有一个非常基本的 ASP.NET Core 网站，为 Typescript 2.9 配置。我希望我的前端非常简单，每个页面只有一个 vue 应用程序，没有复杂的构建系统或组件。
我希望获得某种最低限度的配置。这是我当前的 tsconfig.json 文件:
{
"compilerOptions": {
"declaration": true,
"mapRoot": "/js/",
"module": "esnext",
"removeComments": true,
"sourceMap": true,
"target": "esnext"
},
"compileOnSave": true
}
(注意，我已经尝试过 es6、es5 模块，但都没有)
然后，在我的 wwwroot/js 文件夹中，我有 Site.ts，如下所示:
import { Vue } from "./types/vue";
var _mixin: any;
var _vue = new Vue({
el: '#vueheader',
mixins: [_mixin],
data: {
},
methods: {},
mounted: function () {
},
});
在 wwwroot/js/types 文件夹中，我有来自 vue 的 5 个 d.ts 文件，以及 vue.js 文件。 typescript 正确编译成一个 js 文件，但是当我访问主页时，我在 chrome 中收到错误提示“404，找不到文件/types/vue”
这里是编译后的 Site.js:
import { Vue } from "./types/vue";
var _mixin;
var _vue = new Vue({
el: '#vueheader',
mixins: [_mixin],
data: {},
methods: {},
mounted: function () {
},
});
//# sourceMappingURL=/js/Site.js.map
我的 html 有这个链接:
有人有什么想法吗？请不要让我使用像 webpack 这样复杂的构建系统。我不想让 600 多个依赖项使我的构建过程变得臃肿。
最佳答案
这实际上非常简单!我基于我的第一个使用 Require.js 的 Vue TodoMVC 风格的应用程序。您可以为自己的项目进行推断。
最简单的方法是使用不需要捆绑的加载程序，例如 Require.js 或 System.js - 您所要做的就是使用 TypeScript 进行编译。
因为我使用的是 Require.js 和 Vue，所以这是我的 package.json
{
"name": "vue-tutorial",
"version": "1.0.0",
"dependencies": {
"@types/requirejs": "^2.1.28",
"vue": "^2.1.4"
}
}
接下来，我要添加一个tsconfig.json
{
"compilerOptions": {
"outFile": "./built/app.js",
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"module": "amd",
"moduleResolution": "node",
"esModuleInterop": true,
"lib": [
"dom", "es2015"
],
"types": [
"requirejs"
]
},
"include": [
"src"
]
}
让我们分解一下:
outFile:TypeScript 会有效地将您的源代码打包到一个文件中(但不是它的依赖项!)。noImplicitAny、strictNullChecks、noImplicitThis:只是一些特定的 --strict 选项我强烈建议你打开至少。module: amd:AMD 是 Require.js 可以理解的模块格式。moduleResolution: node:这使得 TypeScript 可以轻松地从 node_modules 中获取 .d.ts 文件。esModuleInterop:这允许我们使用现代语法导入 Vue。lib:指定您希望在运行时拥有的标准 API。types:.d.ts 文件用于我们不一定要导入的库；我们不导入 Require.js，因为我们希望它在全局范围内可用。现在我们的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Vue!</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/requirejs@2.3.5/require.js"></script>
<script src="./built/app.js"></script>
</body>
</html>
让我们在 src/components/GreetingComponent.ts 中创建我们的第一个组件:
import Vue from "vue";
export default Vue.extend({
template: `<div>Hello {{name}}!</div>`,
props: ["name"],
});
接下来，让我们创建一个index.ts:
import Vue from "vue";
import GreetingComponent from "./components/GreetingComponent";
new Vue({
el: "#app",
template: `<greeting-component name="Steve"></greeting-component>`,
components: {
GreetingComponent
}
});
最后让我们创建一个 Bootstrap 来实际导入您的 require-config.ts:
require.config({
paths: {
// JS library dependencies go here.
// We're using a CDN but you can point to your own assets.
"vue": "https://unpkg.com/vue@2.5.16/dist/vue",
}
});
require(["index"]);
解释:
paths 将告诉 Require.js 在您使用裸路径导入 Vue 和其他库时在哪里寻找它们。您可以自定义 Require.js 将在何处找到 Vue，但请记住您必须省略 URL 末尾的 .js。require 将加载您的 index 模块以启动您的程序。运行 tsc，打开 index.html，一切正常!
关于typescript - 如何在没有复杂构建系统的情况下将 Vue 与 Typescript 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50649516/
24
4
0
我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam
在下面的场景中，我有一个 bool 值。根据结果，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。 使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
这可能是一个哲学问题。 假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两
我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。 我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa
我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。 向 https://XXXX.com/AHSharedServices/Custome
在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。 这是我的 S
如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
我使用 indexOf() 方法来精细地查找数组中的对象。 直到此刻我查了一些资料，发现代码应该无法正常工作。 我在reducer中尝试了上面的代码，它成功了 let tmp = state.find
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in
我是一名优秀的程序员,十分优秀！