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

資訊專欄INFORMATION COLUMN

vue+webpack+scss+jade(pug)的環(huán)境搭建

GraphQuery / 3193人閱讀

摘要：標(biāo)簽聲明轉(zhuǎn)載須經(jīng)本人同意這篇博客就聊一聊如何用搭建的環(huán)境，以及拓展了下如何在搭建好的環(huán)境中使用以及，廢話不多說(shuō)，直接進(jìn)入主題。第三步補(bǔ)充，依賴擴(kuò)展現(xiàn)在，我們搭建的環(huán)境并不支持，語(yǔ)法，我們需要再加工一下配置。

標(biāo)簽：vue,webpack,jade,scss
聲明：轉(zhuǎn)載須經(jīng)本人同意
這篇博客就聊一聊如何用webpack搭建vue2.0的環(huán)境，以及拓展了下如何在搭建好的環(huán)境中使用scss以及pug（jade），廢話不多說(shuō)，直接進(jìn)入主題。

第一步 準(zhǔn)備工作

1.1首先要保證自己的環(huán)境中安裝了node.js，我們可以通過(guò)命令行node -v查看

如果出現(xiàn)版本號(hào)，說(shuō)明已經(jīng)安裝成功了。我這里的node版本是7.0.0，建議大家不要使用過(guò)老的版本。如果顯示node: command not found則需要安裝node，大家直接在node的官網(wǎng)下載安裝就好了
1.2安裝了node以后我們就可以使用npm包管理工具了，由于npm下載模塊速度很慢，所以這里建議大家先安裝淘寶的npm鏡像cnpm

npm install -g cnpm

安裝成功后我們就可以使用cnpm安裝依賴了，速度很快。

第二步 開(kāi)始搭建

2.1為了方便起見(jiàn)，我們直接選擇vue的官方腳手架工具vue-cli安裝，該工具提供開(kāi)箱即用的構(gòu)建工具配置，帶來(lái)現(xiàn)代化的前端開(kāi)發(fā)流程。只需一分鐘即可啟動(dòng)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$  vue init webpack my-project(你要建立的文件名稱，可任意)

vue init webpack my-project的時(shí)候會(huì)有一些配置供開(kāi)發(fā)者選擇，我簡(jiǎn)單解釋一下：

2.2接著輸入如下命令，你的環(huán)境就算初步搭建成功了

# 進(jìn)入目錄
$ cd my-project
# 安裝依賴，npm可替換為cnpm加快速度
$ npm install
# 運(yùn)行環(huán)境
$ npm run dev

這時(shí)我們可以看到一個(gè)命令行工具打開(kāi)了一個(gè)端口為8080的本地服務(wù)器，在瀏覽器輸入該地址后就可以打開(kāi)vue的頁(yè)面，到了這一步，我們就算把vue+webpack的環(huán)境搭建完畢了。

第三步 補(bǔ)充scss，pug依賴（擴(kuò)展）

現(xiàn)在，我們搭建的環(huán)境并不支持scss，pug語(yǔ)法，我們需要再“加工”一下配置。用到scss，pug的同學(xué)相信webpack已經(jīng)玩的很溜了，我這里就不詳細(xì)講了，直接上命令行

#安裝支持pug依賴
npm install pug pug-loader pug-filters -D
#安裝支持jade依賴
npm install jade jade-loader -D
#安裝支持scss依賴
npm install sass sass-loader node-sass -D

安裝完成后，進(jìn)入到/build目錄下，打開(kāi)webpack.base.conf.js 文件,找到如下圖位置：

將紅框中的內(nèi)容添加進(jìn)文件：

{
  test: /.scss$/,
  loader: "style!css!sass?sourceMap"
},
{
  test: /.jade$/,
  loader: "jade"
},
{
  test: /.pug$/,
  loader: "pug"
},

這樣，我們的.vue文件就可以支持pug，scss語(yǔ)法了
例：

//使用pug語(yǔ)法

//使用scss語(yǔ)法

