Vue2.x學習筆記。原視頻教程：最全最新Vue、Vuejs教程，從入門到精通_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili

Vue CLI

0. 什么是vue-cli

如果你在開發大型項目, 那么你需要, 并且必然需要使用Vue CLI

• 使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、項目結構和部署、熱加載、代碼單元測試等事情。

• 如果每個項目都要手動完成這些工作，那無以效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什么意思?

• CLI是Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架.

• Vue CLI是一個官方發布 vue.js 項目腳手架

• 使用 vue-cli 可以快速搭建Vue開發環境以及對應的webpack配置.

1. vue-cli使用

0）前提

Node環境要求8.9以上或更改版本。同時依賴webpack。

1）安裝及初始化

安裝：

npm install -g @vue/cli

**注意：**上面安裝的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化項目時不可以的。

初始化：

• Vue CLI2初始化：

  vue init webpack my-project # my-project為項目名稱

• Vue CLI3初始化：

  vue create my-project

2）啟動和發布

npm run dev #啟動項目 npm run build #項目打包，dist文件夾即為最終項目

3）Vue CLI2詳解

Vue CLI2初始化詳解

Vue CLI2目錄結構詳解

Runtime-Compiler和Runtime-only

簡單總結：

• 如果在之后的開發中，你依然使用template，就需要選擇Runtime-Compiler

• 如果你之后的開發中，使用的是.vue文件夾開發，那么可以選擇Runtime-only

Runtime-Compiler 和 Runtime-only的區別：

為什么存在這樣的差異呢？我們需要先理解Vue應用程序是如何運行起來的，

Vue中的模板如何最終渲染成真實DOM。

Vue程序運行過程：

runtime-compiler渲染過程：

template -> ast -> render -> vDom -> UI

runtime-only渲染過程：（省略編譯，性能更高，代碼更少）

render -> vDom -> UI

render函數的使用

方式1：

new Vue({el: '#app',render: h => h('h2', { class: 'he' }, ['hello world']), });

方式2：（注意不能在runtime-only中使用）

//1.先注冊一個組件 const cpn = Vue.component('cpn', {template: '<div>我是一個組件,我的名字是：{{name}}</div>',data() {return {name: 'cpn',};}, });//2.使用組件 new Vue({el: '#app',render: h => h(cpn) })

關于runtime-only下.vue文件中的template

按理說runtime-only中，是不經過template直接生成vDom的，但是.vue文件中卻存在這樣的template：

那么這是由誰處理的？

答案：是由vue-template-compiler處理的。我們可以在package.json文件的開發時依賴中找到。我們引用的組件并非是直接引用的.vue文件中的內容，而是先經過vue-template-compiler將其轉換成render函數后再使用。

npm run dev和npm run build的解析過程圖解

4）Vue CLI3詳解

vue-cli 3 與 2 版本的區別：

• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3

• vue-cli 3 的設計原則是“0配置”，移除的配置文件根目錄下的，build和config等目錄

• vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化

• 移除了static文件夾，新增了public文件夾，并且index.html移動到public中

安裝配置：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WRp6tHU4-1621221770771)(B:\picgo_pics\image-20210505182135594.png)]

目錄結構詳解：

配置文件的查看和修改：

圖形界面配置：

任意目錄啟動配置服務器：

vue ui

之后可以創建、導入和管理自己的Vue項目。

文件配置：

在項目根目錄創建vue.config.js文件，進行自定義配置。

總結

以上是生活随笔為你收集整理的Vue学习笔记（3）（Vue CLI）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。