欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用webpack手動(dòng)搭建vue項(xiàng)目的步驟

 更新時(shí)間：2023年03月02日 15:57:21   作者：前端切圖仔Zz  
這篇文章主要介紹了從零使用webpack手動(dòng)搭建vue項(xiàng)目的步驟，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、前提條件

在開始以下步驟之前需先安裝好nodejs環(huán)境（最好直接安裝nvm，然后再通過(guò)nvm管理node版本），如未安裝，可參考：http://www.dbjr.com.cn/article/272933.htm

二、手動(dòng)搭建vue項(xiàng)目的步驟：

1. 創(chuàng)建項(xiàng)目

執(zhí)行以下命令：

mkdir  vue-demo
cd vue-demo

如圖所示：

2. 生成package.json文件

執(zhí)行以下命令：

npm init

如圖所示，此時(shí)能看到有生成package.json文件：

3. 引入webpack和創(chuàng)建webpack.config.js文件

執(zhí)行以下命令：

npm install webpack --save-dev

如圖所示：

然后，創(chuàng)建webpack.config.js文件：

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "demo.js"
    }
}

如圖所示：

4. 創(chuàng)建index.html，main.js文件

index.html文件內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack-demo</title>
</head>
<body>
    <script src="./dist/demo.js"></script>
</body>
</html>

創(chuàng)建src文件夾，在文件夾下創(chuàng)建main.js文件，內(nèi)容如下：

alert('hello world');

如圖所示：

5. 使用webpack命令編譯

此時(shí)，順便安裝webpack-cli?？梢娔夸浂嗔艘粋€(gè)dist文件夾下面包含demo.js文件。內(nèi)容如下所示：

6. 引入vue2，修改index.html，main.js文件

執(zhí)行以下命令：

npm install vue@2.x.x

如圖所示：

執(zhí)行命令后能發(fā)現(xiàn)package.json中自動(dòng)新增了以下內(nèi)容：

修改main.js內(nèi)容如下：

import Vue from 'vue'
var vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue'
    }
})

在index.html中加入msg

7. 引入babel

執(zhí)行以下命令：

npm install --save-dev babel-core babel-loader

將babel加入到webpack.config.js配置文件中

module: {
    rules: [
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        }
    ]
}

如圖所示：

8. 再次執(zhí)行webpack命令，完成搭建

關(guān)于提示“The ‘mode’ option has not been set”,可在webpack.config.js中設(shè)置為開發(fā)模式：

此時(shí)在瀏覽器打開index.html報(bào)以下錯(cuò)誤：

這是因?yàn)檎谑褂玫氖莢ue的運(yùn)行時(shí)版本，而此版本中的編譯器時(shí)不可用的，我們需要把它切換成運(yùn)行時(shí) + 編譯的版本，需要在配置文件中添加以下代碼：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
}

如圖所示：

再次運(yùn)行webpack 命令重新編譯，然后再在瀏覽器打開index.html文件：

此時(shí)，一個(gè)基于webpack的vue 項(xiàng)目就搭建好。

三、Webpack的常用配置：

1.HtmlWebpackPlugin插件(復(fù)制index.html)。

作用：

編譯時(shí)自動(dòng)在dist的目錄中創(chuàng)建一個(gè)html文件并將index.html中的內(nèi)容復(fù)制過(guò)去。

執(zhí)行以下命令用以引入插件：

npm install --save-dev html-webpack-plugin

在webpack.config.js文件中添加如下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
…
plugins:[
    new HtmlWebpackPlugin()
]

位置如下：

執(zhí)行webpack命令再次編譯，將自動(dòng)在dist目錄下生成html文件：

對(duì)比原本自己寫的index.html，可知少了以下內(nèi)容：

接下來(lái)可通過(guò)修改配置文件來(lái)解決這個(gè)問(wèn)題：

plugins:[
    new HtmlWebpackPlugin({
        title: "vue demo",
        template: "index.html"
    })
]

刪掉dist文件夾下index.html的script代碼后再次編譯，得到新的index.html文件如下：

2.webpack-dev-server插件(實(shí)時(shí)加載)

作用：

提供了一個(gè)簡(jiǎn)單的web服務(wù)器，能夠?qū)崟r(shí)重新加載。無(wú)須在瀏覽器中直接打開文件（我們實(shí)際開發(fā)中將代碼部署在 server中，而不是在瀏覽器中直接打開文件。）。

執(zhí)行以下命令：

npm install --save-dev webpack-dev-server

在webpack.config.js文件中添加如下配置，以告知webpack-dev-server， 在localhost:8080 下建立服務(wù)，將 dist 目錄下的文件，作為可訪問(wèn)文件。：

devServer: {
    static: path.resolve(__dirname,'static')
}

位置如下：

在package.json中添加一個(gè)script腳本以直接運(yùn)行開發(fā)服務(wù)器（dev server）

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open",
  "build": "webpack"
},

位置如下：

執(zhí)行npm run dev命令：

此時(shí)，瀏覽器將會(huì)自動(dòng)打開頁(yè)面，這證明已經(jīng)成功啟動(dòng)服務(wù)：

3. css加載器(css-loader和style-loader)

執(zhí)行以下命令安裝css-loader和style-loader：

npm install --save-dev css-loader style-loader

在 webpack.config.js 中進(jìn)行如下配置：

module:{
    rules:[ 
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ]
}

具體位置如下：

