Vue運(yùn)行時(shí)全解析 - VueCLI3上手（一）

molyzzx 發(fā)布于2019-08-23 12:04 / 2636人閱讀

摘要：可以譯作運(yùn)行時(shí)過(guò)程全面分析和解析，這個(gè)全面分析涉及到比較基礎(chǔ)的或者復(fù)雜的重要前端概念和中的概念等。注本篇是運(yùn)行時(shí)全解析系列文章的第一篇，首次發(fā)表于，友善轉(zhuǎn)載蟹蟹。附更多內(nèi)容請(qǐng)參考核心維護(hù)者蔣豪群同學(xué)的的公開(kāi)課視頻

Vue Runtime Full Analysis - VueCLI3 Get Start

VRFA: (Vue Runtime Full Analysis) 可以譯作vue 運(yùn)行時(shí)過(guò)程全面分析和解析，這個(gè)全面分析涉及到比較基礎(chǔ)的或者復(fù)雜的重要前端概念和vue中的概念等。

注：本篇是《Vue運(yùn)行時(shí)全解析》系列文章的第一篇，首次發(fā)表于https://segmentfault.com，友善轉(zhuǎn)載蟹蟹。

閱讀本節(jié)你能學(xué)到什么

官方主推VueCLI3的原因

CLI3的核心概念

CLI3的安裝

CLI3簡(jiǎn)單創(chuàng)建一個(gè)項(xiàng)目

Vue ui的使用介紹

使用CLI3按照舊版方式創(chuàng)建項(xiàng)目的方法

安裝插件vuex,router方法

修改項(xiàng)目配置的方式

使用VueCLI3的serve命令打開(kāi)一個(gè)vue文件

VueCLI3 上手

根據(jù)官方核心開(kāi)發(fā)者的說(shuō)法，vue 升級(jí)到 3，他的腳手架應(yīng)該也是這個(gè) 。

為什么要用 3 呢，官方核心維護(hù)者給了幾個(gè)原因：

Cannot upgrade via deps

vue cli 2 創(chuàng)建的項(xiàng)目，我們能升級(jí)的只有 vue, webpack 和 webapck 插件本身，而 webpack 和項(xiàng)目的配置文件（即 config 和 build 目錄中的文件）無(wú)法通過(guò)依賴升級(jí)來(lái)改掉，而 webpack 和 vue-loader 一直在更新，其配置文件也需要隨之升級(jí)，就成為一個(gè)問(wèn)題

Useless scripts checked into projects

一些無(wú)用的腳本文件和資源文件，對(duì)寫模板的人有用，但對(duì)使用的人來(lái)說(shuō)都是無(wú)用的，所以需要去刪除

No ecosystem sharing

沒(méi)有一個(gè)生態(tài)系統(tǒng)的分享，沒(méi)有插件系統(tǒng)，沒(méi)有通用的 preset, 如果要調(diào)整需要從 templates-vuejs/ewebpack 項(xiàng)目 fork 自己的倉(cāng)庫(kù)進(jìn)行更改并進(jìn)行調(diào)整，但是這個(gè)與上游的同步就成為問(wèn)題

Vue CLI的靈感來(lái)源

poi

Zero config Rapid Prototyping 零配置快速原型開(kāi)發(fā)
With just a single JavaScript file you can instantly preview it in your browser. 你可以立即使用瀏覽器預(yù)覽一個(gè)js文件的執(zhí)行效果

Interactive Project Scaffolding 交互式項(xiàng)目腳手架
Scaffold out a complete project with desired features in minutes. 分分鐘你就可以通過(guò)腳手架生成一個(gè)自選功能的項(xiàng)目

Framework Agnostic 不偏愛(ài)特定框架
Build with your favorite framework or vanilla JavaScript. 隨你編譯喜歡的框架或者js插件

Fully Extensible 全擴(kuò)展
A rich collection of official plugins integrating the best tools in the web ecosystem.
A powerful plugin API for making your own plugins. web環(huán)境中有官方豐富的擴(kuò)展作為最好的工具，并且有一個(gè)強(qiáng)大的插件接口，提供給你寫自己的插件。

neutrino

mozila:webpack-chain鏈?zhǔn)叫薷呐渲茫觾?yōu)雅

核心概念 Core Concepts

Scaffolding, not only templating // 腳手架，不僅僅是模板

Zero Configuration // 借鑒 parcel

Plugin-based // preset

安裝和使用 Insatallation & Usage

yarn global add @vue/cli

# yarn 被推薦，大部分vue的開(kāi)發(fā)的項(xiàng)目都使用yarn
# 快，緩存
vue create my-project
vue ui

注意

這里如果是 windows 環(huán)境，如果遇到問(wèn)題嘗試安裝 yarn 包管理工具后選擇包管理工具時(shí)選擇 yarn。yarn VS npm 的文章 http://web.jobbole.com/88459/
有問(wèn)題可以 https://github.com/vuejs/vue-... 或者 https://forum.vuejs.org/latest
默認(rèn) preset 里面只帶有 babel 和 eslint 插件

使用舊版

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

引入 vuex, vue-router

# VueCLI3腳手架中默認(rèn)是沒(méi)有安裝vuex和vue-router
vue add router
vue add vuex

定制化項(xiàng)目配置

// 項(xiàng)目根目錄下新建 vue.config.js  
module.exports = {
    lintOnSave: false // 保存時(shí)檢查格式，使用eslint
    crossorigin: "anonymous" // htmlWebpackPlugin
    css: { // 對(duì)組件中css的配置
      modules: true
    },
    devServer: { // 對(duì)開(kāi)發(fā)服務(wù)的設(shè)置
      // 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, // 自動(dòng)調(diào)用默認(rèn)瀏覽器打開(kāi)
      https: false // 是否使用https, https使用node的一個(gè)內(nèi)部默認(rèn)的ca證書
    }
}

// 查看內(nèi)置默認(rèn)的項(xiàng)目配置需要使用 vue inspect命令

啟動(dòng)一個(gè) vue 文件