成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

molyzzx / 2654人閱讀

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

Vue Runtime Full Analysis - VueCLI3 Get Start

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

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

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

官方主推VueCLI3的原因

CLI3的核心概念

CLI3的安裝

CLI3簡單創(chuàng)建一個項(xiàng)目

Vue ui的使用介紹

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

安裝插件vuex,router方法

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

使用VueCLI3的serve命令 打開一個vue文件

VueCLI3 上手

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

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

Cannot upgrade via deps

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

Useless scripts checked into projects

一些無用的腳本文件和資源文件，對寫模板的人有用，但對使用的人來說都是無用的，所以需要去刪除

No ecosystem sharing

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

Vue CLI的靈感來源

poi

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

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

Framework Agnostic 不偏愛特定框架
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ò)展作為最好的工具，并且有一個強(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的開發(fā)的項(xiàng)目都使用yarn
# 快，緩存
vue create my-project
vue ui
注意 
這里如果是 windows 環(huán)境，如果遇到問題嘗試安裝 yarn 包管理工具后選擇包管理工具時選擇 yarn。
yarn VS npm 的文章 http://web.jobbole.com/88459/


有問題可以 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)是沒有安裝vuex和vue-router
vue add router
vue add vuex
定制化項(xiàng)目配置 
// 項(xiàng)目根目錄下新建 vue.config.js  
module.exports = {
    lintOnSave: false // 保存時檢查格式，使用eslint
    crossorigin: "anonymous" // htmlWebpackPlugin
    css: { // 對組件中css的配置
      modules: true
    },
    devServer: { // 對開發(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, // 自動調(diào)用默認(rèn)瀏覽器打開
      https: false // 是否使用https, https使用node的一個內(nèi)部默認(rèn)的ca證書
    }
}

// 查看內(nèi)置默認(rèn)的項(xiàng)目配置需要使用 vue inspect命令
啟動一個 vue 文件 
vue serve template.vue
結(jié)束

本節(jié)主要介紹了下VueCLI3誕生的原因與初衷，以及想要達(dá)到的效果，并簡單說明了使用VueCLI3腳手架工具生成一個項(xiàng)目。

附：更多內(nèi)容請參考VueCLI核心維護(hù)者蔣豪群同學(xué)的VueCLI的公開課視頻

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97913.html

相關(guān)文章

  • Vue運(yùn)行時全解析 - Vue的引入（二）

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

    jiekechoo 評論0 收藏0

  • vuecli3 vant rem 移動端框架方案

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

    since1986 評論0 收藏0

  • 【開源】小程序And公眾號商城，外加后臺，功能齊全！

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

    VishKozus 評論0 收藏0

  • 【開源】小程序And公眾號商城，外加后臺，功能齊全！

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

    linkFly 評論0 收藏0

  • VueCli3.0中集成MockApi

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

    劉玉平 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<