webpack+vue項目實戰（一,搭建運行環境和相關配置）

時間  2019-11-05
標籤 webpack+vue webpack vue 項目 實戰 搭建 運行 環境 相關 配置 简体版
原文   原文鏈接

1.前言

如今正在開發一個公司的後臺管理項目，項目是一個單頁面應用。功能上就是管理銷售訂單的各個環節，包括物流管理，回款管理，訂單管理等等的功能。這些就很少說了。項目是，基於webpack3,vue2.2.6,element2.2.9。js語法是使用es6,還有使用到的一些資源好比，vue-router,vue-resource,webpack-dev-server等。運行環境是node6.10.0,npm3.10.10，其它版本的小小夥伴要注意版本兼容的問題喔！css

2.package.json

好了，首頁在建立項目目錄（admin），下面進行項目的第一步，搭建環境。搭建環境的第一步，就是建立package.json，我如今就是簡單粗暴的建立發-從以前的項目拷貝一個這樣的文件，而後再改一下，代碼就是下面這樣。你們也能夠$ npm init生成這個文件，而後再安裝相關的依賴。html

{
  "name": "admin",
  "version": "1.0.0",
  "description": "後臺管理系統",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.18.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.25.0",
    "ejs-compiled-loader": "^2.1.1",
    "element-ui": "1.2.9",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "glob": "^7.0.6",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.0.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",
    "scss-loader": "0.0.1",
    "style-loader": "^0.13.1",
    "tween.js": "^16.6.0",
    "url-loader": "^0.5.7",
    "vue": "2.2.6",
    "vue-loader": "^10.0.2",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.4.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "2.2.6",
    "vuex": "^2.0.0",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --inline"
  },
  "author": "chen",
  "license": "ISC"
}

有了上面的配置，在命令行輸入$ npm install就能夠安裝相關的依賴了！vue

(vue，vue-template-compiler，element-ui這幾個配置的版本號前面是沒有^，這是由於項目上，我不須要再更新這些資源了，由於以前試過，由於版本更新了的問題，致使element顯示不正常，因此，就固定住了這幾個的版本！還有一個就是，這個是一個json文件，不能在這裏寫註釋喔！不然會報錯！)node

安裝完了以後，項目目錄應該是這樣的。
clipboard.pngwebpack

.idea是我用webStorm編輯器開發，自動生成的文件
node_modules是安裝以後生成的node模塊文件，
.npmrc是使用淘寶的鏡像的文件，內容以下es6

registry = http://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

3.webpack.config.babel.js

配置完了package.json以後，下面寫webpack的配置文件（webpack.config.babel.js）了。web

webpack.config.babel.js，這樣命名是想讓webpack在編譯的時候自動識別es6的語法，如今貌似不須要這樣命名了，以前用webpack1.x的時候貌似是須要的vue-router

webpack的配置，以前說過，也寫過文章，這裏就當簡單複習一下，我就不一塊塊的說了，直接在代碼那裏寫上註釋。代碼以下vuex

