成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

小白上學(xué)のwebpack+vue初級使用指南

PascalXie / 2284人閱讀

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

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

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

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

$ mkdir myvuetest
$ cd myvuetest
$ npm init

你會發(fā)現(xiàn)文件中出現(xiàn)了package.json暫時不用管；

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




    
    Vue example


    
{{message}}

3.在根目錄創(chuàng)建src文件夾，并在該文件夾下建立main.js

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

設(shè)置webpack
1.安裝webpack，webpack-dev-server以及相關(guān)的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中對應(yīng)的包名稱，便于日后管理
$ 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的服務(wù)器環(huán)境，就是可以用lacalhost：8080等端口方式瀏覽文件
webpack-merge：開發(fā)環(huán)境和生產(chǎn)環(huán)節(jié)的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實現(xiàn)熱替換
babel-core：ES2015編譯核心

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

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

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

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

$ webpack

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

后續(xù)總結(jié)：在學(xué)習(xí)打包工具過程中由于出現(xiàn)的問題各種蛋疼，讓很多人都半途而廢。我經(jīng)歷了半途而廢又重新?lián)炱饋恚褎e人的問題解決自己的問題，然后就慢慢學(xué)會了。大家互相學(xué)習(xí)共同進步！本節(jié)講的都是很基礎(chǔ)的東西，自己可以延展一下。還有我推薦的是webpack+ES6+vue的新手學(xué)習(xí)模式！這樣你就不會被互聯(lián)網(wǎng)技術(shù)淘汰！可以關(guān)注我，我這個人挺懶的很久才寫一篇，但都是用最基礎(chǔ)的講通大家學(xué)習(xí)的疑惑！值得關(guān)注哦！^_^

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80676.html

相關(guān)文章

  • 小白上學(xué)のWebpack零基礎(chǔ)學(xué)習(xí)指導(dǎo)

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

    陳偉 評論0 收藏0

  • 小白上學(xué)のWebpack零基礎(chǔ)學(xué)習(xí)指導(dǎo)

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

    spademan 評論0 收藏0

  • 小白上學(xué)のWebpack零基礎(chǔ)學(xué)習(xí)指導(dǎo)

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

    Galence 評論0 收藏0

  • 小白上學(xué)のcanvas零基礎(chǔ)

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

    zhaot 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<