咳咳，給忘記了，話不多說更新更新

>這次寫的是關于vue框架開發的一些流程，可能不是那么詳細，請大牛們斧正（主要是關于代碼方面的我盡量細講，作業程序暫時不講）

1.安裝

cnpm/npm i @vue/cli -g 這里cnpm是指用淘寶源，因為下載速度更快下載vue的腳手架

2.創建專案

vue create 專案名稱在終端創建專案
選擇（可以根據自己的碼代碼的風格選用大部分人會帶上eslint代碼規范工具）
優雅降級
css前處理器
ts
vue版本

3.啟動專案

啟動專案 yarn serve / npm run serve (這里我要說yarn和npm都是包管理工具，但是yarn是最新的，經過重新設計的npm客戶端，它的下載和安裝速度比npm快了一點點，當然要先下載cnpm/npm i yarn -g)
yarn和npm主要區別
1.yarn不需要互聯網連接就能安裝本地快取的依賴項，提供了離線模式，npm沒有
2.yarn更加簡潔，能更加直觀列印重要的資訊，還有語意清晰

4.使用專案

1.組件匯入
import Hello from ‘相對路徑’
通過components注冊
2.style
- css
  less
  scss
  stylus
  “scoped規定樣式作用范圍的”
  (這里作者有話說，三種都是當下主流，小公司使用less因為安裝簡單，使用簡單，但是遇到大量的自定義函式和運算子就hold不住的，大公司使用scss和stylus，好多人說scss安裝難“咳咳”作者作業也沒怎么用過就不知道怎么解決了，反正強烈推薦stylus,它支持大括號和縮進兩種語法，甚至可以隨性地混著寫用起來舒服，唯一一點不好的是老找不到結束范圍)
3.解決資料請求跨域問題（這個問題涉及優點廣，作者挑實用的講）
1.在vue.config.js/devServer/proxy配置
```
devServer{
proxy: {
	'/ajax': {
		target: '目標網址'，
		changeOrigin: true   
	}
}
```

}
上是統一域名的情況下
不統一域名用下面
2.devServer{
proxy: {
‘/api’: {
target: ‘目標網址’，
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
（作者有話說：在vue-cli3中,默認changeOrigin的值是true,意味著host設定成target,這與cue-cli2不一致,vue-cli2這個默認值是false，了解可學習link.）

5.各個檔案取名以及作用

src/pages | src/views | src/routes 展示頁面
- src/utils 公共函式封裝庫
- src/interface ts定義的型別
- src/router 路由 — 頁面跳轉
- src/store 資料存盤和管理的目錄
- src/components 公共組件
- src/assets 靜態資源檔案夾
- fonts 字體包
- img 靜態圖片

6.進行移動端配置

移動端兼容：添加meta標簽

       - [參考檔案](https://blog.csdn.net/yc123h/article/details/51356143)
       - 移動端禁用： 雙指縮放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  - 移動端自適應
        - 方案
        - 手動計算rem
        - flex + rem 
        - 設計稿--> px ---- 移動端的rem 
        -  插件 px2rem  好用
        - http://www.dsiab.com/1601850633375
        - 去除瀏覽器默認樣式
        - assets/style/reset.scss 
        - 在 app.vue/style中引入reset.scss

以上就是今日的分享了，最后感嘆一下“代碼的海洋里，沒回頭路，一踏出就天涯海角見”

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/212179.html

標籤：其他

上一篇：前端面試題整合（JS從看懂到看開）

下一篇：javascript實作搜索篩選功能

2020-11-11，單身快樂