let path = require('path');
let webpack = require('webpack');
/*
 html-webpack-plugin插件，webpack中生成HTML的插件，
 具體能夠去這裏查看https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require('html-webpack-plugin');
/*
 webpack插件，提取公共模塊
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let config = {
    //入口文件配置
    entry: {
        index: path.resolve(__dirname, 'src/js/page/index.js'),
        vendors: ['vue', 'vue-router','vue-resource','vuex','element-ui','element-ui/lib/theme-default/index.css'] // 須要進行單獨打包的文件
    },
    //出口文件配置
    output: {
        path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對於它
        publicPath: '/dist/',                //模板、樣式、腳本、圖片等資源對應的server上的路徑
        filename: 'js/[name].js',            //每一個頁面對應的主js的生成配置
        chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk生成的配置
    },
    module: {
        //加載器
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                    }
                }
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015","stage-0"],
                    plugins: ['syntax-dynamic-import']
                }
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                //圖片加載器，雷同file-loader，更適合圖片，能夠將較小的圖片轉成base64，減小http請求
                //以下配置，將小於8192byte的圖片轉成base64碼
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=images/[hash].[ext]'
            }
        ]
    },
    //插件
    plugins: [
        //webpack3.0的範圍提高
        new webpack.optimize.ModuleConcatenationPlugin(),
        //打包生成html文件，而且將js文件引入進來
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, 'dist/html/index.html'), //生成的html存放路徑，相對於path
            template: path.resolve(__dirname, 'src/html/index.html'), //ejs模板路徑,前面最好加上loader用於處理
            inject: 'body',  //js插入的位置，true/'head'/'body'/false
            hash: true
        }),
        //提取功能模塊
        new CommonsChunkPlugin({
            name: 'vendors', // 將公共模塊提取，生成名爲`vendors`的chunk
            minChunks: 2, //公共模塊被使用的最小次數。配置爲2，也就是同一個模塊只有被2個之外的頁面同時引用時纔會被提取出來做爲common chunks
            // children:true  //若是爲true,那麼公共組件的全部子依賴都將被選擇進來
        }),
    ],
    //使用webpack-dev-server，啓動熱刷新插件
    devServer: {
        contentBase: path.join(__dirname, "/"),
        host: 'localhost',  //建議寫IP地址，開發時候電腦的ip地址。localhost我不知道是幻覺仍是怎樣，有時候熱刷新不靈敏
        port: 9090, //默認9090
        inline: true, //能夠監控js變化
        hot: true//熱啓動
    },
    //搜索路徑變量
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions:['.js','.scss','.vue','.json']// 能夠不加後綴, 直接使用 import xx from 'xx' 的語法
    }
};
module.exports = config;

4.vue-router

寫好package.json和webpack的配置以後，接下來就是路由(vue-router)了。這一步應該說是準備步驟，爲下一步作準備的，方便測試。
1.首頁建立一個配置路由的文件以及一個基本的組件文件（方便測試），welcome.vue（這個組件文件只有一張圖片，樣式也很簡單），建立完了以後，目錄是這樣的。你們要注意這個目錄的文件。npm

clipboard.png

clipboard.png
附上代碼

<template>
    <div class="welcome-wrap">
        <img src="http://i1.buimg.com/1949/43ab520761604482.jpg" alt="">
    </div>
</template>
<script>
    export default{
        data(){
            return{
                name:'welcome'
            }
        }
    }
</script>
<style lang="scss" scoped>
    .welcome-wrap{
        height: 100%;
        width: 100%;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .hd{
            font-size: 30px;
            text-align: center;
        }
        .bd{

        }
    }
</style>
<style lang="scss">
    .welcome-steps{
        .el-step__line-inner{
            height: 100% !important;
        }
    }
</style>

clipboard.png

附上代碼

import welcomeComponent from './../components/admin_base/welcome.vue';

//路由控制
let snavRouter = [
    {
        path: '/',
        redirect: '/index?pos=0'
    },
    {
        path: '/index',
        component: welcomeComponent
    }
];
export {snavRouter}

5.index.js和index.html

接下來就配置入口文件，和入口文件的模板了。
入口文件，index.js
clipboard.png
代碼以下：

require("../../html/index.html");
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//使用router
Vue.use(VueRouter);
//使用resource
Vue.use(VueResource);
//使用ElementUI
Vue.use(ElementUI);
//引入router配置
import {snavRouter} from './../router/router';
//實例化router
const router = new VueRouter({
    routes: snavRouter
});
/**
 * @description 啓動App
 * @returns {{name: string}}
 * @constructor
 */
    //App啓動
let App = new Vue({
    el: '#App',
    data(){
        return {
            'name': 'index'
        }
    },
    router: router,
    mounted(){
    },
});

入口文件模板，index.html

clipboard.png
代碼以下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=2.0">
    <title></title>
    <link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div class="zyl-admin-wrap" id="App">
    <div class="zyl-admin-hd">
    </div>
    <div class="zyl-admin-bd">
        <div class="zyl-admin-snav">
        </div>
        <div class="zyl-admin-content">
            <div class="wrapper">
                <!-- 路由出口 -->
                <!-- 路由匹配到的組件將渲染在這裏 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>
</body>
</html>

把改弄的都弄好了以後。先跑一下，證實一下本身的配置是否是正確的！，npm run dev

以前在package.json已經寫好了，npm run dev
至關於執行dev對應的命令行，在命令行輸入webpack-dev-server --hot --inline是同樣的效果！

clipboard.png

在瀏覽器輸入‘http://localhost:9090/dist/ht...’
運行結果成功的跑起來了！可是，你們有沒有發現，在瀏覽器的地址欄，出現的是‘http://localhost:9090/dist/ht...’。結果是正常的，由於前面咱們配置了路由，而且使用了路由！至於在地址上後面我爲何加上pos參數，下一章會說到！

clipboard.png

路由（vue-router）。大概原理就是，在瀏覽器地址欄輸入‘http://localhost:9090/dist/ht...’，路由（vue-router）就匹配到了(path: '/')。而後，重定向到了(redirect: '/index?pos=0')，重定向又匹配到了(path: '/index')，而後就加載了組件，加載了這個組件(component: welcomeComponent)，就會在index.html的<router-view></router-view>裏面輸出這個組件的內容，（相關的知識，能夠到網上參考vue-router）。這個組件(component: welcomeComponent)，就是咱們以前編寫的welcome.vue。可能說的有點亂，你們注意整理下，理清思路。

clipboard.png

6.未完待遇

今天就先到這裏了，這個系列日後會有幾篇文章繼續介紹，畢竟這篇文章只是介紹了基礎的一個項目的搭建和配置。以及把項目跑起來！vue-router和element尚未寫到。你們也放心好了，文章不會讓你們等過久的。最後，若是你們發現我哪裏寫錯了，或者是哪裏寫得很差，歡迎指點下。

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