搭建一個簡單的基於webpack的vue開發環境

時間  2019-11-09
標籤 搭建 一個 簡單 基於 webpack vue 開發環境 简体版
原文   原文鏈接

目錄css

從零開始搭建一個簡單的基於webpack的vue開發環境

注：基於webpack3.X的版本，webpack4.X的版本不適用
參考連接：
https://segmentfault.com/a/1190000012789253?utm_source=tag-newest
個人github：
https://github.com/meilulan/webpack-vue-practicehtml

總結

summary

項目初始化

1. 安裝node.js

2. 建立項目目錄並npm初始化

1. 新建「webpack-vue-practice」文件夾

2. 初始化並獲取package.json文件

cd webpack-vue-practice
npm init -y

「-y」表示將項目設置默認，之後可在package.json中更改vue

3. 引入webpack

1. 在項目中安裝webpack、vue等相關插件

npm install --save-dev webpack@3 webpack-dev-server@2
npm i --save-dev vue

2. 在項目根目錄下新建「index.html」文件

index.htmlnode

<!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>基於webpack3.X的vue開發環境</title>
</head>
<body>
    
</body>
</html>

3. 在項目根目錄下新建「webpack.config.js」配置文件

webpack.config.jswebpack

const path = require('path');
const webpack = require('webpack');

module.exports = {
    
}

4. 在項目根目錄下新建「src"文件夾，並在/src下新建「main.js」入口文件

到目前爲止，項目目錄的總體結構以下：git

webpack-vue-practice01

5. 在/src文件夾下新建測試js文件「util.js」

util.jsgithub

export default function say() {
    console.log("hello webpack!!");
}

6. 在main.js文件中引入util.js文件

main.jsweb

import say from './util';
say();

配置

1. 配置webpack.config.js文件

webpack.config.jsnpm

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/main.js',//項目的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//項目的打包文件目錄
        publicPath: '/dist/',//經過devServer訪問路徑
        filename: 'index.js'//打包後的文件名
    },
    devServer: {
        historyApiFallback: true,//若是找不到界面就返回默認首頁index.html
        overlay: true//能夠在瀏覽器打開的頁面顯示終端編譯時產生的錯誤
    }
}

2. 配置package.json文件中的"scripts"對象

package.jsonjson

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

3. 修改index.html，引入打包後的文件

index.html

<body>
    <script src="/dist/build.js"></script>
</body>

4. 運行項目

npm run dev

能夠發現瀏覽器自動打開了一個窗口，在瀏覽器的控制檯裏輸出"hello webpack"
而且能夠發現，咱們隨意修改util.js的文件，瀏覽器會自動刷新

5. 打包項目

npm run build

能夠發現，在項目中自動新建了「/dist/build.js」的路徑和文件

引入vue

1. 在main.js文件中引入vue，並在入口文件index.html中調用vue

main.js

import Vue from 'vue';
const vue = new Vue({
    el: "#app",
    data: {
        message:"hello webpack-vue"
    }
});

index.html

<div id="app">{{message}}</div>

2. 在webpack.config.js文件中的配置解析vue模塊的引用

