没有 vue-cli 的 Vue，在 express 服务器上运行
[英]Vue without vue-cli, run on an express server
问题描述
So Vue is quite interesting in that you do not need to use vue-cli to get it to work when not running on a server.
所以 Vue 非常有趣，因为你不需要使用 vue-cli 来让它在不在服务器上运行时工作。 I originally thought you did.我原本以为你会的。 On the vue installation page, https://v2.vuejs.org/v2/guide/installation.html , under CDN it says you can use a script.在 vue 安装页面https://v2.vuejs.org/v2/guide/installation.html ，在 CDN 下它说您可以使用脚本。 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> Note, this is for development only. <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>注意，这仅用于开发。 The script to use in production is: <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> This script refers to the specific build number, so it is unlikely to break with newer versions.在生产中使用的脚本是： <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>这个脚本是指具体的内部版本号，所以不太可能打破新版本。
HTML page: HTML页面：
<!DOCTYPE html>
<html>
<head>
<title> First app </title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="app">
<top :itemnumber="itemnumber"></holiday>
</div>
<script src="main.js"></script>
</body>
</html>
So this is a small HTML document, but the elements on the page can change depending on the data (which is quite cool).所以这是一个小的 HTML 文档，但是页面上的元素可以根据数据而变化（这很酷）。 In this example, at the bottom where var app is, you can change the number to 1, and it will change the image, the description and will add a 20% off element!在此示例中，在var app所在的底部，您可以将数字更改为 1，它将更改图像、描述并添加 20% 折扣元素！ Just by changing one number!只需更改一个数字！
You can also shorten javascript code too.您也可以缩短 javascript 代码。 Notice the v-for, which loops over the data so you don't need to have 2 list items in your HTML code for example (for when there are 2 pieces of data).请注意 v-for，它循环遍历数据，因此您不需要在 HTML 代码中包含 2 个列表项（例如，当有 2 条数据时）。 I know the template isn't nice to code because it's a HTML string, but it's great to know you can get it to work like this without running in command line.我知道这个模板不适合编码，因为它是一个 HTML 字符串，但是很高兴知道你可以让它像这样工作而无需在命令行中运行。 Notice that there is no stylesheet, so it won't be pretty.请注意，没有样式表，所以它不会很漂亮。 It's just for testing purposes.这只是为了测试目的。 You must put the images in an assets folder.您必须将图像放在资产文件夹中。
main.js file: main.js 文件：
Vue.component('top', {
props: {
itemnumber: {
type: Number,
required: true
}
},
template:
'<div class="top">'+
'<h1> The top you need </h1>' +
'<img :src="image" /> ' +
'<p> {{message}} </p>' +
'<p> Description: {{description}} </p>' +
'<p v-if="onOffer"> 20% OFF! </p>' +
'<p> Top Choices </p>' +
'<ul>' +
'<li v-for="top in tops" +
:key="top.top">{{top.top}} </li>' +
'</ul>' +
'</div>',
data() {
return {
message: "Cute tops make happy people.",
tops: [
{
topID: 72,
top: 'Green is the new black',
topImage: './assets/green.jpg',
description: 'Beautiful green vest top with a cute bow in the middle',
offer: false
},
{
topID: 55,
top: 'No peace in your life? Find it in this t-shirt',
topImage: './assets/blue.jpg',
description: 'Cute blue t-shirt with a geometric peace design',
offer: true
}
]
}
},
computed: {
image() {
return this.tops[this.topnumber].topImage;
},
description() {
return this.tops[this.topnumber].description;
},
onOffer() {
return this.tops[this.topnumber].offer;
}
}
});
var app = new Vue({
el: '#app',
data: {itemnumber: 1}
});
Now, what I would like to know is, how do you run this on express?现在，我想知道的是，你如何在 express 上运行它？
2 个解决方案
解决方案1
1 已采纳 2020-10-24 21:54:34
The webserver you use is immaterial.您使用的网络服务器无关紧要。 It's all client-side.这都是客户端。
Just use the static module to serve up the files as you would for any other client-side JS file and static HTML document.只需像处理任何其他客户端 JS 文件和静态 HTML 文档一样使用静态模块来提供文件。
解决方案2
-1 2020-10-24 22:02:37
You can run your server as normal.您可以正常运行您的服务器。 So, run npm install .所以，运行npm install 。 Set up your package.json (npm init) and in your server, use the express modules like static (which gets your files from the public folder) You can also use bodyParser (which lets you use the body of your requests through req.body).设置您的 package.json (npm init) 并在您的服务器中使用 express 模块，例如 static（从公共文件夹中获取您的文件）您还可以使用 bodyParser（它允许您通过 req.body 使用请求的正文）。 This is useful for using GET and POST requests.这对于使用 GET 和 POST 请求很有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.