、1.開發工具是vscode，然後用vue腳手架搭建項目；

2.我是用安裝包安裝的vscode，直接下一步下一步傻瓜式安裝就可以了；安裝好之後打開它找到並點擊這個按鈕 ，然後輸入Chinese安裝這個 之後就是中文版的了；

3.正式進入開發之前，要根據項目需要選擇布局方式；我這裏選的是flexible+rem，如果實在不知道要選啥布局方式的話可以去網上多瀏覽一些移動端適配方案的案例，然後根據自己的需要去選擇。

4.配置flexible

　　①安裝lib-flexible（在項目的根目錄下安裝就好了）

　　 在命令行中運行如下安裝：

　　 npm i lib-flexible --save

　　②引入lib-flexible（這一點很重要，但是也很容易遺漏！！！）

　　 在項目入口文件main.js裏引入lib-flexible

　　 1 // main.js

　　 2 import ‘lib-flexible‘

5.安裝px轉換rem插件：繼續點擊這個按鈕 ，輸入px2rem找到 安裝後去設置1rem=?px，這個根據設計稿來定。如果ui給的圖是750px的，那就設置75；如果是375px的就設置37.5。這個插件非常好用，安裝並配置好了之後，只要在編譯器裏輸入一個px值，它自己換算出對應的rem；

6.使用vscode編譯工具開發項目，還有很多好用的插件可以下載：

7.記一個我搭建項目還有啟動項目時遇到的一個報錯 ，然後npm install chromedriver -g就可以解決了。

8.記一個語法eslint報錯 解決方法參考https://www.jianshu.com/p/23a5d6194a4b，配置vscode 讓它根據eslint格式化

9.css我用的是stylus開發的，https://blog.csdn.net/luckyone1111/article/details/80920404，我在webpack裏配置了文件別名，stylus引入時是相對這個別名引入的，~就是這個意思

10.開發時用到flex布局可以看這篇，講得很好 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。。。布局時百度過程中遇到一個好用的東西：css實時預覽 http://tools.jb51.net/code/cssPad

11.因為要用vue腳手架開發、所以必須安裝node環境。。。這次安裝node的時候我就遇到了麻煩，明明是全局安裝了node和npm，但是又使不動（比如在想在e盤安裝腳手架，它會說npm不是內部命令之類的）。

　 後面判斷應該是我安裝的選項裏沒配環境變量，可參考https://blog.csdn.net/qq_29712995/article/details/79094433這篇文章的解決方案（就是把node的安裝路徑加到環境變量中就可以了，

如果是win7的話就把要配置的路徑放上去，用分號隔開就行了，可參考https://jingyan.baidu.com/article/b24f6c82cba6dc86bfe5da9f.html），

當時我覺得麻煩就卸載了node重新安裝，重新安裝會自動配置的，但是要卸載幹凈才可以這樣。

新手開發移動端項目