单文件组件的使用

项目搭建完成后需要分别对 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