移動開發【4】 Vue-cli vue腳手架搭建

• 該部分分兩個階段:
  

老版本vue-cli腳手架搭建

• 一開始用的是老版本，就記錄了一下

• 如果源沒換，先換個源

  • npm config set registry https://registry.npm.taobao.org

• 先裝webpack，筆者之前沒接觸過，所以從0開始裝

  • npm install webpack webpack-cli -g
  • 裝的時候記得裝上腳手架，當然如果忘記也會有提示你需要裝腳手架，比如：

• 再全局裝Vue-cli

  • npm install vue-cli --global vue-cli

• 查看版本號

  • 這裏注意下必須是vue -V,小寫的是不行的

• 初始化

  • vue init webpack project_name

  • 如果一直卡在download template，試一試重裝webpack，我是這麼解決的。

  • 接下來參考博客：https://www.cnblogs.com/ming1025/p/9887247.html

    Project name (baoge)： -----項目名稱，直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲什麼文件名要小寫 ，可以參考一下。
    Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字
    Author ()： ----作者，輸入你的大名
    接下來會讓用戶選擇：
    Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了
    Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裏就輸入“y”後回車即可。
    Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
    接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
    Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
    Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
    

• npm run dev 看看有沒有創建成功

vue-cli 4.x腳手架搭建

• 裝webpack，同上
• 然後是裝vue/cli：npm install -g @vue/cli
• 新建項目：vue create project-name
• 由於新手，以下選了默認：
• 運行是否可以：npm install+npm run serve(注意不是run dev，根據init的提示，npm install應該也可以不用，但是我爲了保險起見還是加了上去)
• 然後就是熟悉的畫面，和老版一樣的入口

補充——GUI創建

• 剛在官方文檔發現的可視化創建方法，有點意思
• 選好地址打開cmd vue ui開啓可視化
• 需要注意的是，這裏顯示開在800端口，應該是個顯示錯誤，實際上是8000端口，然後界面還是很友好的，畢竟是個前端框架~