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實例控制的區域

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM