1.vue單文件組件
單文件組件的組成結(jié)構(gòu)：
-
template組件的模板區(qū)域 -
script業(yè)務(wù)邏輯區(qū)域 -
style樣式區(qū)域
eg:
<template>
<!-- 這里用于定義組件的模板內(nèi)容 -->
</template>
<script>
// 這里用于定義組件的業(yè)務(wù)邏輯
export default {
data:()=>{}, //私有數(shù)據(jù)
methods:{} //處理函數(shù)
//其他業(yè)務(wù)邏輯
}
</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')
//新增規(guī)則：
{ 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 構(gòu)造函數(shù)
3.創(chuàng)建 vue 的實例對象焚刺，并指定要控制的 el 區(qū)域
4.通過 render 函數(shù)渲染 App 根組件
//1.導入Vue構(gòu)造函數(shù)
import Vue from 'vue'
//2.導入App根組件
import App from './components/App.vue'
const vm = new Vue({
//3.指定 vm 實例要控制的頁面區(qū)域
el:'#app',
//4.通過 render 函數(shù)渲染 App 根組件
render: h => h(App)
})
4.webpack 打包發(fā)布
上線之前需要通過 webpack 應用進行整體打包渡贾，可以通過 package.json 文件配置命令：
// 在 package.json 文件中配置 webpack 打包命令
// 該命令默認加載項目根目錄的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
//用于開發(fā)調(diào)試的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}
