Vue单文件组件

单文件组件的组成结构

• tamplate 组建的模板区域
• script 业务逻辑区域
• style 样式区域

代码如下：

//建一个App.vue单文件
<template>

    组件代码区域

</template>

// js代码区域
<script>
export default {
	data() {
		return {};
	},
	methods:{}
};
</script>

//   样式代码区域
<style scoped> 
	// scoped 防止组件之间的样式冲突
 

</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

配置.vue文件的加载器

A.安装vue组件的加载器
    npm install vue-loader vue-template-compiler -D
B.配置规则：更改webpack.config.js的module中的rules数组
    const VueLoaderPlugin = require("vue-loader/lib/plugin");
    const vuePlugin = new VueLoaderPlugin();
    module.exports = {
        ......
        plugins:[ htmlPlugin, vuePlugin  ],
        module : {
            rules:[
                ...//其他规则
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",
                    

在webpack中使用vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue
并使用vue来引用vue单文件组件。

A.安装Vue
    npm install vue -S
B.在index.js中引入vue：
	import Vue from "vue"
C. 导入 App 单文件组件
	import App from './components/App/vue'
D.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件
    const vm = new Vue({
        el:"#app",
        render:h=>h(App)
    })

使用webpack打包发布项目

在项目上线之前，我们需要将整个项目打包并发布。

A.配置package.json
    "scripts":{
    	// 用于开发调试的命令
        "dev":"webpack-dev-server",
        //用于打包命令
        "build":"webpack -p"
    }
B.在项目打包之前，可以将dist目录删除，生成全新的dist目录
C. 在终端输入 npm run build