小白上學のwebpack+vue初級使用指南

PascalXie 發布于2019-08-20 11:38 / 2161人閱讀

摘要：但我們今天學的是，原因我還不會而且新手還是學習為主吧。原因中文文檔全，學習曲線簡單，很容易上手。后續總結在學習打包工具過程中由于出現的問題各種蛋疼，讓很多人都半途而廢。大家互相學習共同進步本節講的都是很基礎的東西，自己可以延展一下。

寫這篇文章的時候先說一下原因：
webpack：現在很流行的打包工具；推薦原因：學習成本比gulp，fis3等簡單，就是這么直接！
vue：國人開發的MVVM框架，一點都不遜于recat，vue2.0的執行速度比recat都快！推薦原因：http://www.cnblogs.com/terry0...這里很權威。但我們今天學的是vue1.0，原因：vue2.0我還不會(^_^)!而且新手還是vue1.0學習為主吧。原因：中文文檔全，學習曲線簡單，很容易上手。

課程開始：
需要技能：
1>.node.js環境
2>.npm 會使用 (我的筆記中有smart-npm可以解決npm慢的問題)
3>.vue 最基本的{{}}符號會用（不會的去vue官網看5分鐘教程就會）
4>.ES6 基本知道import是什么東西就行

適用學習人群：用過vue，但不知道如何和webpack一起結合使用的迷茫者；
項目創建
這里已經安裝過nodejs，npm，webpack
1.用命令行工具進入你需要創建模板文件夾輸入：

$ mkdir myvuetest
$ cd myvuetest
$ npm init

你會發現文件中出現了package.json暫時不用管；

2.在項目目錄下新建index.html




    
    Vue example


    {{message}}

3.在根目錄創建src文件夾，并在該文件夾下建立main.js

import Vue from "vue"
new Vue({
    el:"body",
    data:{
        message:"test success!"
    }
});

設置webpack
1.安裝webpack，webpack-dev-server以及相關的loaders

# 全局安裝webpack，webpack-dev-server，全局安裝因為其他項目也會使用到這兩個包
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 為項目安裝其他依賴 下面i是install的簡寫，注意vue@1.0是安裝vue1.0版本的不然會出錯；-D是--save-dev的簡寫，用于生成package.json中對應的包名稱，便于日后管理
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue@1.0 vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

這里解釋一部分包的作用：
webpack-dev-server：用戶建立node的服務器環境，就是可以用lacalhost：8080等端口方式瀏覽文件
webpack-merge：開發環境和生產環節的webpaak配置文件的配置合并
css-loader：編譯寫入css
style-loader：把編譯后的css整合進html
file-loader：編譯寫入文件，默認情況下生成文件的文件名是文件名與MD5哈希值的組合
vue：vue主程序
vue-laoder：編譯寫入.vue文件
vue-html-loader：編譯vue的template部分
vue-style-loader：編譯vue的樣式部分
vue-hot-reload-api：webpack對vue實現熱替換
babel-core：ES2015編譯核心

babel-loader：編譯寫入ES2015文檔
babel-preset-es2015：ES2015語法
babel-preset-stage-0：開啟測試功能
babel-runtime：babel執行環境

2.配置webpack.config.js
在根目錄下建立webpack.config.js，配置如下：

var path = require("path");
module.exports = {
  entry: "./src/main.js",
  //定義webpack輸出的文件，這里設置了讓打包后生成的文件放在dist文件夾下的build.js文件中
  output: {
    path: "./dist",
    publicPath:"dist/",
    filename: "build.js"
  },
  module: {
    loaders: [
      //轉化ES6語法
      {
        test: /.js$/,
        loader: "babel",
        exclude: /node_modules/
      },
      //圖片轉化，小于8K自動轉化為base64的編碼
      {
        test: /.(png|jpg|gif)$/,
        loader:"url-loader?limit=8192"
      }
    ]
  },
  //這里用于安裝babel，如果在根目錄下的.babelrc配置了，這里就不寫了
  babel: {
     presets: ["es2015","stage-0"],
     plugins: ["transform-runtime"]
  }
}

完成該配置我們在命令中運行：

$ webpack

打開index.html就可以看到瀏覽器中看到我們剛剛寫的文字了。

后續總結：在學習打包工具過程中由于出現的問題各種蛋疼，讓很多人都半途而廢。我經歷了半途而廢又重新撿起來，搜別人的問題解決自己的問題，然后就慢慢學會了。大家互相學習共同進步！本節講的都是很基礎的東西，自己可以延展一下。還有我推薦的是webpack+ES6+vue的新手學習模式！這樣你就不會被互聯網技術淘汰！可以關注我，我這個人挺懶的很久才寫一篇，但都是用最基礎的講通大家學習的疑惑！值得關注哦！^_^

GPU云服務器云服務器 webpack使用 webpack 使用公用cdn 阿里云vps小白怎么使用 vue使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80676.html

小白上學のWebpack零基礎學習指導

摘要：以上代碼功能很簡單，就是把定義為一個模塊，在中引用，最終兩文件中要添加的內容都顯示在中。我們的任務完成了，成功生成，合并，引入了，被執行了。安裝，處理文件。前言：本套教程是零基礎學打包工具webpack；后面會結合gulp+webpack搞定所有你得需求；閑談：百度搜了一下，雖然教程多，但是雜亂無章，實用的沒多少，都是匆匆了事，所以我就自己學了兩天，現在從最底層教大家完成we...

陳偉 2019-08-21 10:56 評論0 收藏0
小白上學のWebpack零基礎學習指導

摘要：以上代碼功能很簡單，就是把定義為一個模塊，在中引用，最終兩文件中要添加的內容都顯示在中。我們的任務完成了，成功生成，合并，引入了，被執行了。安裝，處理文件。前言：本套教程是零基礎學打包工具webpack；后面會結合gulp+webpack搞定所有你得需求；閑談：百度搜了一下，雖然教程多，但是雜亂無章，實用的沒多少，都是匆匆了事，所以我就自己學了兩天，現在從最底層教大家完成we...

spademan 2019-08-29 11:03 評論0 收藏0
小白上學のWebpack零基礎學習指導

摘要：以上代碼功能很簡單，就是把定義為一個模塊，在中引用，最終兩文件中要添加的內容都顯示在中。我們的任務完成了，成功生成，合并，引入了，被執行了。安裝，處理文件。前言：本套教程是零基礎學打包工具webpack；后面會結合gulp+webpack搞定所有你得需求；閑談：百度搜了一下，雖然教程多，但是雜亂無章，實用的沒多少，都是匆匆了事，所以我就自己學了兩天，現在從最底層教大家完成we...

Galence 2019-08-01 15:32 評論0 收藏0
小白上學のcanvas零基礎

摘要：二次以及三次貝塞爾曲線都十分有用，一般用來繪制復雜有規律的圖形。繪制三次貝塞爾曲線，為結束點，為控制點一，為控制點二。下邊的圖能夠很好的描述兩者的關系，二次貝塞爾曲線有一個開始結束點藍色以及一個控制點紅色，而三次貝塞爾曲線使用兩個控制點。元素看起來和元素很相像，唯一的不同就是它并沒有 src 和 alt 屬性。實際上，標簽只有兩個屬性—— width和height。當沒有...

zhaot 2019-08-29 11:05 評論0 收藏0