哼哼，先來附上幾個專業的連結

• Vue-cli 基礎教學
• Vue CLI3 安裝與建立 vue 專案
• Vue-CLI 官網 创建一个项目

今天來看↑↑↑大神們的文章 裝裝厲害厲害一下

• Step 1： 再次打開我完美的虛擬環境＋打開我完美的terminal(終端機)
  
  ▲ 再次瞧瞧我完美的虛擬環境＋打開我完美的terminal(終端機)

• Step 2： 打上建立專案命令，來起一個專案名吧，按下你的Enter然後...敬請期待

      vue create plan-b
  

  

  !!等等!!

  專案不要隨便建
  等等找不到
  建之前先跳到你想要的資料夾下唄
  為了方便，菜鳥的我就建在桌面下吧 哈哈哈

      cd Desktop
  

  

• Step 3： 我們跟著大神們的腳步，手動自己想要的設定吧：

  • (1) 選擇 Manually select feactures (手動選擇設定，以下操作 空白鍵：選擇、Enter：確定、上下鍵)

  

  

  • (2) 選擇安裝工具，這裡我選擇大神選的：
    • (a) Babel： 翻譯ES6語法，因為有些瀏覽器版本尚未支援ES6
    • (b) Router： vue-router 路由器，設定前端路由，幫像我這樣的菜鳥操作window.history(笑)
    • (c) Vuex： 狀態管理秘密武器(笑)
    • (d) CSS Pre-processors： CSS預處理器，如果你想「不要，我就要純寫CSS!!!」拜託，別裝～ Rookie的我要來寫寫SCSS勒～
    • (e) Linter/Formatter： 幫你檢查代碼正確的擾人工具...
      p.s：
      TypeScript以後有時間再建一個專案吧 現在先用Javascript就好～
      剩下幾個選項以後再看看吧

  

  

  • (3) 哎唷，接下來是Router模式
    模式有兩種： history模式、hash模式(默認) 附個連結吧
    這裡我們跟著大神的腳步

  

  • (4) CSS pre-processer： 我們也選擇Sass/SCSS(with dart-sass)吧(笑)

  

  • (5) ESLint： 哼哼，我們要來個統一、再來個嚴謹(笑...之後很刺激噠)

  

  • (6) ESLint檢查時機： 保存時就檢查

  

  • (7) 你想在哪配置各個工具配置：分開分開，我視力不好，一起好雜啊

  

  • (8) 最後了最後了，是否保存剛剛點的那些東西，不要存啦! 下次再玩點一次吧!!

  

  • (9) 哈哈，終於開始建了! 等他吧

  

  

  

  • (10) 哎唷威呀，終於建完了，快吧(!?) 想看看專案是否可以用，再打打指令吧

        cd plan-b
    

        npm run serve
    

  

  

  • (11) 然後複製下，去瀏覽器打開那網址，出現下面畫面代表成功囉！

  

  

  • (12) 好啦，等這麼多都快睡著了，我們用VSCode開開專案養眼下吧，但我完美的虛擬機暫時功成身退啦～所以我用回我MacOS環境開開～
    啊啊～ 順便裝裝老叫一下 ，如果你專案要給人家，記得先把" node_modules "這資料夾砍了再給，不然讓你等到天荒地老～

  

好瘩～今天也糊裡糊塗蒙混過關啦 明天再續!!