webpack中導入vue與網頁中script使用vue

一、安裝vue

cnpm install vue -S  // 安裝到項目運行依賴

　　

二、使用，運行

運行之后有報錯：

 

 

當前使用的包是runtime-only的包，並不是最全的包，在網頁中使用script導入的vue包功能最全，這里的vue功能不全，是嚴格版的

// 這是入口文件
// console.log('ok');

// 如何在webpack構建的項目中使用vue進行開發

// 在普通網頁中使用vue
// 1、使用script引入vue的包
// 2、創建一個id=app的容器
// 3、new 創建vm 實例

// cnpm install vue -S   // 安裝到項目運行依賴

// 在webpack中使用 import Vue from 'vue' 導入的vue，功能不完整，只提供了runtime-only的方式
// 並沒有提供像網頁中那樣的使用方式

import Vue from 'vue'
// 包的查找規則：
// 1、找項目根目錄中有沒有 node_modules 的文件夾
// 2、在 node_modules 中根據包名，找到對應的vue文件夾
// 3、在vue文件夾中，找一個叫做package.json的包配置文件
// 4、在package.json中查找main屬性【main屬性指定了包被加載之后的入口文件】

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

　　

查找 ： node_modules  ---  vue  --  package.json   ---  main  屬性："main": "dist/vue.runtime.common.js",

所以我們在import之后得到的是vue.runtime.common.js文件

 

 

這里的vue.js就是在script標簽中導入的那個，為了解決上面的報錯信息，

1、可以更改import的路徑：

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

2、修改webpack.config.js文件配置：

首先js文件中還是使用  import Vue from 'vue'

其次，修改配置文件：增加resolve節點，

 

注意：每次修改了配置文件都要重新啟動才可以

 

 三、定義組件

1、使用網頁版的引入vue文件，定義組件以及使用都沒有問題

2、當直接使用import Vue from 'vue'  並且webpackage.config.js中沒有修改alias屬性時，組件時不能正常使用的，如何解決呢？？？

 

四、解決方法：

新建一個   login.vue  文件，這個文件就是一個純粹的組件。這個文件有三部分組成：template    script   style

然后在main.js中 import login from ‘./login.vue’

運行之后還是會報錯：識別不了，需要安裝loader

 

 

解決方法：

安裝loader：

cnpm  install vue-loader vue-template-compiler -D

　　

修改配置文件：

 

 

不能直接在components中注冊login，需要使用render來渲染到頁面中：

 

 

五、總結

// webpack.config.js
const path = require('path');
// 在內存中，根據指定的模板頁面，生成一份內存中的首頁，同時自動把
// 打包好的output.bundles.js注入到頁面底部
// 配置插件需要在對象中掛載一個plugins節點
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'output.bundle.js'
    },
    mode:'development',
    plugins:[  // 所有webpack插件的配置節點
        new htmlWebpackPlugin({
            // 指定模板文件路徑
            template:path.resolve(__dirname,'./src/index.html'),
            // 設置生成的內存頁面的名稱
            filename:'index.html'
        }),
        // 為 .vue  文件配置加載器，只支持原生js
        new VueLoaderPlugin()
    ],
    module:{  // 配置所有第三方loader模塊
        rules:[  // 第三方模塊的匹配規則
            {  // 處理css文件的loader
                test:/\.css$/,
                use:['style-loader','css-loader'] 
            },
            {
                test:/\.less$/,
                use:['style-loader', 'css-loader', 'less-loader']  
            },
            {
                test:/\.scss$/,
                use:['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test:/\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    resolve:{
        alias: {  // 修改vue被導入時候報的路徑
            // 'vue$':'vue/dist/vue.js'
        }
    }
}

　　

// main.js
// 這是入口文件
// console.log('ok');

// 如何在webpack構建的項目中使用vue進行開發

// 在普通網頁中使用vue
// 1、使用script引入vue的包
// 2、創建一個id=app的容器
// 3、new 創建vm 實例

// cnpm install vue -S   // 安裝到項目運行依賴

// 在webpack中使用 import Vue from 'vue' 導入的vue，功能不完整，只提供了runtime-only的方式
// 並沒有提供像網頁中那樣的使用方式

import Vue from 'vue'

// 修改路徑的解決方式
// import Vue from '../node_modules/vue/dist/vue.js'


// 包的查找規則：
// 1、找項目根目錄中有沒有 node_modules 的文件夾
// 2、在 node_modules 中根據包名，找到對應的vue文件夾
// 3、在vue文件夾中，找一個叫做package.json的包配置文件
// 4、在package.json中查找main屬性【main屬性指定了包被加載之后的入口文件】

// var login = {
//     template:'<h1>這是login組件，是使用網頁中形式創建出來的組件</h1>'
// }

// 1、導入login組件
import login from './login.vue'
// 默認，webpack 無法打包 .vue 文件，需要安裝相關的loader
// cnpm  install vue-loader  vue-template-compiler -D
// 在配置文件中，新增 loader 的配置項
// {
//     test:/\.vue$/,
//     use: 'vue-loader'
// }

var vm = new Vue({
    el:'#app',
    data:{
        msg:'123'
    },
    // components:{
    //     login
    // }
    // 在webpack中，如果想要通過 vue ，把一個組件展示到頁面中去，
    // vm 實例中的 render 函數可以實現
    // render:function(createElements){
    //     return createElements(login);
    // },
    render: (h) => h(login)
})

　

//  login.vue

// 這是一個純粹的組件，里面有三部分構成
<template>
    <div>
        <h1>這是登錄組件，使用.vue 文件定義出來的</h1>
    </div>

</template>

<script>

</script>


<style>

</style>

　　

//  index.html

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webpack-vue</title>
    
</head>
<body>
    <div id="app">
        {{msg}}
        <login></login>
    </div>
    
</body>
</html>

　　

總結：webpack中如何使用vue：

1、安裝vue的包， cnpm  install vue -D

2、由於在webpack中，推薦使用 .vue 這個組件模板文件定義組件，所以需要安裝 能解析這種文件的loader

cnpm install vue-loader vue-template-compiler -D

3、在 main.js中導入vue模塊，import Vue from 'vue'

4、定義一個.vue結尾的組件，組件由三部分組成，template  script  style 

5、使用import導入一個組件  import login from './login.vue'

6、創建VM 的實例，var vm = new Vue({ el :'#app', render: h => h(login)})

7、在頁面中創建一個id=app的div元素，作為VM實例控制的區域