原視頻地址

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'來導(dǎo)入 vue 構(gòu)造函數(shù)
3.創(chuàng)建 vue 的實例對象，并指定要控制的 el 區(qū)域
4.通過 render 函數(shù)渲染 App 根組件

//1.導(dǎo)入Vue構(gòu)造函數(shù)
import Vue from 'vue'

//2.導(dǎo)入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 應(yīng)用進(jìn)行整體打包，可以通過 package.json 文件配置命令：

// 在 package.json 文件中配置 webpack 打包命令
// 該命令默認(rèn)加載項目根目錄的 webpack.config.js 配置文件
"scripts": {
    // 用于打包的命令
    "build": "webpack -p",
    //用于開發(fā)調(diào)試的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}