基於webpack的vue實例

時間 2019-11-07

標籤基於 webpack vue 實例简体版

原文原文鏈接

這是我我的在學習vue+webpack的一個實例，但願對讀者是有用的，同時也求大神指教。菜鳥第一次寫這，水平有限。css

目錄結構

加載依賴

在這以前確保安裝了node和npmhtml
加載依賴vue

{
  "name": "05-five-vue",
  "version": "1.0.0",
  "description": "vue+webapck",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "dependencies": {
    "vue": "^1.0.18",
    "webpack": "^1.12.0"
  },
  "devDependencies": {
    "autoprefixer-loader": "^2.0.0",
    "babel": "^6.3.13",
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "css-loader": "^0.16.0",
    "file-loader": "^0.8.5",
    "html-loader": "^0.3.0",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "vue-html-loader": "^1.2.0",
    "vue-loader": "^7.2.0",
    "webpack": "^1.12.0",
    "webpack-dev-server": "^1.14.0"
  },
  "author": "guowenfh",
  "license": "MIT",
  "keywords": [
    "vue",
    "webpack"
  ]
}

在根目錄下建立package.json文件，複製上面的代碼，在根目錄的DOS命令中運行npm install；node

等待下載完後。jquery

webpack配置文件

根目錄下建立webpack.config.js文件webpack

var path = require('path');
// NodeJS中的Path對象，用於處理目錄的對象，提升開發效率。
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 模塊導入
module.exports = {
  entry: './src/main.js',
  //定義webpack輸出的文件，這裏設置了讓打包後生成的文件放在dist文件夾下的build.js文件中
  output: {
    path: path.join(__dirname, './dist'),
    // 文件地址，使用絕對路徑形式
    filename: '[name].js',
    //[name]這裏是webpack提供的根據路口文件自動生成的名字
    publicPath: '/dist/'
    // 公共文件生成的地址
  },
  // 服務器配置相關，自動刷新!
  devServer: {
    historyApiFallback: true,
    hot: false,
    inline: true,
    port:9010
  },
  //加載器
  module: {
    // 加載器
    loaders: [
      // 解析.vue文件
      { test: /\.vue$/, loader: 'vue' },
      // 轉化ES6的語法
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
      // 編譯css並自動添加css前綴
      { test: /\.css$/, loader: 'style!css!autoprefixer'},
      //.scss 文件想要編譯，scss就須要這些東西！來編譯處理
      //install css-loader style-loader sass-loader node-sass --save-dev
      { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
      // 圖片轉化，小於8K自動轉化爲base64的編碼
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
      //html模板編譯？
      { test: /\.(html|tpl)$/, loader: 'html-loader' },
    ]
  },
  // .vue的配置。須要單獨出來配置
  vue: {
    loaders: {
      css: 'style!css!autoprefixer',
      html:'html-loader'
    }
  },
  // 轉化成es5的語法
  babel: {
    presets: ['es2015'],
    plugins: ['transform-runtime']
  },
  resolve: {
    // require時省略的擴展名，如：require('module') 不須要module.js
    extensions: ['', '.js', '.vue'],
    // 別名，能夠直接使用別名來表明設定的路徑以及其餘
    alias: {
      filter: path.join(__dirname, './src/filters'),
      components: path.join(__dirname, './src/components')
    }
  },
    //插件
    plugins: [
        //根據模板插入css/js等生成最終的html
        new HtmlWebpackPlugin({
            filename: 'index.html',//生成的html生成路徑，相對於path
            inject: 'body',//js插入的位置，true插入head,false插入body
            template: 'index.html',//html模板路徑
            hash: false,//爲靜態資源生成hash值
            minify:{//壓縮HTML文件
                removeComments:true,//移除html中的註釋
                collapseWhitespace:false//刪除空白符與換行符
            }
        })
    ]
  // 開啓source-map，webpack有多種source-map，在官網文檔能夠查到
  devtool: 'eval-source-map'
}

編寫主要html文件

根目錄下建立index.htmles6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>webpack vue</title>
    <style>
        #app {
            margin: 20px auto;
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
<div id="app">

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

這裏引入的js是由webpack打包生成的web

編寫vue組件

下一步在在components目錄下建立app.vuenpm

<template>
    <div>
        <p>{{message}}</p>
        <input v-model="message">
    </div>
</template>
<script>
    //es6
    export default {
        el:"#app",
        //data:function(){}，    下面是es6寫法
        data () {
            return {
                message:"Hello vue!"
            }
        }
    }
</script>
<style lang="sass">
    /*測試一下對sass的編譯*/
    $qwe:#94FF97;
    body {
        background-color: $qwe;
        h1 {
            background-color: #eee;
            color: red;
            transform: translate(10%, 10%);
        }
        h1:hover {
            height:100px;
        }
        h2 {
            background-color: #999;
        }
    }
</style>

編寫入口文件

在src目錄下建立main.js文件json

//es6語法：
import Vue from "vue";//引入vue
//外部引入別的庫均可以用這樣的方式，好比jquery等。。
//引入咱們編寫的測試用vue文件。
import app from './components/app.vue';

Vue.config.debug = true;//開啓錯誤提示

//建立一個vue實例，掛載在#app上
new Vue(app);

到這裏一切都準備完畢，如今開始運行webpack，wabpack將文件打包到dist目錄生成mian.js，等到運行完畢