vue環境構築の詳細

27493 ワード

webフロントエンド

いい文章は自分で先にコレクションして、後で見つからないのではないかと心配しています.投稿:http://www.cnblogs.com/wj204/p/6031435.html
前vue 2.0とwebpackはすでにいくつか接触しています(vue.js入門、webpack入門の簡単な例が走り始めました)、今から自分のvue 2をどのように構築するかを学びます.0+webpack環境.

1.まず、プロジェクトディレクトリであるvue-wkdemoを新規作成します.npm initコマンドを実行してpackageを生成する.jsonファイル.npm initを実行すると、いくつかの項目の情報を記入するように要求され、デフォルトに戻るか、npm init-yを直接実行して質問ステップをスキップします.

2.プロジェクト依存項目のインストール

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader
vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install html-webpack-plugin --save-d
npm install vue --save

3.新規エントリファイルindex.js、ファイルの場所はvue-wkdemo->app->index->index.js

import Vue from 'Vue'
import Favlist from './components/Favlist.vue'
Vue.config.debug = true;//      
window.onload = function () {
  new Vue({
      el: '#app',
      components: {
        'my-component': Favlist
      }
  });
}

4.构建index.html模版，文件位置放置为：vue-wkdemo->app->index->index.html


<html lang="zh">
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>  title>
    head>
    <body>
      <div id="app">

        <my-component>my-component>
      div>
    body>
html>

5.构建vue组件Favlist.vue ，文件放置为：vue-wkdemo->app->components->Favlist.vue

<style>
body {
    color: red;
}
style>

6.构建 webpack.config.js ，文件放置为：vue-wkdemo->build->webpack.config.js

// nodejs   path  
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //     ，path.resolve()  ，                     ，          index.js  
    entry: path.resolve(__dirname, '../app/index/index.js'),
    //     
    output: {
        //       myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: 'static/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue'],
        alias: {
            'Vue': 'vue/dist/vue.js'
        }
    },
    module: {

        loaders: [
            //   vue-loader    .vue      
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel?presets=es2015',
                exclude: /node_modules/
            }
        ]
    },
    Favlist: {
        loaders: {
            js: 'babel'
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: '../index.html',
            template: path.resolve(__dirname, '../app/index/index.html'),
            inject: true
        })
    ]
}

7.構築コマンドの実行:'webpack-display-modules-display-chunks-config build/webpack.config.js’
出力ファイルが表示されます:

8.ここでは、ディレクトリ構造は次のとおりです.

output->static->indexを実行します.htmlというファイルは、途中でいろいろな穴に遭遇します(数百字省略..)
最後にやっと結果が見えてきました!!!

9.問題が発生しました.変更後のコード効果を表示するには、構築コマンドを実行する必要があります.これは効率的ではありません.そのため、webpack-dev-middlewareミドルウェアとwebpack-hot-middlewareミドルウェアをインストールする必要があります.npm install webpack-dev-middleware webpack-hot-middleware --save-devまたexpressのインストールも必要ですnpm install express --save-devWebpack-dev-middlewareミドルウェアを紹介します.Webpackに簡単なパッケージです.サーバサービスに接続することで、Webpackから送信されたファイルをサービスすることができます.いくつかのメリットがあります.
1、ハードディスクにファイルを書くのではなく、メモリの中にあります.私たちが構築したプロジェクトは実際にハードディスクにファイルを書くことです.
2、ファイルが変更されると、このミドルウェアは古いパッケージにサービスを提供しません.ブラウザを直接リフレッシュすると最新の効果が見えます.これにより、構築の時間を待つ必要がなく、見ただけで得られます.
buildディレクトリにdev-serverを作成します.jsファイルを書き込み、内容を書き込みます.

//        
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config')

//     express  
var app = express()

//   webpack        
var compiler = webpack(config)

//    webpack-dev-middleware    
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

//      
app.use(devMiddleware)

//    8888  ，     
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

View Code
       webpack.config.js     

①   config.output.publicPath     ‘/‘：

