vue之webpack安裝配置vue

一、介紹

　　vue的runtime-only版本和runtime-compiler版本：

　　　　runtime-only版本：代碼中不可以有任何的template

　　　　runtime-compiler版本：代碼中可以有template，此版本有編譯template的代碼

二、vue安裝

　　1. 安裝方式：

　　　　下載js文件安裝；CDN安裝；npm安裝

　　2. npm安裝：

　　　　環境：node環境

　　　　 npm install vue --save ：vue在運行時也需要，所以不要加-dev

三、vue的使用配置

　　1. 導入vue：

　　　　 import Vue from 'vue' 

　　　　說明：在沒有建立導入的對應目錄時，webpack會從mode_modules中找

　　2. 使用vue

　　　　new Vue

　　　　說明：在使用vue時，默認使用runtime-only版本，所以可能會導致沒有效果；解決方法一：在webpack.config.js文件中添加配置

module.exports = {
    resolve: {
        // 配置別名
        alias: {
            // 使用vue時，從指定別名的文件導入
            'vue$': 'vue/dist/vue.esm.js'
        }　
    }
}

 　　　　　　解決方法二：安裝 vue-template-compiler 模塊

　　　　　　　　 npm install vue-template-compiler 

日期：2021-10-20