實戰Vue簡易項目(2)定制開發環境

本章內容包含上一章思考的解決,還有一些其它的定制...

CSS預處理

關于對.vue文件模塊處理規則的配置依次可在build/webpack.base.conf.js->build/vue-loader.conf.js->build/utils.js文件中跟蹤;

loaders的關鍵在于build/vue-loader.conf.js文件中對utils.cssLoaders的調用:

...
module.exports = {loaders: utils.cssLoaders({sourceMap: sourceMapEnabled,extract: isProduction}),
...

說了這么一堆,我想表達啥呢?

因為個人在項目中,習慣用scss編寫樣式,跟蹤以上文件發現,針對.vue文件的預處理loaders中已經包含對scss的處理:

//utils.js文件exports.cssLoaders = function (options) {options = options || {}
...return {css: generateLoaders(),postcss: generateLoaders(),less: generateLoaders('less'),sass: generateLoaders('sass', { indentedSyntax: true }),scss: generateLoaders('sass'),stylus: generateLoaders('stylus'),styl: generateLoaders('stylus')}
}

這樣,是不是可以直接使用scss了呢?

恭喜你,會報錯...

查找發現,package.json中并沒有關于sass-loader的依賴,所以,我們需要安裝sass-loadernode-sassNPM包:npm i -D sass-loadernpm i -D node-sass

測試可行性

安裝完成后,在src/components/HelloWorld.vue文件中進行測試:

scss測試

局域網訪問

默認情況下,初始化的環境是不允許局域網訪問的,如果想局域網訪問的話,跟蹤路徑build/webpack.dev.conf.js為什么跟蹤這個文件呢?)可以發現:

