Vue入門之版本區別及安裝使用

對於剛開始學習Vue的新人來講，第一眼看到下面這張圖是否是會有同感，以個人經驗來看，版本問題多是新人學習Vue時遇到的第一大問題，怎麼有好幾個版本？這兩個版本到底有什麼區別？我到底該用哪一個？彆着急，本文會給你答案。前端

1、Vue各類版本的特色和區別

1.1 先說結論

打個比方，完整版是iPhone 11 Pro Max的話，運行時版就是iPhone SE，前者有更高端的芯片（編譯器），而且後者有的功能前者都有，後者基本使用沒問題，並且更小巧，價格便宜。而你是一個精打細算的人，因此買手機你會買iPhone SE而不是更大更貴的前者。vue

1.2 完整版特色

咱們知道Vue是如今幾乎最火的前端框架，框架嘛，最核心的就是封裝，封裝的目的是爲了提高開發效率，知足開發者的需求。Vue也是如此，並且Vue有本身的一套語法，爲了識別這套語法，完整版也就是vue.js集成了編譯器，你能夠理解爲Google翻譯，把Vue的語法翻譯成瀏覽器能看得懂的東西。因爲有這個編譯器的存在，完整版能夠在js文件中用template渲染頁面，好比在main.js裏寫以下代碼，n就能在頁面上顯示出來。vue-cli

new window.Vue({
  el: "#app",
  template: `<div>{{n}}</div>`,
  data: {
    n: 0
  }
複製代碼

1.3 運行時版特色

運行時版主要是完整版砍掉編譯器後的版本，既然編譯器那麼厲害，爲何要要砍掉呢？爲了節省30%的體積。別小看這30%的體積，當項目很是龐大時，能壓縮30%的體積甚至能提升幾倍的性能。運行時版能夠實現template實時渲染的功能嗎？答案是不能的，運行時版想要實時渲染，須要經過js文件裏的render()函數，配合vue-loader對.vue文件的處理實現。npm

相似這樣，main.js文件裏瀏覽器

new window.Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  }
});
複製代碼

Demo.vue文件裏bash

<template>
  <div class="red">
    {{n}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      n: 0
    };
  }
};
</script>
複製代碼

1.4 生產環境版

生產環境版是對應的默認版本的壓縮，刪除了註釋和報錯信息，體積更小，適合開發測試完成以後部署上線。前端框架

2、Vue的安裝

2.1 直接經過CDN引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>markdown

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.js"></script>app

2.2 經過Vue提供的命令行工具 @vue-cli

全局安裝 @vue-cli ：yarn add global @vue/cli
vue --version：查看@vue/cli是否已經成功安裝
建立項目目錄：vue create [projName] 在[projName]目錄下建立項目，或者vue create .即在當前目錄下建立項目。
cd [projName]而後yarn serve開啓項目預覽。

3、推薦一個在線編輯器

若是想快速練習，可使用 codesandbox.io/框架

進入首頁，無需登陸，點擊Create a Sandbox

很快就進入下面這個頁面，看到全部東西都生成好了，小夥伴們能夠愉快地開始開發了！