vue单文件组件

1.传统组件的问题和解决方案

（1）问题

• 全局定义的组件必须保证组件的名称不重复
• 字符串的语法缺乏高亮，在HTML有多行的时候，需要用到丑陋的‘\’
• 不支持CSS
• 没有构建步骤限制，只能使用HTML和ES5,不能使用babel之类的预处理器

（2）解决方案

针对传统组件的问题，Vue提供了一个解决方案---使用Vue单文件组件

2.Vue单文件组件的基本用法

单文件组件的组成结构：

template   组件的模板区域

script   业务逻辑区域

style   样式区域

3.webpack中配置vue组件的加载器

1.运行：npm i vue-loader vue-template-compiler -D

2.在webpack.config.js文件中，添加vue-loader配置如下：

4.在webpack中使用vue

1.运行 npm i vue -S 安装 vue

2.在src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入vue构造函数

3.创建vue的实例对象，并制定要控制的el区域

4.通过render函数渲染App根组件

import Vue from 'vue'
import App from './components/App.vue'

const vm = new Vue({
    el:'#app',
    // 用render渲染指定的组件
    render: h => h(App)
})

5.webpack打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令

添加完build后，删除dist文件，运行命令 npm run build ，这时候你会发现dist目录被打包生成了

webpack.config.js:

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
    template:'./src/index.html',
    filename:'index.html'
})
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: 'development',
    // 上线时要将development改为production
    entry: path.join(__dirname,'./src/index.js'),//输入文件存放路径
    output: {
        path: path.join(__dirname,'./dist/'),//输出文件存放路径
        filename: 'bundle.js'//输出文件的名称
    },
    plugins:[htmlPlugin,new VueLoaderPlugin()],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=16941'},
            {test:/\.js$/,use:'babel-loader', exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'}
           ]
          }
}