devServer: {clientLogLevel: 'warning',
...host: HOST || config.dev.host,port: PORT || config.dev.port,open: config.dev.autoOpenBrowser,
...

這里指定了host字段,而HOST值在該文件可查找到const HOST = process.env.HOST,也就是說,如果想要局域網內訪問,有兩種解決方案:

  1. 在命令行中配置--host 0.0.0.0,即在/package.jsonscripts中修改 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
  2. config/index.js中:
module.exports = {dev: {
...host: 'localhost', // can be overwritten by process.env.HOSTport: 8080,
...

修改host: 'localhost',host: '0.0.0.0',,即可;

推薦使用配置文件修改,即:第二種。

至于,為什么跟蹤build/webpack.dev.conf.js文件?

因為這個功能是開發環境下獨有的,要修改開發環境吖,必然找開發環境的配置文件進行跟蹤。

注意:

  • 修改本地服務器配置,要重啟本地服務器(在命令行中Ctrl + c,然后npm run dev即可)才可應用新的配置。

測試可行性:

重啟項目后,在瀏覽器中輸入http://192.168.1.106:8080/#/192.168.1.106是你本地IP,可通過ipconfig /all查看)能夠訪問,就說明局域網內的其他端可以訪問。

不信?你試試手機。

打包文件路徑

如果,你想和其它朋友分享你的成果,部署到服務器上或直接打包發給朋友,通過npm run build即可生成靜態資源dist/

然而,打開dist/index.html,發現是空白頁,控制臺還報錯(資源找不到),人生失去了希望...

這是因為webpack生產配置文件output.publicPath配置有問題,跟蹤文件build/webpack.base.conf.js->build/webpack.prod.conf.js

很好,我們在build/webpack.base.conf.js中就發現了:

  output: {path: config.build.assetsRoot,filename: '[name].js',publicPath: process.env.NODE_ENV === 'production'? config.build.assetsPublicPath: config.dev.assetsPublicPath},

跟蹤config.build.assetsPublicPath找到config/index.js,修改:

  build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: '/', //將assetsPublicPath的值修改為'./'

為什么這樣修改呢?

這是因為打包文件引用所在地址的組成規則為output.publicPath + filename


然而,這樣并沒有結束

如果在樣式中引入圖片,會報圖片路徑錯誤,引用地址static/css/static/css/img/XXX.png

需要修改build/utils.js

   if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../'})} else {return ['vue-style-loader'].concat(loaders)}

webpack打包要區分兩個路徑:

  1. 打包路徑(文件存儲位置:output.path + [filename | name])
  2. 引用路徑(文件互相引用的位置:output.publicname + [filename | name])

ES6+

目前還不能結束...

目前ES6的語法成為了主流,如果你在項目中使用了ES6,在一些較舊的瀏覽器中,呵呵...

Object.assignArray.from...方法無法使用,程序報錯。

怎么辦呢?

npm i -S babel-polyfill安裝polyfill,它會為ES2015+添加的新的API作兼容為低版本瀏覽器可用,俗稱“墊片”。

需要將polyfill打包到生產包中,即build/webpack.base.conf.js文件中:

module.exports = {context: path.resolve(__dirname, '../'),entry: {app: './src/main.js' //需要修改為app: ['babel-polyfill','./src/main.js']},

章節回顧

  • 還記得如何預處理scss么,那如果使用Less呢?
  • 還記得如何局域網訪問么,那如果想修改端口呢?
  • 還記得如何打包部署么,可能會出現什么問題?
  • 還記得如何考慮舊版本瀏覽器兼容么?

思考

  • 項目結構怎么搭建呢?
  • 頁面結構怎么布局呢?
  • 哪些組件可以分離出來呢?
  • 哪些工具單元可以分離出來呢?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/253951.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/253951.shtml
英文地址,請注明出處:http://en.pswp.cn/news/253951.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

LINUX framebuffer

http://wangshh03.blog.163.com/blog/static/49103415201001231317484/ 一、FrameBuffer的原理 FrameBuffer 是出現在 2.2.xx 內核當中的一種驅動程序接口。 Linux是工作在保護模式下,所以用戶態進程是無法象DOS那樣使用顯卡BIOS里提供的中斷調用來實現直接寫屏&…

[POI2007]POW-The Flood

題目描述 給定一張地勢圖,所有的點都被水淹沒,現在有一些關鍵點,要求放最少的水泵使所有關鍵點的水都被抽干 輸入輸出格式 輸入格式: In the first line of the standard input there are two integers and , separated by a sin…

LOAM_velodyne學習(二)

LaserOdometry 這一模塊(節點)主要功能是:進行點云數據配準,完成運動估計 利用ScanRegistration中提取到的特征點,建立相鄰時間點云數據之間的關聯,由此推斷lidar的運動。我們依舊從主函數開始&#xff1…

戶外穿越

晚上很早就睡了,并且,太過激動,所以早上四點五十分就被驚醒,然后到早上鬧鐘響。 早上匆匆忙吃過早餐,就趕去坐車,到登山之前,坐了大巴車,又坐了景區的車,景區的路是山路十…

【oracle】關于創建表時用default指定默認值的坑

剛開始學create table的時候沒注意,學到后面發現可以指定默認值。于是寫了如下語句: 當我查詢的時候發現,查出來的結果是這樣的。。 很納悶有沒有,我明明指定默認值了呀,為什么創建出來的表還是空的呢?又跑…

Makefile中用宏定義進行條件編譯(gcc -D)/在Makefile中進行宏定義-D

在源代碼里面如果這樣是定義的: #ifdef MACRONAME //可選代碼 #endif 那在makefile里面 gcc -D MACRONAMEMACRODEF 或者 gcc -D MACRONAME 這樣就定義了預處理宏,編譯的時候可選代碼就會被編譯進去了。 對于GCC編譯器,有如下選項&…

python安裝與配置

首先下載python地址: https://www.python.org/downloads/release/python-361/下載頁面中有多個版本: web-based installer 是需要通過聯網完成安裝的 executable installer 是可執行文件(*.exe)方式安裝 embeddable zip file 嵌入式版本,可…

[OpenGL ES 03]3D變換:模型,視圖,投影與Viewport

[OpenGL ES 03]3D變換:模型,視圖,投影與Viewport 羅朝輝 (http://blog.csdn.net/kesalin) 本文遵循“署名-非商業用途-保持一致”創作公用協議 系列文章:[OpenGL ES 01]OpenGL ES之初體驗[OpenGL ES 02]OpenGL ES渲染管線與著色器…

LOAM_velodyne學習(三)

終于到第三個模塊了,我們先來回顧下之前的工作:點云數據進來后,經過前兩個節點的處理可以完成一個完整但粗糙的里程計,可以概略地估計出Lidar的相對運動。如果不受任何測量噪聲的影響,這個運動估計的結果足夠精確&…

監控視頻線種類 視頻信號傳輸介紹及各種視頻接口的傳輸距離

一.視頻信號接口 監控視頻線種類介紹: 按照材料區分有SYV及SYWV兩種,絕緣層的物理材料結構不同,SYV是實心聚乙烯電纜,SYWV是高物理發泡電纜,物理發泡電纜傳輸性能優于聚乙烯。 S--同軸電纜 Y--聚乙烯 V--聚氯乙烯 W…

免費節假日API 更新新功能了 新增農歷信息返回

感謝大家對免費節假日API的支持.最近看了別家的api于是增加了一些新功能即獲取日期的農歷信息. 這個新功能還處于測試階段如有問題歡迎反饋 檢查一個日期是詳細信息 https://tool.bitefu.net/jiari/?d20180101&info1 返回值 {"status": 1,"type": 1,…

新手算法學習之路----二叉樹(二叉樹最大路徑和)

摘抄自:https://segmentfault.com/a/1190000003554858#articleHeader2 題目: Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. For example: Given the below binary tree, 1/ \2 3Return 6. 思…

Ajax工作原理

詳見:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt238 在這篇文章中,我將從10個方面來對AJAX技術進行系統的講解。 1、ajax技術的背景 不可否認,ajax技術的流行得益于google的大力推廣,正是由于google earth、go…

各種視頻信號格式及端子介紹/VGA DVI HDMI區別

視頻信號是我們接觸最多的顯示信號,但您并不一定對各種視頻信號有所了解。因為國內用到的視頻信號格式和端子非常有限,一般就是復合視頻和S端子,稍高級一些的就是色差及VGA。對于那些經常接觸國外電器和二手設備的朋友,就會遇到各…

LOAM_velodyne學習(四)

TransformMaintenance 來到了最后一個模塊,代碼不是很長,我們在看完代碼之后,再詳細說明這個模塊的功能 依然主函數開始 int main(int argc, char** argv) {ros::init(argc, argv, "transformMaintenance");ros::NodeHandle nh;…

PHP數據庫類

<?phpclass Db{//私有靜態屬性存儲實例化對象自身private static $instance;//存儲PDO類的實例化private $pdo;//PDOStatement類private $stmt;//禁止外部實例化對象&#xff0c;鏈接數據庫private function __construct($config,$port,$charset){try{$this->pdo new P…

oracle參數文件、控制文件、數據文件、日志文件的位置及查詢方法

參數文件&#xff1a;所有參數文件一般在 $ORACLE_HOME/dbs 下 sqlplus查詢語句&#xff1a;show parameter spfile; 網絡連接文件&#xff1a; $ORACLE_HOME/dbs/network/admin 目錄中 控制文件&#xff1a;select * from v$controlfile; 數據文件&#xff1a;一般在oracleda…

Bishops Alliance—— 最大上升子序列

原題鏈接&#xff1a;http://codeforces.com/gym/101147/problem/F 題意&#xff1a;n*n的棋盤&#xff0c;給m個主教的坐標及其私有距離p&#xff0c;以及常數C&#xff0c;求位于同一對角線上滿足條件&#xff1a;dist(i, j) > p[i]^2 p[j]^2 C 的主教集合的元素個數最…

LeGO-LOAM學習

前言 在學習了LOAM之后&#xff0c;了解到LeGO-LOAM&#xff08;面向復雜情況的輕量級優化地面的雷達里程計&#xff09;&#xff0c;進行了一個學習整理。 Github&#xff1a;https://github.com/RobustFieldAutonomyLab/LeGO-LOAM 論文&#xff1a;https://github.com/Robu…

char data[0]用法總結

struct MyData { int nLen; char data[0]; }; 開始沒有理解紅色部分的內容&#xff0c;上網搜索下&#xff0c;發現用處很大&#xff0c;記錄下來。 在結構中&#xff0c;data是一個數組名&#xff1b;但該數組沒有元素&#xff1b;該數組…