小編給大家分享一下怎么用vue-cli來搭建vue項(xiàng)目和webpack,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的昆山網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
vue-cli
用vue-cli來搭建vue項(xiàng)目
第一步:全局安裝vue-cli
sudo npm install vue-cli -g
第二步:初始化一個(gè)項(xiàng)目
vue init webpack-simple projectName
第三步:把文件切換到初始化的項(xiàng)目中
cd projectName
第四步:安裝依賴
npm install
當(dāng)然也可以用淘寶鏡像cnpm來安裝,這樣快很多
cnpm install
第五步:運(yùn)行
npm run dev
完成一個(gè)初始化vue項(xiàng)目
webpack
要開始一個(gè)vue項(xiàng)目,
那也必須要了解webpack
webpack是一個(gè)前端資源模塊化管理和打包工具
首先你可以建立很多個(gè)js,css文件,但是利用webpack就只需要在index.html那里引用一個(gè)js文件,也就是所謂的打包文件,不需要去引用所以的js,css文件
第一步:全局安裝webpack
sudo npm install webpack -g
第二步:建立一個(gè)package.json基礎(chǔ)配置文件
npm init
第三步:安裝webpack的依賴
npm install webpack --save-dev
第四步:一個(gè)項(xiàng)目里面的index.html文件
<html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>
第五步:把需要的js,css文件單獨(dú)寫出來
//module.js module.exports = 'It works from module.js.' //entry.js document.write('It works.') document.write(required('./module.js'))
寫完需要的js文件
第六步:打包entry.js文件到bundle.js文件中
webpack entry.js bundle.js
第七步:假設(shè)還有css文件
//style.css body{ background:red }
現(xiàn)在有了css文件也想要把css文件打包進(jìn)去
第八步:把css文件也打包進(jìn)去
修改entry.js文件
require("!style-loader!css-loader!./style.css") // 載入 style.css document.write('It works.') document.write(require('./module.js'))
第九步:需要用到loader,自然要安裝
npm install css-loader style-loader
第十步:還需要再重新打包編譯
webpack entry.js bundle.js
css的文件步驟很復(fù)雜,那么有更簡單的辦法不需要寫的那么復(fù)雜
第十一步:建立一個(gè)配置js文件,webpack.config.js
//webpack.config.js var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' } ] } }
這個(gè)loaders:是一個(gè)解析器
test:就是需要解析模板的文件,是一個(gè)正則表達(dá)式
loader:是需要用什么方式去處理test所包含的文件,用xxx-loader去讀取test的正則文件
第十二步:然后就可以把css文件打包的時(shí)候簡單化了
require('./style.css')
再重新編譯一下就可以了
第十三步:不想要一直編譯,想實(shí)時(shí)監(jiān)控,
webpack --watch
第十四步:也可以開一個(gè)靜態(tài)web服務(wù)器,localhost,webpack-dev-server,全局安裝
npm install webpack-dev-server -g
第十五步:運(yùn)行webpack-dev-server:會(huì)實(shí)時(shí)監(jiān)控
webpack-dev-server
看完了這篇文章,相信你對“怎么用vue-cli來搭建vue項(xiàng)目和webpack”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道,感謝各位的閱讀!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文題目:怎么用vue-cli來搭建vue項(xiàng)目和webpack-創(chuàng)新互聯(lián)
鏈接地址:http://muchs.cn/article42/ddpihc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、電子商務(wù)、關(guān)鍵詞優(yōu)化、服務(wù)器托管、做網(wǎng)站、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容