项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码
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'><App></App></div>
<!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 -->
<script src="./index.js"></script>
</body>
</html>
main.js
// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
// 渲染App组件中的内容，返回给index.html文件使用
render:function(creater){
return creater(App)
}
})
App.vue
<template>
<!-- 指定html显示内容 -->
<div>单文件组件</div>
</template>
<script>
// 指定js内容
// export default {
// }
</script>
<style>
/* 指定css内容 */
</style>
项目打包
文件编写完成后并不能直接运行index.html产生效果，需要对项目进行打包生成一个渲染后的index.js文件进行使用
npm run build
打包后会在当前目录下生成一个index.js 文件，在index.html中引用该文件，运行index.html文件看到效果
项目调试运行
每次我们需要看到组件效果需要手动生成一个index.js文件，这是我们可以借助webpack-dev-server自动运行我们的代码 【用下面的服务来调试代码】
// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码
./node_modules/.bin/webpack-dev-server