在src 目錄下新建一個(gè)styles的文件夾并在里面添加一個(gè)main.css的文件,寫上以下內(nèi)容：

#app{
    color: red;
}

然后在main.js文件中引入css

再次執(zhí)行npm run dev命令，頁(yè)面上的字體樣式將會(huì)變化：

4. 圖片資源和字體的加載

說(shuō)明：

url-loader是基于file-loader的封裝，故需引入file-loader。url-loader解決圖片較多時(shí)過(guò)多http請(qǐng)求導(dǎo)致頁(yè)面性能降低的問(wèn)題，將引入的圖片編碼，生成dataURl。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符,再把這串字符打包到文件中，最終只需要引入這個(gè)文件就能訪問(wèn)圖片了。

執(zhí)行以下命令：

npm install --save-dev file-loader url-loader

在配置文件添加以下內(nèi)容：

{
    test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        esModule: false
    }
},
{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000
    }
}

位置如下：

在src 目錄下新建一個(gè)images的文件夾并在里面添加圖片

然后在main.js中引入

import logo from'./images/logo.png'

接著在index.html中使用

刷新頁(yè)面可見已經(jīng)能看到圖片：

5. vue-loader

說(shuō)明：

在vue的開發(fā)過(guò)程中，通常我們需要寫.vue結(jié)尾的文件即組件，這類文件需要通過(guò) vue-loader 來(lái)加載，vue-template-compiler來(lái)編譯。

執(zhí)行以下命令：

npm install --save-dev vue-loader@15.9.8 vue-template-compiler

在webpack.config.js文件中添加：

const { VueLoaderPlugin } = require('vue-loader')
…
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]
},

…
plugins:[
    new VueLoaderPlugin()
]

修改index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack-demo</title>
</head>
<body>
    <div id="app">
       
    </div>
</body>
</html>

在src文件夾下新建app.vue文件，內(nèi)容如下：

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo">
        {{msg}}
    </div>
</template>
<script>
    export default {
        name: 'app',
        data(){
            return {
                msg: '嘗試vue頁(yè)面是否能打開了'
            }
        }
    }
</script>
<style scoped>
    img{
        width: 100px;
        height: 100px;
    }
</style>

修改main.js:

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

var vm = new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

運(yùn)行npm run dev，瀏覽器頁(yè)面內(nèi)容將會(huì)更新：

6. 熱重載

說(shuō)明：

“熱重載”不只是當(dāng)你修改文件的時(shí)候簡(jiǎn)單重新加載頁(yè)面。啟用熱重載后，當(dāng)你修改 .vue 文件時(shí)，該組件的所有實(shí)例將在不刷新頁(yè)面的情況下被替換。手動(dòng)設(shè)置工程時(shí)，熱重載會(huì)在啟動(dòng) webpack-dev-server --hot 服務(wù)時(shí)自動(dòng)開啟。

修改package.json：

到此這篇關(guān)于從零使用webpack手動(dòng)搭建vue項(xiàng)目的文章就介紹到這了,更多相關(guān)webpack搭建vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 關(guān)于vue里頁(yè)面的緩存詳解

    關(guān)于vue里頁(yè)面的緩存詳解

    今天小編就為大家分享一篇關(guān)于vue里頁(yè)面的緩存詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • 詳解vue3.0 diff算法的使用(超詳細(xì))

    詳解vue3.0 diff算法的使用(超詳細(xì))

    這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • 淺談Vue組件單元測(cè)試究竟測(cè)試什么

    淺談Vue組件單元測(cè)試究竟測(cè)試什么

    這篇文章主要介紹了淺談Vue組件單元測(cè)試究竟測(cè)試什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • 詳解vuejs之v-for列表渲染

    詳解vuejs之v-for列表渲染

    這篇文章主要介紹了詳解vuejs之v-for列表渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解

    vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解

    這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • 淺析Vue.js中v-bind v-model的使用和區(qū)別

    淺析Vue.js中v-bind v-model的使用和區(qū)別

    v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定。這篇文章主要介紹了Vue.js中v-bind v-model的使用和區(qū)別,需要的朋友可以參考下
    2018-12-12
  • 基于vue實(shí)現(xiàn)分頁(yè)組件的示例代碼

    基于vue實(shí)現(xiàn)分頁(yè)組件的示例代碼

    分頁(yè)組件是一種用戶界面元素,用于在長(zhǎng)列表或數(shù)據(jù)集中分割內(nèi)容,分頁(yè)組件是每個(gè)開發(fā)人員必須掌握的一個(gè)組件,廣泛應(yīng)用在各個(gè)場(chǎng)所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁(yè)組件,需要的朋友可以參考下
    2023-08-08
  • vue2.X組件學(xué)習(xí)心得(新手必看篇)

    vue2.X組件學(xué)習(xí)心得(新手必看篇)

    下面小編就為大家?guī)?lái)一篇vue2.X組件學(xué)習(xí)心得(新手必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • vue計(jì)算屬性無(wú)法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案

    vue計(jì)算屬性無(wú)法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案

    今天小編就為大家分享一篇vue計(jì)算屬性無(wú)法監(jiān)聽到數(shù)組內(nèi)部變化的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-11-11
  • vue3父組件調(diào)用子組件的方法例子

    vue3父組件調(diào)用子組件的方法例子

    這篇文章主要給大家介紹了關(guān)于vue3父組件調(diào)用子組件的方法例子,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-07-07

最新評(píng)論