155Vue工程化-webpack、Vue单文件组件+代码高亮+在webpack中使用vue+打包发布+脚手架vueui+opentrue自动打开浏览器+elementui+端口设置vue.confi

vue-cli和webpack是什么关系：vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则
webpack的vue是阉割版的，需要用vueloader打包.vue组件结合render渲染【在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现】

12.Vue单文件组件

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

代码如下：

<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>

    样式代码区域

</style>

import $ from 'jquery'
import './css/1.css'
import './css/1.less'
import './css/1.scss'

$(function() {
   
  $('li:odd').css('backgroundColor'