极客观点
项目管理
HarmonyOS
webpack.config.js文件
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js|vue$/,
loader: 'eslint-loader',
// use: ['babel-loader', 'eslint-loader'],
enforce: 'pre',
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: true,
fix: true
},
include: [path.resolve(__dirname, 'src')]
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: { vue: 'vue/dist/vue.esm.js' }
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 9003,
overlay: { warnings: false, errors: true }
},
plugins: [
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
inject: 'true'
})
]
};
index.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
<script>
</script>
</html>src/index.js文件
import Vue from 'vue';
import main from './main.vue';
import demo from './demo.vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
var router = new VueRouter({
routes: [{
path: '/',
component: demo
}]
});
new Vue({
el: '#app',
router,
components: { main },
template: '<main/>'
});
mian.vue文件
<template>
<div>
<router-view></router-view>
<p>我是谁</p>
</div>
</template>
<script>
export default {
};
</script>运行代码之后，浏览器中的代码
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<main></main>
<script type="text/javascript" src="main.js"></script>
<script>
</script>
</body></html>没有渲染出来我是谁的代码这是为什么？？？