以下內容主要是為了方便記錄自己在工作中遇到的項目問題搜尋到的解決方法,肯定方法不唯一,這里只是給出解決了我的問題的方法,大家走過路過隨便瞧瞧較好啦嘻嘻
1、使用@vue/cli 4.x 創建vue項目時使用iconfont 圖標無法顯示——前者版本問題
由于4.x版本是10月份剛發布的,可能存在版本沖突問題,目前沒有找到合適的解決方法,將@vue/cli版本降低成3.0后圖標能正常顯示
2、vue項目無法實現熱更新
我的做法是將卸載舊版本的?vue-cli ,看官網描述:
關于舊版本:Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
卸載后便能熱更新了,懵逼一臉……
3、git關聯github遠程庫
參考:Git關聯遠程GitHub倉庫
4、mongodb安裝連接并加到系統服務中
我下載的版本選擇的是3.XX的版本,4.xx最新版路徑比較深,也比較大。如果安裝出現錯誤“service MongoDB failed to start,verify that you have sufficient privileges to start...”可直接選擇忽略
隨后創建相應的文件夾,參考如何安裝mongodb并添加到windows服務,但是文章內的第五步系統服務連接時,我使用的是下面鏈接的相關的命令行
1. mongod --logpath E:\mongodb\logs\mongodb.log --logappend --dbpath E:\mongodb\data\db --serviceName MongoDB --install --auth(auth表示需不需要加上用戶驗證,最好不要,否則訪問時需要驗證你的身份) // 沒有文字提示即表示配置成功2. net start MongoDB // 啟動服務->出現“服務沒有響應控制功能”錯誤3. sc delete MongoDB //先卸載掉服務//再重復第一步和第二部即可啟動服務
參考:MongoDB下,啟動服務時,出現“服務沒有響應控制功能”解決方法、Nodejs學習筆記(十四)— Mongoose介紹和入門
cmd命令行直接跳轉相應的地址可以鍵入
cd /d 你的路徑
視圖工具沒有使用他們家自配的compass,這個下載太慢了,花了我一個晚上才裝好……雖然蠻好看的,但是最終還是選擇了studio3T來作為mongodb的視圖工具,破解版參考:Studio 3T怎么激活?Studio 3T 2019 64位無限試用安裝激活教程(附下載)
5、利用npm下載指定版本
npm install -g @vue/cli@3.x.x
6、vscode保存時自動根據項目的eslintrc文件格式化代碼
參考:vscode保存代碼,自動按照eslint規范格式化代碼設置
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"editor.quickSuggestions": null,"files.eol": "\n","editor.tabSize": 4,"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","typescript.tsdk": "node_modules/typescript/lib","editor.codeActionsOnSave": {"source.fixAll.eslint": true}
7、初始化數組并全部填充為0
new Int8Array(26) //表示二進制補碼8位有符號整數的數組,它的元素默認初始化為0
補:a的ASCLL碼是97,字符轉ASCLL碼可以用charCodeAt,相反互轉是fromCharCode
參考:Int8Array
8、編寫css順序規范建議
vscode使用scss格式化(排版)代碼的輔助插件——csscomb
配置如下:
"csscomb.formatOnSave": false,"csscomb.preset": {"always-semicolon": false,"block-indent": 2,"csscomb.preset": "csscomb", // csscomb / yandex / zen or custom config"color-shorthand": true,"eof-newline": true,"exclude": ["node_modules/**"],"leading-zero": true,"quotes": "single","remove-empty-rulesets": true,"space-after-colon": "","space-after-combinator": 1,"space-before-closing-brace": "\n","space-before-opening-brace": 1,"tab-size": 2,"vendor-prefix-align": true,"lines-between-rulesets": 0,"space-after-opening-brace": 1,"space-after-selector-delimiter": 1 },"csscomb.supportEmbeddedStyles": false,"csscomb.syntaxAssociations": {},我使用了自定義預設
"csscomb.preset": {"always-semicolon": false,"block-indent": 4,"sort-order": [ "content","$variable","$include","display","visibility","float","clear","position","top","right","bottom","left","z-index","width","min-width","max-width","height","min-height","max-height","overflow","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","border","border-top","border-right","border-bottom","border-left","border-width","border-top-width","border-right-width","border-bottom-width","border-left-width","border-style","border-top-style","border-right-style","border-bottom-style","border-left-style","border-color","border-top-color","border-right-color","border-bottom-color","border-left-color","outline","list-style","table-layout","caption-side","border-collapse","border-spacing","empty-cells","font","font-family","font-size","line-height","font-weight","text-align","text-indent","text-transform","text-decoration","letter-spacing","word-spacing","white-space","vertical-align","color","background","background-color","background-image","background-repeat","background-position","opacity","cursor","quotes","...","$include media"],"color-shorthand": true,"eof-newline": true,"exclude": ["node_modules/**"],"leading-zero": true,"quotes": "single","remove-empty-rulesets": true,"space-after-colon": "","space-after-combinator": 1,"space-before-closing-brace": "\n","space-before-opening-brace": 1,"tab-size": 2,"vendor-prefix-align": true,"lines-between-rulesets": 0,"space-after-opening-brace": "\n","space-between-declarations": "\n ","space-after-selector-delimiter": 1 },
我使用了自定義預設,自己看著比較順眼……
?
9、前端網頁項目開發前期準備工具
- Browsersync:前端頁面項目實時監聽html、js、css、sass、less等文件的改動
npm install -g browser-sync
browser-sync start --server --files "**/*.css, **/*.html, **/*.js" //使用 **(表示任意目錄)匹配,任意目錄下任意.css 、.js 或 .html文件。
- Scss:預處理器使得大而復雜的樣式表更加清晰易懂,易于維護
npm install -g sass
sass --watch scss:css // 監聽scss文件夾下的所有scss文件并實時編譯到css文件夾下
- 使用autoprefixer自動為css/less/sass增加前綴
這里我是在vscode里的插件庫下載autoprefixer的,下載后看這篇文章即可,主要是
在vscode里的setting.json文件里增加:"autoprefixer.formatOnSave": false,
"autoprefixer.browsers": ["last 2 versions", "> 5%"] // 默認
之后你在vscode的preferences的keyboard Shortcuts里找到autoprefixer,依據你的喜好設置快捷鍵,就可以自動增加前綴了,但是vue這些文件里的css和js以及template語言都混在一起了,所以需要借助webpack這些包管理器才能成功。具體之后會看看如何操作。在線轉換網址https://autoprefixer.github.io/
參考:使用 BrowserSync 來實現內容變動之后的實時刷新、15分鐘學會SASS、VsCode從零開始配置一個屬于自己的Vue開發環境
10、elementUI組件打包大小優化:
elementUI按需引入兩種方法、Vue Cli3-x按需引入ElementUi
?