零基礎Webpack4.0+Vue2.6+iView3.0+Vuex環境搭建詳解

使用Vue2.6+Webpack4.0+iView3.0構建簡單的項目

項目地址:https://github.com/MrGaoGang/lucky_vue_template

先上效果圖:

項目目錄:

npm init初始化npm的配置

npm install webpack --save-dev和npm install webpack-cli --save-dev
:安裝webpack依賴

npm install webpack-dev-server --save-dev ：可以在開發環境提供很多服務，比如啓動一個服務器，熱更新，接口代理等;

創建一個webpack.config.js文件

var path = require("path");

var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定輸出目錄
        publicPath: "/dist/",
        filename: "main.js"//輸出文件
    }

}

module.exports = config;

//同時在項目根目錄創建一個index.html文件和main.js文件


<!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">Hello world</div>
    
    <script src="/dist/main.js"></script>
</body>
</html>

然後使用npm run dev運行起來

體驗一下熱更新,在main.js文件中寫入:document.getElementById(“app”).innerHTML=“哈哈哈哈”; 保存，你會發現頁面已經更新了。

在webpack的世界中每一個文件都是一個模塊，比如css,js,html,jpeg對於不同的模塊我們要使用不同的加載器進行處理；比如：css的加載器

//安裝css加載器
npm install css-loader --save-dev
npm install style-loader --save-dev
//然後在webpack.config.js文件中添加對css的處理

var path = require("path");

var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定輸出目錄
        publicPath: "/dist/",
        filename: "main.js" //輸出文件
    },
    module: {
        rules: [{
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        }]
    }

}
/**
大概的意思就是，當遇到了以css結尾的文件，首先將.css文件使用css-loader轉換，然後通過style-loader轉換，然後打包。
use選項可以是數組或者字符串，如果是數組的話，它的編譯順序是從後向前的
**/

預覽一下：（先保存webpack.config.js文件，並重新執行npm run dev）

//添加一個index.css樣式文件，然後在main.js中引入，你會發現文字變成了紅色;
//index.css
#app {
    font-size: 18px;
    color: red;
}
//main.js
import "./index.css"

document.getElementById("app").innerHTML = "哈哈哈哈";

上述步驟完成之後，打開控制檯，選中某一個標籤，你會發現樣式都直接寫在了對應的標籤下。

使用webpack的插件功能；這裏我們使用extract-text-webpack-plugin插件，將散落在各地的css提取出來，生成一個main.css

npm install extract-text-webpack-plugin@next --save-dev

由於extract-text-webpack-plugin目前不支持webpack4.0+,故此處需要安裝extract-text-webpack-plugin@next版本


//修改配置文件
var path = require("path");
//導出插件
var ExtractTextPlugin=require("extract-text-webpack-plugin");
var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定輸出目錄
        publicPath: "/dist/",
        filename: "main.js" //輸出文件
    },
    module: {
        rules: [{
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                use:"css-loader",
                fallback:'style-loader'
            })
        }]
    },
    plugins:[
        //將提取後的文件命名爲main.css
        new ExtractTextPlugin("main.css")
    ]

}

module.exports = config;

此時如果將之前的html文件中引入main.css文件，則main.css文件會生效：


<!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>
    <link rel="stylesheet" href="/dist/index.css">
</head>
<body>

    <div id="app">Hello world</div>
    
    <script src="/dist/main.js"></script>
</body>
</html>

正式開始搭建vue的開發環境，因爲vue大多是以單文件組件的方式存在，一個.vue文件中存在

npm install vue
npm install vue-loader --save-dev //vue文件加載器
npm install vue-style-loader --save-dev //vue樣式加載器
npm install vue-template-compiler --save-dev //vue模板加載器
npm install vue-hot-reload-api --save-dev//vue 文件熱更新
npm install babel babel-loader babel-core --save-dev//安裝babel支持es6語法
npm install babel-runtime --save-dev
npm install babel-preset-env babel-plugin-transform-runtime babel-plugin-istanbul babel-polyfill --save-dev
//babel-polyfill是爲了兼容ie

npm install babel-preset-stage-2 babel-register --save-dev

其中版本號最好是如下:
"@babel/core": "^7.3.4",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "@babel/preset-env": "^7.3.4",

    "babel-runtime": "^6.26.0",
    "css-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.23.1",
    "vue-hot-reload-api": "^2.3.3",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"

//webpack.config.js配置
var path = require("path");

//導出插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var VueLoaderPlugin=require("vue-loader/lib/plugin")
var config = {
    entry: {
        //爲了兼容ie加入入口文件babel-polyfill
        app: ["babel-polyfill", "./main.js"] //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定輸出目錄
        publicPath: "/dist/",
        filename: "main.js" //輸出文件
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: "css-loader",
                    fallback: 'style-loader'
                })
            }, {
                test: /\.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: "css-loader",
                            fallback: "vue-style-loader"
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },

        ]
    },
    plugins: [
        new ExtractTextPlugin("main.css"),
        new VueLoaderPlugin()//vue插件
    ]

}

module.exports = config;

//根目錄下新增一個babel.config.js
module.exports={
    presets:[
        [
            "@babel/preset-env",
            {
                targets:{
                    "browsers":["last 3 versions","ie>=9"]
                },
                useBuiltIns:"entry",
                debug:false
            }
        ]
    ]
}

//main.js文件改成:
//導入Vue
import Vue from "vue";
//導入首頁
import App from "./App.vue"

new Vue({
    el:"#app",
    render:h=>h(App)
})

//App.vue
<template>
  <div class="home">{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "你好世界！"
    };
  }
};
</script>
//scoped表示樣式在當前文件中有效
<style scoped>
.home {
  color: red;
}
</style>

9.引入iview組件

詳情請見:引入iView詳解

依賴說明：

"babel-plugin-import": "^1.11.0",//iview或者其他庫的按需引入
"@babel/core": "^7.3.4",//babel核心庫，將es6/es7轉化成es2015
"@babel/preset-env": "^7.3.4",
"babel": "^6.23.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",//兼容ie，
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^2.0.1",//構建生產環境時清楚已有構建目錄
"css-loader": "^2.1.1",//css加載器
"extract-text-webpack-plugin": "^4.0.0-beta.0",//將多個css樣式打包成一個css文件
"file-loader": "^3.0.1",//file-loader和url-loader配合使用，當url-loader無法加載時會自動使用file-loader，注意：引入iview.css必須要加載此包
"html-loader": "^0.5.5",//html加載器
"html-webpack-plugin": "^3.2.0",//生產環境打包時生成index.html文件
"iview-loader": "^1.2.2",//iview的加載器
"less": "^2.7.1",//less文件加載器
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^2.1.2",//構建生產環境時 將代碼壓縮
"url-loader": "^1.1.2",
"vue-hot-reload-api": "^2.3.3",//vue熱加載
"vue-loader": "^15.7.0",//vue加載器
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",//測試環境時開啓本地端口
"webpack-merge": "^4.2.1",//webpack的合併

最後附上項目地址:
歡迎Star

零基礎Webpack4.0+Vue2.6+iView3.0+Vuex環境搭建詳解

使用Vue2.6+Webpack4.0+iView3.0構建簡單的項目

安卓初級開發中遇到的一些問題

PHP連接Android失敗可能的原因

一直無法獲取到PHP的數據問題

Python模塊的導入

零基礎Webpack4.0+Vue2.6+iView3.0+Vuex環境搭建詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結