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

molyzzx 發布于2019-08-23 12:04 / 2630人閱讀

摘要：可以譯作運行時過程全面分析和解析，這個全面分析涉及到比較基礎的或者復雜的重要前端概念和中的概念等。注本篇是運行時全解析系列文章的第一篇，首次發表于，友善轉載蟹蟹。附更多內容請參考核心維護者蔣豪群同學的的公開課視頻

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的公開課視頻

GPU云服務器云服務器運行原理解析上手 java線程運行一次 python怎么上手

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97913.html

Vue運行時全解析 - Vue的引入（二）

摘要：因為僅僅包含運行時編譯比完整版少的代碼體積，如果你需要使用完整包也是可以的，你需要調整配置。顯式的改變運行時引用包模塊在引入時做了什么看完了這幾個文件的用途之后我們再來看看引入的時候做了什么帶著這個疑問我們繼續探索。 Vue Runtime Full Analysis - Import Vue Module 回顧系列文章之《VueCLI3上手》上一節《Vue運行時全解析 - Vue...

jiekechoo 2019-08-23 12:03 評論0 收藏0
vuecli3 vant rem 移動端框架方案

摘要：描述基于適配方案封裝，構建手機端模板腳手架幫你做好的配置有多環境開發封裝適配方案生產環境優化首屏加速低版本瀏覽器兼容環境發布腳本可以上手直接寫代碼多環境開發之前寫過一個多環境的方案，是基于的多環境配置方案傳送門最近新的項目采用了開始了描述基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構建手機端模板腳手架幫你做好的配置...

since1986 2019-08-26 13:54 評論0 收藏0
【開源】小程序And公眾號商城，外加后臺，功能齊全！

摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。前言一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...

VishKozus 2019-08-23 13:49 評論0 收藏0
【開源】小程序And公眾號商城，外加后臺，功能齊全！

摘要：前言一個集微信公眾號商城小程序商城商城后臺的一個開源項目，后臺是基于開發的，是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發多公眾號管理配置簡單。微信小程序項目下載整個包之后，進行根目錄文件夾。前言一個集微信公眾號商城/小程序商城/商城后臺的一個開源項目，后臺是基于WeiPHP5.0開發的，WeiPHP是一個簡潔而強大的開源微信公眾平臺開發框架，微信功能插件化開發,多...

linkFly 2019-07-01 11:00 評論0 收藏0
VueCli3.0中集成MockApi

摘要：缺點需要增加本地的代碼量，以及需要配置實現攔截優點數據通過會更豐富。缺點修改內容溝通成本高，跟后端扯皮利用去模擬優點可控內容以及實現動態。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景哎喲，好煩啊，這個需求還么結束就來下一個需求，程序員不要排期的嗎？沒辦法啊，資本主義的XX嘴臉啊來吧，技術評審我倆把接口...

劉玉平 2019-08-26 13:59 評論0 收藏0