分享程序员开发的那些事...
更新时间：2023-02-25 19:23:31
欢迎使用Vue.js！是的，您是对的，您需要一些东西来将导入语句转换为浏览器可以处理的JavaScript.最受欢迎的工具是webpack和browserify.
Welcome to Vue.js development! Yes, you are correct, you need something to translate the import statements into JavaScript that the browsers can handle. The most popular tools are webpack and browserify.
您还使用了 .vue文件，转换(使用 vue-loader )之前，浏览器可以将其转换.我将介绍如何执行此操作，并设置webpack，这涉及几个步骤.首先，我们正在使用的HTML如下所示:
You are also using a .vue file, which needs to be converted (with vue-loader) before the browser can pick it up. I am going to lay out how to do this, and set up webpack, which involves a few steps. First, the HTML we're working with looks something like this:
<html>
<head>
</head>
<body>
<div class="container-fluid">
<div id="app">
{ { message } }
</div>
</div>
<script src="./dist.js"></script>
</body>
</html>
我们的目标是使用webpack将App.vue和app.js捆绑/编译为dist.js.这是一个webpack.config.js文件，可以帮助我们做到这一点:
Our goal is to use webpack to bundle / compile App.vue and app.js into dist.js. Here is a webpack.config.js file that can help us do that:
module.exports = {
entry: './app.js',
output: {
filename: 'dist.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
此配置说，从app.js开始，替换我们遇到的import语句，并将其捆绑到dist.js文件中.当webpack看到.vue文件时，请使用vue-loader模块来将其添加到dist.js."
This configuration says, "start in app.js, replace import statements as we come across them, and bundle it into a dist.js file. When webpack sees a .vue file, use the vue-loader module to add it to dist.js."
现在，我们需要安装可以实现此目的的工具/库.我建议使用npm，它随 Node.js 一起提供.安装npm后，可以将此package.json文件放在目录中:
Now we need to install the tools / libraries that can make this happen. I recommend using npm, which comes with Node.js. Once you have npm installed, you can put this package.json file in your directory:
{
"name": "getting-started",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {
"css-loader": "^0.28.7",
"vue": "^2.4.2",
"vue-loader": "^13.0.4",
"vue-resource": "^1.3.3",
"vue-router": "^2.7.0",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.5.5"
}
}
并执行以下操作:
npm install来获取所有软件包.npm run-script build通过webpack生成dist.js文件.npm install to get all of the packages.npm run-script build to generate your dist.js file via webpack.请注意，在此问题的示例中，router在app.js中未定义，但这是一个固定的文件:
Note in the example for this question, router is undefined in app.js, but here is a fixed-up file:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
var router = new VueRouter();
new Vue({
el: '#app',
router,
render: h => h(App),
data: {
message: 'Hello Vue! in About Page'
}
});
应该的！如果您有任何问题，请告诉我.
That should be it! Let me know if you have any questions.