Vue運行時全解析 - VueCLI3上手（一）

Vue Runtime Full Analysis - VueCLI3 Get Start

VRFA: (Vue Runtime Full Analysis) 能夠譯做vue 運行時過程全面分析和解析，這個全面分析涉及到比較基礎的或者複雜的重要前端概念和vue中的概念等。

注： 本篇是《Vue運行時全解析》系列文章的第一篇，首次發表於https://segmentfault.com，友善轉載蟹蟹。

閱讀本節你能學到什麼

• 官方主推VueCLI3的緣由
• CLI3的核心概念
• CLI3的安裝
• CLI3簡單建立一個項目
• Vue ui的使用介紹
• 使用CLI3按照舊版方式建立項目的方法
• 安裝插件vuex,router方法
• 修改項目配置的方式
• 使用VueCLI3的serve命令 打開一個vue文件

VueCLI3 上手

根據官方核心開發者的說法，vue 升級到 3，他的腳手架應該也是這個 。

爲何要用 3 呢，官方核心維護者給了幾個緣由：

• Cannot upgrade via deps

  • vue cli 2 建立的項目，咱們能升級的只有 vue, webpack 和 webapck 插件自己，而 webpack 和項目的配置文件（即 config 和 build 目錄中的文件）沒法經過依賴升級來改掉，而 webpack 和 vue-loader 一直在更新，其配置文件也須要隨之升級，就成爲一個問題

• Useless scripts checked into projects

  • 一些無用的腳本文件和資源文件，對寫模板的人有用，但對使用的人來講都是無用的，因此須要去刪除

• No ecosystem sharing

  • 沒有一個生態系統的分享，沒有插件系統，沒有通用的 preset, 若是要調整須要從 templates-vuejs/ewebpack 項目 fork 本身的倉庫進行更改並進行調整，可是這個與上游的同步就成爲問題

Vue CLI的靈感來源

• poi

  • Zero config Rapid Prototyping 零配置快速原型開發
    With just a single JavaScript file you can instantly preview it in your browser. 你能夠當即使用瀏覽器預覽一個js文件的執行效果
  • Interactive Project Scaffolding 交互式項目腳手架
    Scaffold out a complete project with desired features in minutes. 分分鐘你就能夠經過腳手架生成一個自選功能的項目
  • Framework Agnostic 不偏心特定框架
    Build with your favorite framework or vanilla JavaScript. 隨你編譯喜歡的框架或者js插件
  • Fully Extensible 全擴展
    A rich collection of official plugins integrating the best tools in the web ecosystem.
    A powerful plugin API for making your own plugins. web環境中有官方豐富的擴展做爲最好的工具，而且有一個強大的插件接口，提供給你寫本身的插件。

• neutrino

  • mozila:webpack-chain鏈式修改配置，更加優雅

核心概念 Core Concepts

• Scaffolding, not only templating // 腳手架，不單單是模板
• Zero Configuration // 借鑑 parcel
• Plugin-based // preset

安裝和使用 Insatallation & Usage

yarn global add @vue/cli

# yarn 被推薦，大部分vue的開發的項目都使用yarn
# 快，緩存
vue create my-project
vue ui

注意

這裏若是是 windows 環境，若是遇到問題嘗試安裝 yarn 包管理工具後選擇包管理工具時選擇 yarn。

yarn VS npm 的文章 http://web.jobbole.com/88459/

有問題能夠 https://github.com/vuejs/vue-... 或者 https://forum.vuejs.org/latest

默認 preset 裏面只帶有 babel 和 eslint 插件

使用舊版

# 使用cli-init工具
npm install -g @vue/cli-init
vue init webpack my-project

引入 vuex, vue-router

# VueCLI3腳手架中默認是沒有安裝vuex和vue-router
vue add router
vue add vuex

定製化項目配置

// 項目根目錄下新建 vue.config.js  
module.exports = {
    lintOnSave: false // 保存時檢查格式，使用eslint
    crossorigin: 'anonymous' // htmlWebpackPlugin
    css: { // 對組件中css的配置
      modules: true
    },
    devServer: { // 對開發服務的設置
      // Various Dev Server settings
      host: '0.0.0.0', process.env.HOST
      port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
      open: true, // 自動調用默認瀏覽器打開
      https: false // 是否使用https, https使用node的一個內部默認的ca證書
    }
}

// 查看內置默認的項目配置須要使用 vue inspect命令

啓動一個 vue 文件

vue serve template.vue

結束

本節主要介紹了下VueCLI3誕生的緣由與初衷，以及想要達到的效果，並簡單說明了使用VueCLI3腳手架工具生成一個項目。

附：更多內容請參考VueCLI核心維護者蔣豪羣同窗的VueCLI的公開課視頻