成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

PascalXie / 2174人閱讀

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

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

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

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

$ mkdir myvuetest
$ cd myvuetest
$ npm init

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

2.在項(xiàng)目目錄下新建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,全局安裝因?yàn)槠渌?xiàng)目也會(huì)使用到這兩個(gè)包
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 為項(xiàng)目安裝其他依賴 下面i是install的簡(jiǎn)寫,注意[email protected]是安裝vue1.0版本的不然會(huì)出錯(cuò);-D是--save-dev的簡(jiǎn)寫,用于生成package.json中對(duì)應(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 [email protected] vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

這里解釋一部分包的作用:
webpack-dev-server: 用戶建立node的服務(wù)器環(huán)境,就是可以用lacalhost:8080等端口方式瀏覽文件
webpack-merge:開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)節(jié)的webpaak配置文件的配置合并
css-loader:編譯寫入css
style-loader:把編譯后的css整合進(jìn)html
file-loader:編譯寫入文件,默認(rèn)情況下生成文件的文件名是文件名與MD5哈希值的組合
vue:vue主程序
vue-laoder:編譯寫入.vue文件
vue-html-loader:編譯vue的template部分
vue-style-loader:編譯vue的樣式部分
vue-hot-reload-api:webpack對(duì)vue實(shí)現(xiàn)熱替換
babel-core:ES2015編譯核心

babel-loader:編譯寫入ES2015文檔
babel-preset-es2015:ES2015語(yǔ)法
babel-preset-stage-0:開(kāi)啟測(cè)試功能
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語(yǔ)法
      {
        test: /.js$/,
        loader: "babel",
        exclude: /node_modules/
      },
      //圖片轉(zhuǎn)化,小于8K自動(dòng)轉(zhuǎn)化為base64的編碼
      {
        test: /.(png|jpg|gif)$/,
        loader:"url-loader?limit=8192"
      }
    ]
  },
  //這里用于安裝babel,如果在根目錄下的.babelrc配置了,這里就不寫了
  babel: {
     presets: ["es2015","stage-0"],
     plugins: ["transform-runtime"]
  }
}

完成該配置我們?cè)诿钪羞\(yùn)行:

$ webpack

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/80676.html

相關(guān)文章

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

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

    陳偉 評(píng)論0 收藏0
  • 小白上學(xué)Webpack零基礎(chǔ)學(xué)習(xí)指導(dǎo)

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

    spademan 評(píng)論0 收藏0
  • 小白上學(xué)Webpack零基礎(chǔ)學(xué)習(xí)指導(dǎo)

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

    Galence 評(píng)論0 收藏0
  • 小白上學(xué)canvas零基礎(chǔ)

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

    zhaot 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<