1.vue单文件组件
单文件组件的组成结构：
-
template组件的模板区域 -
script业务逻辑区域 -
style样式区域
eg:
<template>
<!-- 这里用于定义组件的模板内容 -->
</template>
<script>
// 这里用于定义组件的业务逻辑
export default {
data:()=>{}, //私有数据
methods:{} //处理函数
//其他业务逻辑
}
</script>
<style scoped>
/* 这里用于定义组件的样式 */
</style>
2.webpack中配置vue组件的配置
1.运行
npm i vue-loader vue-template-compiler -D
2.在 webpack.config.js 配置文件中，添加 vue-loader 配置：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//新增规则：
{ test: /\.vue$/, loader: 'vue-loader' }
//新增插件：
new VueLoaderPlugin()
// plugins:[htmlPlugin, new VueLoaderPlugin()],
3.在 webpack 项目中使用 vue
1.运行
npm i vue -S安装 vue
2.在 src -> index.js 入口文件中，通过import Vue from 'vue'来导入 vue 构造函数
3.创建 vue 的实例对象，并指定要控制的 el 区域
4.通过 render 函数渲染 App 根组件
//1.导入Vue构造函数
import Vue from 'vue'
//2.导入App根组件
import App from './components/App.vue'
const vm = new Vue({
//3.指定 vm 实例要控制的页面区域
el:'#app',
//4.通过 render 函数渲染 App 根组件
render: h => h(App)
})
4.webpack 打包发布
上线之前需要通过 webpack 应用进行整体打包，可以通过 package.json 文件配置命令：
// 在 package.json 文件中配置 webpack 打包命令
// 该命令默认加载项目根目录的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
//用于开发调试的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}