//     
    output: {
        //       myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: '/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
②   plugins   HtmlWebpackPlugin    filename     ‘app/index/index.html’

 plugins: [
        new HtmlWebpackPlugin({
            filename: 'app/index/index.html',
            template: path.resolve(__dirname, '../app/index/index.html'),
            inject: true
        })
    ]
  ，               ，    ：

node build/dev-server.js
        http://localhost:8888/app/index/index.html，             output->static->index.html             

   ？ 

      webpack.config.js， build       webpack.dev.conf.js  ，                ，       ：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
//       
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

module.exports = config;

ViewCodeのようなdev環境下のプロファイルは、dev-serverのみで基本プロファイルを上書きする.js中将var config = require('./webpack.config')変更後:var config = require('./webpack.dev.conf')ここでは、Webpack-dev-middlewareを使用して基本的な開発環境を構築していますが、コードを変更するたびに、ブラウザを手動でリフレッシュする必要があります.次に、ホットロードについて説明します(ホットロードとは、コードの変化を追跡し、インタフェースを自動的に更新し、プログラムの状態を維持することを意味します).Webpack-hot-middlewareミドルウェアがホットロードを完了する必要があります.
Webpack-dev-middlewareと組み合わせて使用するには、次のことが必要です.
ステップ1:インストール(すでにインストールされています)npm install webpack-dev-middleware --save-devステップ2:webpack.dev.conf.jsプロファイルに3つのプラグインを追加します.以下のようにします.

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
//       
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    //       
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),

    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

module.exports = config;

ステップ3:webpack.config.jsファイルのエントリ構成に「webpack-hot-middleware/client」を追加します.以下のようにします.entry: ['webpack-hot-middleware/client', path.resolve(__dirname, '../app/index/index.js')],ステップ4:dev-server.jsファイルでのプラグインの使用

//        
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')

//     express  
var app = express()

//   webpack        
var compiler = webpack(config)

//    webpack-dev-middleware    
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

//    webpack-hot-middleware    
var hotMiddleware = require('webpack-hot-middleware')(compiler)

//      
app.use(devMiddleware)
//      
app.use(hotMiddleware)

//    8888  ，     
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})
       ，     Favlist.vue         ‘black’：


              ，             ~\(≧▽≦)/~   。
![       ](http://img.blog.csdn.net/20161114154242623)
![       ](http://img.blog.csdn.net/20161114154255255)
     webpack.config.js              ，             ，   webpack.dev.conf.js         ：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
//       
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

//            webpack-hot-middleware/client
var devClient = 'webpack-hot-middleware/client';
Object.keys(config.entry).forEach(function (name, i) {
    var extras = [devClient]
    config.entry[name] = extras.concat(config.entry[name])
})

module.exports = config;

View Code
    webpack.config.js                  ：

entry: {
        index: [
            path.resolve(__dirname, '../app/index/index.js')
        ]
    },

サービスを再起動し、Favlistを変更します.vueの背景色を再度ブラウザで確認すると、ホットロードできることがわかります.ここまではまだ終わっていません.ここはFavlistを監視しているだけです.vueファイルの変更はindexを傍受できるようにする.htmlファイルの変更には、いくつかの仕事が必要です.
ステップ1:dev-server.jsファイルでhtmlファイルの変更イベントを傍受し、修正したdev-server.jsファイルは次のとおりです.

//        
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')

//     express  
var app = express()

//   webpack        
var compiler = webpack(config)

//    webpack-dev-middleware    
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// webpack  ，  html      
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        //     
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})

//      
app.use(devMiddleware)
//      
app.use(hotMiddleware)

//    8888  ，     
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

ViewCode第2歩:webpackを修正する.dev.conf.jsファイル

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
//       
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

//            webpack-hot-middleware/client
// var devClient = 'webpack-hot-middleware/client';
var devClient = './build/dev-client';
Object.keys(config.entry).forEach(function (name, i) {
    var extras = [devClient]
    config.entry[name] = extras.concat(config.entry[name])
})

module.exports = config;

View Code
      devClient  ，  ‘webpack-hot-middleware/client’     ‘./build/dev-client’，     ，             ：

   entry: {
        index: [
            './build/dev-client',
            path.resolve(__dirname, '../app/index/index.js')
        ]
    },
   ：  build/dev-client.js  ，       ：

var hotClient = require('webpack-hot-middleware/client')

//     ，  event.action === 'reload'        
hotClient.subscribe(function (event) {
    if (event.action === 'reload') {
        window.location.reload()
    }
})

ここではevent.Action==="reload"の場合にトリガーされ、dev-server.jsにパブリッシュされたイベント:

// webpack  ，  html      
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        //     
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})

これにより、htmlファイルが変更されると、手動でリフレッシュする必要がなく、最終的にページリフレッシュが実行されるまで傍受することができます.効果を見る:

IIS構成jquery ajax、json、mp 4ファイルサポート

Linux Cプログラミング——execveまとめ