在正式開始項目之前，要選定項目的技術方案，並且利用項目腳手架工具生成初始的項目結構，根據公司的實際情況，搭建好項目目錄，根據實際使用情況，安裝好需要的工具及轉換器，設定好初始的項目文件，以及清除默認格式等
less
sass
stylus
fastclick
mint-ui
-
初始化項目結構（vue init webpack myitzb）
![]()
修改相關配置（config index.js autoopenbrowser port；assets/component app.vue main.js router index.js hello route:[];要刪除相關默認的路由和組件）
-
目錄結構（一般根據各個公司要求修改src文件目錄）
![]()
![]()
項目技術結構選型
基礎：vue+vuex+vuerouter
網絡請求：axios（官方推薦）
css預處理器：less/sass/stylus/postcss（vue集成）
postcss:使用NodeJS編寫的一款css預處理工具，類似於sass/less/stylus等預處理工具，但是它本身沒有太過強大的功能，相當於一個插件平臺，圍繞這個平臺有很多優秀插件。例如：vue-cli默認集成的postcss-url：用於處理url路徑；autoprefixer：自動添加瀏覽器適配的前綴；cssnano：自動優化壓縮css代碼。
![]()
stylus
可以省略{}，每個css語句後面的；，tab鍵加選擇器代表後代，&代表父選擇器如：
ul
list-style:none;
li
float:left
&:nth-child(3)
background-color:red
stylus和less·sass一樣可以設置變量·複用的樣式塊·通過tab表示後代選擇器·通過&表示父選擇器
如何選擇less
1 安裝less npm i less -D
2 安裝less-loader npm i less-loader -D
3 設置模板file-setting-editor-file and code template-vue single file component scoped lang=“less”
![]()
-
導入reset.css文件清除瀏覽器默認樣式（static存放第三方靜態css文件）
![]()
![]()
-
導入base.css文件清空默認樣式設置功能類（assets存放自己的靜態文件，主要是左浮/右浮/清除浮動/輸入框/超鏈接/圖片等的默認樣式，也可以封裝常用的功能類，比如主色）
![]()
導入fastclick處理移動端的點擊事件，默認會延遲100~300ms判斷雙擊。
fastclick
1 安裝 npm i fastclick -S
2 導入fastclick
3 註冊fastclick
![]()
不同設備的適配：媒體查詢/em/rem/vw/js處理/rpx
一般思路使根據不同屏幕的寬度設置不同的頁面，或者得到瀏覽器的默認寬度，以750px的設計標準自動根據頁面寬度對元素大小進行縮放，不單單是body，一般body和html都要初始化寬高爲100%
如何在項目中使用安裝的文件
1 安裝文件和loader在對應的未知標識使用，如less
2 下載文件在對應的位置導入使用，如reset.css和base.css
3 安裝文件導入並且聲明要使用，如fastclick和mint-ui