回顧

我們是如何在網(wǎng)頁中使用vue的呢
1.使用script引入vue包
2.在index中創(chuàng)建一個(gè)id為app的div容器
3.new一個(gè)Vue實(shí)例

在webpack中嘗試使用Vue

image.png

在main.js中引入vue模塊

// 注意：這里導(dǎo)入的Vue功能不完整，并沒有提供像網(wǎng)頁中使用那樣的全部功能
import Vue from 'vue'

var vm = new Vue({
    el : '#app',
    data : {
        msg : 'testMsg'
    }
})

我們cnpm run dev運(yùn)行項(xiàng)目，頁面會(huì)報(bào)錯(cuò)，因?yàn)檫@里導(dǎo)入的Vue不是完整文件
解決方式：
在webpack.config.js中進(jìn)行配置（推薦）

    resolve: { 
        alias: {
          'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
        }
    }

或者在main.js中

import Vue from '../node_modules/vue/dist/vue.js'

再或者在node-modules中vue中修改package.json中的main屬性為dist/vue.js

運(yùn)行cnpm run dev進(jìn)行測試

單文件組件的應(yīng)用

比如我們想在index.html中渲染一個(gè)簡單的組件

新建vue文件,這個(gè)文件本身就代表一個(gè)組件，它包含template,script,style三個(gè)部分

image.png

login.vue

<template>
    <div>
        <h1>這是login單文件組件</h1>
    </div>
</template>

<script>
    
</script>

<style>
    
</style>

在main.js中導(dǎo)入這個(gè)組件

import Vue from 'vue'
// 導(dǎo)入login組件
import login from './login.vue'

var vm = new Vue({
    el : '#app',
    data : {
        msg : 'testMsg'
    },
    // 注意：這里不要使用components注冊組件，選擇使用render函數(shù)
   // 注意 ：這里不能使用以前那種components的注冊方式，要使用render函數(shù)進(jìn)行渲染
    render : c => c(login)
})

cnpm i vue -S將vue安裝為運(yùn)行依賴
cnpm i vue-loader vue-template-compiler -D將解析轉(zhuǎn)換vue的包安裝為開發(fā)依賴
cnpm i style-loader css-loader -D將解析轉(zhuǎn)換CSS的包安裝為開發(fā)依賴，因?yàn)?vue文件中會(huì)寫CSS樣式
在webpack.config.js中，添加如下module規(guī)則：

// 導(dǎo)入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// module添加文件的匹配規(guī)則
{ test: /\.vue$/, use: 'vue-loader' },
// plugins添加plugins節(jié)點(diǎn)配置插件
new VueLoaderPlugin(),

如下：

// 導(dǎo)入處理路徑的模塊
var path = require('path');
// 導(dǎo)入自動(dòng)生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
// 導(dǎo)入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 導(dǎo)出一個(gè)配置對象，將來webpack在啟動(dòng)的時(shí)候，會(huì)默認(rèn)來查找webpack.config.js，并讀取這個(gè)文件中導(dǎo)出的配置對象，來進(jìn)行打包處理
module.exports = {
    entry: path.resolve(__dirname, 'src/main.js'), // 項(xiàng)目入口文件
    output: { // 配置輸出選項(xiàng)
        path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
        filename: 'bundle.js' // 配置輸出的文件名
    },
    plugins:[ // 添加plugins節(jié)點(diǎn)配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路徑
            filename:'index.html'//自動(dòng)生成的HTML文件的名稱
        }),
        new VueLoaderPlugin(),
    ],
    module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規(guī)則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//處理css文件的規(guī)則
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.(png|jpg|gif)$/, use: 'url-loader' },
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    },
    resolve: { 
        alias: {
          'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
        }
    }
}

運(yùn)行cnpm run dev運(yùn)行看到效果

小結(jié)在webpack中如何使用 vue ：

1.安裝 vue 包 ： cnpm i vue -S
2.由于在webpack中推薦使用.vue組件模板文件定義組件，所以，需要安裝能解析這種文件的loader : cnpm i vue-loader vue-template-compiler -D
3.在main.js中，導(dǎo)入vue模塊 ：import Vue from 'vue'
4.在webpack.config.js中導(dǎo)入vueloader的配置信息
5.定義一個(gè).vue結(jié)尾的組件，三部分構(gòu)成template,style,script
6.在main.js中，導(dǎo)入組件模塊 ：import login from './login.vue'
7.創(chuàng)建vm實(shí)例,渲染組件

var vm = new Vue({
    el : '#app',
    data : {
        msg : 'testMsg'
    },
    // 注意：這里不要使用components注冊組件，選擇使用render函數(shù)
    render : c => c(login)
})

8.在index.html中創(chuàng)建一個(gè)id為app的div元素，作為vm實(shí)例的掛在元素

vue組件文件中如何定義自己的數(shù)據(jù)

login.vue

<template>
    <div>
        <h1>這是login單文件組件 -- {{msg}}</h1>
    </div>
</template>

<script>
    export default { // 組件中的data必須是一個(gè)function
        data() {
            return {
                msg : '123'
            }
        },
        methods : {
            show(){
                console.log("調(diào)用了 login.vue 的show方法");
            }
        }
    }
</script>

<style>
    
</style>

運(yùn)行cnpm run dev查看結(jié)果
在es6中使用export default 和 export 向外暴露成員
export default向外只能暴露一個(gè)成員,導(dǎo)入時(shí)使用import 自定義名稱 from 文件名導(dǎo)入
export 可以暴露多個(gè)，導(dǎo)入時(shí)使用import {對應(yīng)名}[as 別名] from 文件名導(dǎo)入