resolve: {//幫組webpack找到bundle中須要引入的模塊代碼，這些代碼包含在每一個require/import語句中
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

webpack.config.js文件的總體配置以下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/main.js',//項目的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//項目的打包文件目錄
        publicPath: '/dist/',//經過devServer訪問路徑
        filename: 'build.js'//打包後的文件名
    },
    devServer: {
        historyApiFallback: true,//若是找不到界面就返回默認首頁index.html
        overlay: true//能夠在瀏覽器打開的頁面顯示終端編譯時產生的錯誤
    },
    resolve: {//幫組webpack找到bundle中須要引入的模塊代碼，這些代碼包含在每一個require/import語句中
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

引入scss和css

注：webpack默認只支持js的模塊化，如需其餘格式的文件當成模塊引入，須要用到webpack的loader解析器

1. 在項目中安裝css

終端

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

2. 在項目中安裝scss

終端

npm install --save-dev node-sass sass-loader

3. 在webpack.config.js的modules中配置css和sass

module: {
    rules: [
        //css
        {
            test: /\.css$/,
            use: [
                "vue-style-loader",
                "css-loader"
            ]
        },
        //scss爲擴展名的sass
        {
            test: /\.scss$/,
            use: [
                "vue-style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        //sass爲擴展名的sass
        {
            test: /\.sass$/,
            use: [
                "vue-style-loader",
                "css-loader",
                "sass-loader"
            ]
        }
    ]
}

4. 咱們作個測試

在src目錄下，新建「assets」目錄，並在其下新建common.scss文件，寫入如下樣式
common.scss

body {
    color: rgb(0, 128, 0);
}

啓動後，能夠看到瀏覽器中的文字顏色已改變，說明scss文件已經起做用了

使用babel轉碼

有些瀏覽器不是很支持ES6的語法，咱們可使用babelES6轉換爲ES5語法。

1. 在項目中安裝babel

npm install --save-dev babel-loader @babel/core @babel/preset-env

2. 在webpack.config.js的module中配置babel

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

exclude：是指不須要使用的文件或目錄，相對應的是include（手動指定哪些文件或目錄）

3. 在項目根目錄下建立babel的配置文件.babelrc

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "targets": {
                    "browsers": [
                        ">0.25%",
                        "not op_mini all"
                    ]
                }
            }
        ]
    ]
}

babel的配置具體見babel官網

4. 引入@babel/plugin-transform-runtime

由於babel-core只是對新引入的語法進行轉換，好比箭頭函數、塊級做用域等
但對新引入的對象，例如Promise、Set等這些只能使用babel的插件：@babel/plugin-transform-runtime
在項目開發環境中引入@babel/plugin-transform-runtime，同時在生產環境引入@babel/runtime

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

在.babelrc配置文件中引入plugin

"plugins": [
    [
        "@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": false,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
        }
    ]
]

.babelrc文件內容總體以下：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "targets": {
                    // The % refers to the global coverage of users from browserslist
                    "browsers": [
                        ">0.25%",
                        "not op_mini all"
                    ]
                }
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": false,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

具體操做和解釋，請查看 npm 和 babel 官網

引入圖片資源

1. 安裝文件模塊

npm install --save-dev file-loader

2. 在webpack.config.js的module中引入文件模塊

module: {
    rules: [
        //圖片
        {
            test: /\.(png|jpe?g|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
}

3. 測試

1. 在項目的src目錄下，新建img目錄，並引入圖片example.png

webpack-vue-practice02

2. 在項目中引用圖片

main.js

Vue.component('my-pic', {
    template: '<img :src="url" />',
    data() {
        return {
            url: require('./img/example.png')
        }
    }
});

index.html

<div id="app">
    <p>{{message}}</p>
    <my-pic></my-pic>
</div>

運行項目就能看到該圖片了。

引入vue的單文件組件

在前面，咱們使用了Vue.component來定義全局的組件
但在實際項目中，更推薦使用單文件組件

1. 安裝單文件組件相關的插件

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

2. 在webpack.config.js的module和plugins中引用

webpack.config.js

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

module:{
    rules:[
        //vue單文件組件
        {
            test:/\.vue$/,
            loader:'vue-loader',
            options:{
                loaders:{
                    'scss':[
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                    ],
                    'sass':[
                        'vue-style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            }
        }
    ]
},
plugins:[
    new vueLoaderPlugin(),
]

3. 在src目錄下新建App.vue文件

App.vue

<template>
    <div id="app">
        <h1>{{msg}}</h1>
        <img src="./img/example.png" />
        <input type="text" v-model="msg" />
    </div>
</template>

<script>
import say from "./util";

export default {
    name: "app",
    data() {
        return {
            msg: "the first vue page"
        };
    },
    created() {
        this.getSay();
    },
    methods: {
        async getSay() {
            let what = await say();
            this.msg = what;
        }
    }
};
</script>

<style lang="scss">
#app {
    h1 {
        color: red;
    }
}
</style>

4. 修改main.js文件

main.js

import Vue from 'vue';
import App from './App.vue'
import './assets/common.scss';

const vue = new Vue({
    el: "#app",
    components: { App },
    template: '<App/>'
});

5. 修改index.html文件

index.html

<!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>基於webpack3.X的vue開發環境</title>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>
</html>

運行項目，便可看到頁面能正確顯示。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程