技術標籤：前端學習筆記vuenodenpm

VUE CLI2建立專案

寫在前面：vue cli3建立專案請參考另一篇文章：vuecli3建立專案
vue cli2專案目錄：vuecli2專案目錄

前提：

必須先安裝node和npm
node通過官網下載安裝，這裡就不贅述了，安裝node會自動安裝npm
可在命令指示框中通過指令檢視是否安裝成功

出現版本號代表安裝成功

安裝

安裝vue cli2 有兩種方法：

1. 安裝vue cli3腳手架然後適配2
2. 直接安裝vue cli2腳手架
   安裝vue cli3：

• npm install -g @vue/cli

• 這個命令安裝的是腳手架3，如果要用2需要再安裝一個2的模板

  • npm install -g @vue/cli-init
    直接安裝vue cli2：

• npm install -g vue-cli

vue cli2 初始化專案：

vue init webpack my-project

• project name (專案名稱)

• project description （專案描述）

• author （作者）

• vue build (建立方式)

  • 這個就牽扯一個vue的執行過程（下面有圖）

    • 他的執行是template -> ast -> render -> vdom -> UI

    • 在這裡選擇runtime+complier：在main.js中生成的就是template:’’，也就是要完成的執行整個流程

    • 選擇runtime-only：在main.js中生成的就是render:function(h){return h(App)}，也就是從render來執行

      • render函式的使用：

        render : function(createElement){
            //1.普通用法
            //createElement('標籤',{標籤的屬性},['標籤的內容'])
            return createElement('h2',
                                {class:'bpx'},
                                ['Hello World',createElement
         
        (['button',['按鈕']])])
            //2.傳入元件物件
            return createElement(App)
        }
        

  • 選擇runtime-only的優勢在於：1.效能更好，2.需要更少的vue原始碼

  • runtime + complier : recommened for most users

  • runtime-only: about 6KB lighter min+gzip, but templates (or any vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

• Install vue-router （路由）

• use ESLint to lint your code? (強制格式)

  • 如果選擇了y則需要選擇方式
    • Standard
    • Airbnb
    • none(configure it yourself)

• set up unit tests (單元測試)

• set e2e tests with Nightwatch? (端到端測試)

  • 安裝Nightwatch，是一個利用selenium或webdriver或phantomis等進行自動化測試的框架

• should we run ‘npm install’ for you after the project has been created?

  • yes, use npm
  • yes, yse yarn
  • no, i will handle that myself