vue-cli2和cli3的使用和區別

vue-cli腳手架的使用

• 使用vue-cli可以快速搭建vue的開發環境，和webpack的配置
• 安裝vue腳手架： npm install -g@vue/cli
• 上面安裝的是vue cli3的版本，如果需要想按照vue cli2的方式初始化項目是不可以的，我們必須要拉取2.x的模板，需要安裝全局的橋接工具(官方查看)
• Vue CLI2 初始化項目
  • vue init webpack my-project
• Vue CLI3 初始化項目
  • vue create my-project

CLI 2 的使用

1.  初始化項目：web init webpack mytest（根據這個創建項目文件名），初始化出現配置選項：
    //項目名稱
    Project name ...
    //作者的信息，會默認從git中讀取信息
    Project description ...
    Author ...
    //vue創建的選項 1.runtime-compiler   2.runtime-only
    vue build ...(一般選runtime-only)
    //是否安裝vue-router
    Install vue-router？ ..
    //是否使用ESLint檢測代碼規范
    use ESLint to link your code
    //是否寫單元測試 （一般不使用）
    Set up unit tests
    //是否使用Nightwatch來進行e2e測試 （2代表to  e to e 點對點）
    Setup e2e test with Nightwatch？
    //使用npm或者yarn包管理工具
    use npm
    use yarn
   

2. Runtime-Compiler和Runtime-only的區別

• runtime-compiler（v1）(運行過程)): template -> ast -> render -> vdom -> UI
• runtime-only(v2 1.性能更高， 2.代碼量更少)：render -> vdom -> UI
• 那.vue文件中的template是由誰處理的呢？ 是由vue-template-compiler這個開發時 工具依賴來處理的，他將.vue文件解析成了render函數，解析之后，是沒有tamplate這個 東西的

3. 總結：

• 如果在開發中，依然使用template，就需要選擇Runtime-Compiler
• 如果在開發中，使用的是.vue文件夾開發，那么可以選擇Runtime-Only

3. render函數的使用

•   new Vue({
      el:'#app',
      render:(createElement) =>{
        //使用方式一：
        return createElement('標簽','相關數據對象(可以不傳)',['內容數組'])
        //1.1render函數的基本使用
        return createElement('div',{class:'box'},['xiaohuang'])
        //1.2嵌套render函數
        return createElement('div',{class:'box'},['小黃',createElement('h2',['標題啊'])])
      }
    })
  

•   `Runtime-Compiler`和`Runtime-only`在main.js中的不同使用：
  
    1.`Runtime-Compiler`中
    const cpn =Vue.component('cpn',{
      template:'<div>我是cpn組件 </div>'，
      data(){
        return{
  
        }
      }
    })
  
    2.`Runtime-only`中
    new Vue({
      el:'#app'
      render:(createElement)=>{
        //使用方法二：傳入一個組件對象
        return createElement(cpn)
      }
    })
  

CLI 3的使用

1. 初始化項目：vue create my-project

2.  //選擇一個配置方式
    please pick a perset  (一般選最后一個Manually select features（手動選擇特性） )
    //選擇對於你的工程所需要的特性 （用空格選擇）
    check the features needed for your project
    //對應的配置文件單獨生成還是放在package.json里
    where do you prefer placing config for babel
    //要不要把剛才自己選擇的配置保存下來
    save this as a preset for future projects?
   

3. pubilc文件相當於CLI2中的static目錄
4. 配置都去哪里了，可以啟動配置服務器 vue ui 查看（全局命令）