新手開發移動端項目

、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從新安裝，從新安裝會自動配置的，可是要卸載乾淨才能夠這樣。