搭建源碼外加小項(xiàng)目

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

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

相關(guān)文章

  • webpack 簡(jiǎn)易配置入門(mén)教程

    摘要：使用等預(yù)處理器編寫(xiě)可以將你項(xiàng)目中的所有文件，處理成瀏覽器能識(shí)別的文件。測(cè)試打包基本的配置就完成了。修改處理文件執(zhí)行順序是從右到左修改一下入口文件中的樣式引入打包測(cè)試完美通過(guò)。這時(shí)可以使用提供的配置來(lái)使引入文件的時(shí)候變得更加方便簡(jiǎn)單。 showImg(https://segmentfault.com/img/remote/1460000010844617); 本文正文鏈接 最近公司弄了個(gè)...

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

  • webpack在前端項(xiàng)目中使用心得一二

    摘要：熟悉了之后，各種新舊項(xiàng)目，大小項(xiàng)目都能用耍的飛起。使用作為文件中的模板安裝，記住不是，也不用配置，只需在標(biāo)簽中指定，就可以愉快的使用語(yǔ)法了，比起看起來(lái)簡(jiǎn)潔多了。 webpack做文件合并 使用構(gòu)建工具非常常用一個(gè)功能就是合并js和css文件，gulp和grunt都是編寫(xiě)相應(yīng)的任務(wù)來(lái)完成，轉(zhuǎn)到webpack突然懵逼了，簡(jiǎn)單的項(xiàng)目怎么做文件合并呢？其實(shí)只需把多個(gè)js文件同時(shí)引入到main....

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

  • vue-cli安裝和vs code 的相關(guān)配置

    摘要：在本文之前，先給大家講一下接下來(lái)需要安裝的東西和他們之間的聯(lián)系。的安裝一安裝的官網(wǎng)下載的安裝包。在或中執(zhí)行命令。以上，就是和的安裝與配置 在本文之前，先給大家講一下接下來(lái)需要安裝的東西和他們之間的聯(lián)系。 node: node是js服務(wù)執(zhí)行的環(huán)境，通常我們使用node實(shí)現(xiàn)前端的工程化。前端工程化有很多工具可以實(shí)現(xiàn)，比如webpack、glup等，他們都是基礎(chǔ)node進(jìn)行開(kāi)發(fā)的。 w...

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

  • Node中間層實(shí)踐（二）——搭建項(xiàng)目框架

    摘要：項(xiàng)目地址腳手架使用過(guò)，的同學(xué)都清楚，官方推薦的安裝方式是通過(guò)專用的來(lái)快速搭建一個(gè)由編譯打包的項(xiàng)目框架。用在層的模塊化，在中間層實(shí)現(xiàn)了模塊化。這樣，從中間層到前端都實(shí)現(xiàn)了熱加載。 版權(quán)聲明：更多文章請(qǐng)?jiān)L問(wèn)我的個(gè)人站Keyon Y，轉(zhuǎn)載請(qǐng)注明出處。 項(xiàng)目地址：https://github.com/KeyonY/NodeMiddle 腳手架？ 使用過(guò)angular2，vue2的同學(xué)都清楚，官...

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

  • webpack -> vue Component 從入門(mén)到放棄（四）

    摘要：先展示一下文件目錄結(jié)構(gòu)先把相關(guān)的依賴給裝好注意一下注釋只是為了解釋，在中不能寫(xiě)注釋插件加載器預(yù)編譯語(yǔ)法跨平臺(tái)環(huán)境用來(lái)設(shè)置命令行安裝預(yù)編譯語(yǔ)法的配置中的對(duì)象，用于處理目錄的對(duì)象，提高開(kāi)發(fā)效率。 Foreword 之前三篇大致介紹了webpack的用法，正如這個(gè)系列標(biāo)題而言 從webpack 到 vue Component,所以最后一篇文章當(dāng)然是要講 component, 不對(duì)應(yīng)該說(shuō)是結(jié)合...

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

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

0條評(píng)論

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