摘要:但我們今天學(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
摘要:以上代碼功能很簡(jiǎn)單,就是把定義為一個(gè)模塊,在中引用,最終兩文件中要添加的內(nèi)容都顯示在中。我們的任務(wù)完成了,成功生成,合并,引入了,被執(zhí)行了。安裝,處理文件。 前言: 本套教程是零基礎(chǔ)學(xué)打包工具webpack; 后面會(huì)結(jié)合gulp+webpack搞定所有你得需求; 閑談: 百度搜了一下,雖然教程多,但是雜亂無(wú)章,實(shí)用的沒(méi)多少,都是匆匆了事,所以我就自己學(xué)了兩天,現(xiàn)在從最底層教大家完成we...
摘要:以上代碼功能很簡(jiǎn)單,就是把定義為一個(gè)模塊,在中引用,最終兩文件中要添加的內(nèi)容都顯示在中。我們的任務(wù)完成了,成功生成,合并,引入了,被執(zhí)行了。安裝,處理文件。 前言: 本套教程是零基礎(chǔ)學(xué)打包工具webpack; 后面會(huì)結(jié)合gulp+webpack搞定所有你得需求; 閑談: 百度搜了一下,雖然教程多,但是雜亂無(wú)章,實(shí)用的沒(méi)多少,都是匆匆了事,所以我就自己學(xué)了兩天,現(xiàn)在從最底層教大家完成we...
摘要:以上代碼功能很簡(jiǎn)單,就是把定義為一個(gè)模塊,在中引用,最終兩文件中要添加的內(nèi)容都顯示在中。我們的任務(wù)完成了,成功生成,合并,引入了,被執(zhí)行了。安裝,處理文件。 前言: 本套教程是零基礎(chǔ)學(xué)打包工具webpack; 后面會(huì)結(jié)合gulp+webpack搞定所有你得需求; 閑談: 百度搜了一下,雖然教程多,但是雜亂無(wú)章,實(shí)用的沒(méi)多少,都是匆匆了事,所以我就自己學(xué)了兩天,現(xiàn)在從最底層教大家完成we...
摘要:二次以及三次貝塞爾曲線都十分有用,一般用來(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)有...
閱讀 2924·2021-11-17 09:33
閱讀 1642·2021-10-12 10:13
閱讀 2468·2021-09-22 15:48
閱讀 2343·2019-08-29 17:19
閱讀 2597·2019-08-26 11:50
閱讀 1574·2019-08-26 10:37
閱讀 1740·2019-08-23 16:54
閱讀 2928·2019-08-23 14:14