011 webpack中使用vue

時間 2019-11-06

標籤 webpack 使用 vue 简体版

原文原文鏈接

一：在webpack中使用vuecss

1.安裝vue的包html

2.index.htmlvue

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
</body>
</html>

3.main.jsnode

// js的主要入口
console.log("ok")

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

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

})

4.運行webpack

　　將會報錯web

　　vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.npm

(found in <Root>)json

5.緣由babel

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

6.第一種處理方式

　　引用具體的包路徑

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

7.第二種方式

　　在webpack.config.js中加一個節點resolve

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },

    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],

    // 用於配置全部的第三方模塊加載器
    module:{
        //匹配規則
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},  //正則
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //依次往前處理
            {test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },// 處理 字體文件的 loader 
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高級的ES語法
        ]
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    }

}

8.效果

二：使用webpack指定的vue處理模板

1.說明

　　由於webpack推薦使用.vue這個模板文件定義的組件，因此，這裏繼續使用webpack指定的vue

2.在src下新建login.vue

<template>
  <div>
    <h1>這是登陸組件，使用 .vue 文件定義出來的</h1>
  </div>
</template>

<script>

</script>

<style>

</style>

3.安裝

　　cnpm i vue-loader vue-template-compiler -D

4.在webpack.config.js中增長規則

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },

    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],

    // 用於配置全部的第三方模塊加載器
    module:{
        //匹配規則
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},  //正則
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //依次往前處理
            {test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },// 處理 字體文件的 loader 
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高級的ES語法
            { test: /\.vue$/, use: 'vue-loader' } // 處理 .vue 文件的 loader
        ]
    },
    resolve:{
        alias:{
            // 'vue$':'vue/dist/vue.js'
        }
    }


}

5.main.js

// js的主要入口
console.log("ok")

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

import login from './login.vue'

// var login = {
//     template:'<h1>這是一個組件</h1>'
// }

var vue = new Vue({
    el:'#app',
    data:{
        msg:'123'
    },
    // components:{
    //     login
    // }
    render: function (createElements) { // createElements 是一個 方法，調用它，可以把 指定的 組件模板，渲染爲 html 結構
        return createElements(login)
        // 注意：這裏 return 的結果，會 替換頁面中 el 指定的那個 容器
    }
})

6.效果

三：export default與export

1.新建test.js

　　和main.js平級

export default {
  address: '北京'
}

2.在main.js中引用

import m2 from './test.js'
console.log(m2)

3.效果

4.export default 的變量方式

　　在test.js中：

var info = {
  name: 'zs',
  age: 20
}

export default info

5.效果

6.小總結

　　// 注意： export default 向外暴露的成員，能夠使用任意的變量來接收

　　// 注意：在一個模塊中，export default 只容許向外暴露1次

　　// 注意：在一個模塊中，能夠同時使用 export default 和 export 向外暴露成員

7.使用export

　　在test.js中

export var title = '小星星'
export var content = '哈哈哈'

8.在main.js中使用

import m2,{ title as title123, content } from './test.js'
console.log(m2)
console.log(title123)
console.log(content)

9.效果

10.所有代碼

// 這是 Node 中向外暴露成員的形式：
// module.exports = {}

// 在 ES6中，也經過 規範的形式，規定了 ES6 中如何 導入 和 導出 模塊
//  ES6中導入模塊，使用   import 模塊名稱 from '模塊標識符'    import '表示路徑'

// 在 ES6 中，使用 export default 和 export 向外暴露成員：
var info = {
  name: 'zs',
  age: 20
}

export default info

/* export default {
  address: '北京'
} */

// 注意： export default 向外暴露的成員，能夠使用任意的變量來接收
// 注意： 在一個模塊中，export default 只容許向外暴露1次
// 注意： 在一個模塊中，能夠同時使用 export default 和 export 向外暴露成員



export var title = '小星星'
export var content = '哈哈哈'

// 注意： 使用 export 向外暴露的成員，只能使用 { } 的形式來接收，這種形式，叫作 【按需導出】
// 注意： export 能夠向外暴露多個成員， 同時，若是某些成員，咱們在 import 的時候，不須要，則能夠 不在 {}  中定義
// 注意： 使用 export 導出的成員，必須嚴格按照 導出時候的名稱，來使用  {}  按需接收；
// 注意： 使用 export 導出的成員，若是 就想 換個 名稱來接收，能夠使用 as 來起別名；




// 在Node中 使用 var 名稱 = require('模塊標識符')
// module.exports 和 exports 來暴露成員

相關標籤/搜索

idea2016+vue+webpack+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。