webpack+vue.js快速入门教程
本教程旨在介绍如何在项目中使用 webpack 和 Vue.js。本教程假设你已经了解如何使用基本的 HTML、CSS 和 JavaScript。
1. 安装 Node.js 和 npm
Node.js 和 npm 是安装和使用 webpack 的必要条件。
安装 Node.js 和 npm，请参考官方文档：https://nodejs.org/en/download/
2. 初始化项目
使用 npm 初始化项目。
npm init
这将提示您输入一些关于项目的信息，例如项目名称和描述。
3. 安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
4. 创建 Vue.js 应用
可以使用 Vue.js 官方提供的脚手架（Vue CLI），也可以手动创建 Vue.js 应用。
使用 Vue CLI 创建应用
npm install -g @vue/cli
vue create my-app
手动创建应用
创建一个 index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js App</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="main.js"></script>
</body>
</html>
创建一个 main.js 文件：
import Vue from 'vue'
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
5. 配置 webpack
在项目根目录下创建一个 webpack.config.js 文件：
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
这将指定 webpack 从 src/main.js 文件开始查找依赖项，并将生成的 bundle.js 文件输出到 dist 文件夹中。
6. 运行开发服务器
npm install webpack-dev-server --save-dev
在 package.json 文件中添加一个命令：
"scripts": {
"dev": "webpack-dev-server --mode development"
}
运行开发服务器：
npm run dev
现在，访问 http://localhost:8080，应该可以看到 Vue.js 应用的输出。
示例说明1
使用 Vue CLI 创建的应用中，默认已经配置了 webpack，只需运行命令 npm run serve 即可启动开发服务器，并访问 http://localhost:8080 查看应用。
示例说明2
可以使用 vue-loader 来编译 .vue 单文件组件。在 webpack.config.js 文件中添加以下配置：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
现在，您可以在应用中使用 .vue 单文件组件来组织代码和样式。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue.js!'
}
}
}
</script>
<style>
div {
color: blue;
}
</style>
可以使用 vue-template-compiler 来编译 .vue 单文件组件中的模板。编写一个简单的 webpack loader：
const compiler = require('vue-template-compiler')
module.exports = function (source) {
const { template } = compiler.parseComponent(source)
const { render } = compiler.compile(template, {
modules: [{ transformNode }]
})
return render
}
function transformNode(node) {
if (node.tag === 'div') {
node.attrs.push({ name: 'style', value: 'color: blue;' })
}
}
在 webpack.config.js 中配置：
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
use: [
'vue-loader',
{
loader: 'vue-template-loader',
options: {
scoped: true
}
}
]
}
]
}
}
现在，我们得到了一个使用 webpack 和 Vue.js 构建的应用程序，并且可以使用单文件组件来组织代码和样式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：webpack+vue.js快速入门教程 - Python技术站
微信扫一扫 
支付宝扫一扫 