摘要:標簽聲明轉載須經本人同意這篇博客就聊一聊如何用搭建的環境,以及拓展了下如何在搭建好的環境中使用以及,廢話不多說,直接進入主題。第三步補充,依賴擴展現在,我們搭建的環境并不支持,語法,我們需要再加工一下配置。
標簽:vue,webpack,jade,scss
聲明:轉載須經本人同意
這篇博客就聊一聊如何用webpack搭建vue2.0的環境,以及拓展了下如何在搭建好的環境中使用scss以及pug(jade),廢話不多說,直接進入主題。
1.1首先要保證自己的環境中安裝了node.js,我們可以通過命令行node -v查看
如果出現版本號,說明已經安裝成功了。我這里的node版本是7.0.0,建議大家不要使用過老的版本。如果顯示node: command not found則需要安裝node,大家直接在node的官網下載安裝就好了
1.2安裝了node以后我們就可以使用npm包管理工具了,由于npm下載模塊速度很慢,所以這里建議大家先安裝淘寶的npm鏡像cnpm
npm install -g cnpm
安裝成功后我們就可以使用cnpm安裝依賴了,速度很快。
第二步 開始搭建2.1為了方便起見,我們直接選擇vue的官方腳手架工具vue-cli安裝,該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需一分鐘即可啟動帶熱重載、保存時靜態檢查以及可用于生產環境的構建配置的項目:
# 全局安裝 vue-cli $ npm install --global vue-cli # 創建一個基于 webpack 模板的新項目 $ vue init webpack my-project(你要建立的文件名稱,可任意)
vue init webpack my-project的時候會有一些配置供開發者選擇,我簡單解釋一下:
2.2接著輸入如下命令,你的環境就算初步搭建成功了
# 進入目錄 $ cd my-project # 安裝依賴,npm可替換為cnpm加快速度 $ npm install # 運行環境 $ npm run dev
這時我們可以看到一個命令行工具打開了一個端口為8080的本地服務器,在瀏覽器輸入該地址后就可以打開vue的頁面,到了這一步,我們就算把vue+webpack的環境搭建完畢了。
第三步 補充scss,pug依賴(擴展)現在,我們搭建的環境并不支持scss,pug語法,我們需要再“加工”一下配置。用到scss,pug的同學相信webpack已經玩的很溜了,我這里就不詳細講了,直接上命令行
#安裝支持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 文件,找到如下圖位置:
將紅框中的內容添加進文件:
{ test: /.scss$/, loader: "style!css!sass?sourceMap" }, { test: /.jade$/, loader: "jade" }, { test: /.pug$/, loader: "pug" },
這樣,我們的.vue文件就可以支持pug,scss語法了
例:
//使用pug語法 #app img.vue(src="./assets/logo.png") Hello //使用scss語法
搭建源碼外加小項目
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/50242.html
摘要:使用等預處理器編寫可以將你項目中的所有文件,處理成瀏覽器能識別的文件。測試打包基本的配置就完成了。修改處理文件執行順序是從右到左修改一下入口文件中的樣式引入打包測試完美通過。這時可以使用提供的配置來使引入文件的時候變得更加方便簡單。 showImg(https://segmentfault.com/img/remote/1460000010844617); 本文正文鏈接 最近公司弄了個...
摘要:熟悉了之后,各種新舊項目,大小項目都能用耍的飛起。使用作為文件中的模板安裝,記住不是,也不用配置,只需在標簽中指定,就可以愉快的使用語法了,比起看起來簡潔多了。 webpack做文件合并 使用構建工具非常常用一個功能就是合并js和css文件,gulp和grunt都是編寫相應的任務來完成,轉到webpack突然懵逼了,簡單的項目怎么做文件合并呢?其實只需把多個js文件同時引入到main....
摘要:在本文之前,先給大家講一下接下來需要安裝的東西和他們之間的聯系。的安裝一安裝的官網下載的安裝包。在或中執行命令。以上,就是和的安裝與配置 在本文之前,先給大家講一下接下來需要安裝的東西和他們之間的聯系。 node: node是js服務執行的環境,通常我們使用node實現前端的工程化。前端工程化有很多工具可以實現,比如webpack、glup等,他們都是基礎node進行開發的。 w...
摘要:項目地址腳手架使用過,的同學都清楚,官方推薦的安裝方式是通過專用的來快速搭建一個由編譯打包的項目框架。用在層的模塊化,在中間層實現了模塊化。這樣,從中間層到前端都實現了熱加載。 版權聲明:更多文章請訪問我的個人站Keyon Y,轉載請注明出處。 項目地址:https://github.com/KeyonY/NodeMiddle 腳手架? 使用過angular2,vue2的同學都清楚,官...
摘要:先展示一下文件目錄結構先把相關的依賴給裝好注意一下注釋只是為了解釋,在中不能寫注釋插件加載器預編譯語法跨平臺環境用來設置命令行安裝預編譯語法的配置中的對象,用于處理目錄的對象,提高開發效率。 Foreword 之前三篇大致介紹了webpack的用法,正如這個系列標題而言 從webpack 到 vue Component,所以最后一篇文章當然是要講 component, 不對應該說是結合...
閱讀 2852·2023-04-25 18:58
閱讀 981·2021-11-25 09:43
閱讀 1216·2021-10-25 09:46
閱讀 3504·2021-09-09 11:40
閱讀 1698·2021-08-05 09:59
閱讀 874·2019-08-29 15:07
閱讀 964·2019-08-29 12:48
閱讀 704·2019-08-29 11:19