国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

GraphQuery / 3183人閱讀

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

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

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

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

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

npm install -g cnpm

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

第二步 開始搭建

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

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

vue init webpack my-project的時候會有一些配置供開發(fā)者選擇，我簡單解釋一下：

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

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

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

第三步 補充scss，pug依賴（擴展）

現(xiàn)在，我們搭建的環(huán)境并不支持scss，pug語法，我們需要再“加工”一下配置。用到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

安裝完成后，進入到/build目錄下，打開webpack.base.conf.js 文件,找到如下圖位置：

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

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

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

//使用pug語法

//使用scss語法

搭建源碼外加小項目

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

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

相關(guān)文章

  • webpack 簡易配置入門教程

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

    JackJiang 評論0 收藏0

  • webpack在前端項目中使用心得一二

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

    qieangel2013 評論0 收藏0

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

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

    Loong_T 評論0 收藏0

  • Node中間層實踐（二）——搭建項目框架

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

    DrizzleX 評論0 收藏0

  • webpack -> vue Component 從入門到放棄（四）

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

    z2xy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<