3：Vue单文件组件

1.Vue单文件组件

• 传统Vue组件的缺陷：
  全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)
  没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）
• 解决方案：
  使用Vue单文件组件，每个单文件组件的后缀名都是.vue
  每一个Vue单文件组件都由三部分组成
  1).template组件组成的模板区域
  2).script组成的业务逻辑区域
  3).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",
                    
                }
            ]
        }
    }

2.在webpack中使用vue

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

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

3.使用webpack打包发布项目

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

a.配置package.json
    "scripts":{
        "dev":"webpack-dev-server",
        "build":"webpack -p"
    }
b,执行 npm run build 命令
c.在项目打包之前，可以将dist目录删除，生成全新的dist目录

小结：

实际开发中，打包Vue项目文件会比较复杂，此处只是简单概述打包步骤。

听闻远方有你，动身跋涉千里
下一篇：Vue脚手架