nodejs環境
nodejs是當下前端工程化開發必不可少的環境, 使用 nodejs的 npm功能來管理依賴包
查看node 和 npm的版本
node -v #查看node版本npm -v #查看npm版本
git版本控制
git版本控制工具是目前最為流行的分布式版本管理工具,代碼的**提交, 檢出, 日志**, 都需要通過git完成
git --version #查看git安裝版本
npm淘寶鏡像
npm是非常重要的npm管理工具,由于npm的服務器位于國外, 所以一般建議 將 npm設置成國內的淘寶鏡像
npm config set registry https://registry.npm.taobao.org/ #設置淘寶鏡像地址npm config get registry #查看鏡像地址
vscode編輯器
vscode編輯器插件 + vetur + eslint

-
除此之外, eslint需要在vscode中進行一些參數的配置
{ "eslint.enable": true,"eslint.run": "onType","eslint.options": {"extensions": [".js",".vue",".jsx",".tsx"]},"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}


?
重置樣式(normalize.css)
一般瀏覽器必須將一些最低樣式應用于元素,也就是說每個瀏覽器對初級元素,都有自己設置的初始化樣式,而normalize就是可以對不同瀏覽器的樣式進行規范化,刪除了瀏覽器的不一致性,保留了一組優化后 可以依賴的基本樣式,在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性
執行 npm i normalize.css 安裝重置樣式的包
在?main.js
?導入?normalize.css
?即可
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'+import 'normalize.css'createApp(App).use(store).use(router).mount('#app')
公用樣式(common.less)
// 重置樣式
* {box-sizing: border-box;}html {height: 100%;font-size: 14px;}body {height: 100%;color: #333;min-width: 1240px;font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif}ul,h1,h3,h4,p,dl,dd {padding: 0;margin: 0;}a {text-decoration: none;color: #333;outline: none;}i {font-style: normal;}input[type="text"],input[type="search"],input[type="password"], input[type="checkbox"]{padding: 0;outline: none;border: none;-webkit-appearance: none;&::placeholder{color: #ccc;}}img {max-width: 100%;max-height: 100%;vertical-align: middle;}ul {list-style: none;}#app {background: #f5f5f5;user-select: none;}.container {width: 1240px;margin: 0 auto;position: relative;}.ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.ellipsis-2 {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}.fl {float: left;}.fr {float: right;}.clearfix:after {content: ".";display: block;visibility: hidden;height: 0;line-height: 0;clear: both;}
在main.js中引用就行
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import 'normalize.css'
+import '@/assets/styles/common.less'createApp(App).use(store).use(router).mount('#app')
?