前言
如果一开始就用vue-cli来跑一个vue项目，那么具体.vue文件为什么可以在浏览器中正常的运行起来可能不是很清楚，下面将会一步一步的介绍一个.vue文件怎么在浏览器中运行起来。
项目结构
搭建步骤
首先创建一个webpack.config.js，里面的配置内容主要是
将入口文件index.js编译到dist下的bundle.js
对.vue文件预编译和es6转es5的预编译支持
const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry:'./index.js',
output:{
filename:'bundle.js',
path:__dirname+'/dist'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.vue$/,
loader: 'vue-loader',
}
]
},
plugins:[
new VueLoaderPlugin()
]
};
这个时候你的开发环境需要安装的依赖包为
npm i babel-loader babel-core vue-loader vue-template-compiler webpack -D
注意：这样默认安装的babel-loader为最新的版本@8，会报错的，需要指定安装
npm i babel-loader@7 -D
单文件组件命名为App.vue，创建一个App.vue
<template>
<div>
<h1>Hello</h1>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
</style>
接着创建index.js，该文件是入口文件，里面引入vue和App.vue，如果没有安装vue，请
npm i vue -S
import Vue from 'vue';
import App from './App.vue';
new Vue({ el:'#app', render:h=>h(App), });
然后执行webpack命令，则会在项目目录下生成一个dist文件夹，里面生成了一个bundle.js
webpack index.js
最后创建一个index.html，里面引入编译生成的bundle.js，通过在浏览器中运行index.html看看运行效果，是否将App.vue中的内容正常渲染：
<!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>Vue单文件测试</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
