長的和vue-cli差不多的React腳手架

alin 發布于2019-08-21 14:27 / 3218人閱讀

摘要：的外表，的心說在前面對于我個人來說，一個好的腳手架有助于我們心無旁騖地去學習一些庫例如和。所以說，為什么不弄個的呢我的想法就是將和盡量保持一致，除了它們的核心和。并不會對該文件夾下的文件進行處理。

react-webpack-boilerplate

vue-cli的外表，React的心

說在前面

對于我個人來說，一個好的腳手架有助于我們心無旁騖地去學習一些庫例如Vue和React。vue-cli就是一個非常好的例子，簡單易用，而且集成了許多流行的元素例如ES6和熱更新之類的。我之前寫了一個小項目就是完全基于這個腳手架來做的，這個開發流程非常的愉悅。當然，在github上面也會有許多現成的react的spa項目模版，但是對于我來說總是覺得多了一些什么或少了一些什么，特別是當我從Vue轉到React的時候，會有很多的不習慣。所以說，為什么不弄個React的呢？我的想法就是將vue-cli和react-webpack-boilerplate盡量保持一致，除了它們的核心: Vue和React。

我希望這個spa模版能解決大家在環境配置上遇到的種種問題，也希望習慣于vue-cli的同學能夠通過這個模版無縫地接入React。

項目地址

特性

React 15.3.1

JSX

ES6

Webpack

Express dev server

Hot-Reload

Proxy 接口代理

Global-Variable 全局變量，用來區分線上線下環境

使用

可以先將項目clone或者fork下來。

# 安裝依賴
npm install

# 測試環境，默認端口: 3000
npm run dev

# 生成項目
npm run build

文檔

你可以直接看vue-cli的文檔來配置你的項目，但是針對其中的一些使用方法我在這里簡述一下。

預處理器

你可以使用你喜歡的css預處理器。例如你需要使用less和sass，那么你需要在./config/index的cssLoaders里面設置：

// ./config/index
module.exports = {
    // set your css loaders
    cssLoaders: ["less", "sass"],
    ...
}

別忘了安裝相應的依賴。

處理靜態文件

相關的可以看這里。
項目對./static下的靜態文件只是簡單地進行復制粘貼，所以引入的時候你需要使用相對路徑/static/blah.js。webpack并不會對該文件夾下的文件進行處理。

全局變量

整個項目會有一個全局變量process.env，你可以通過它來設置測試環境與生產環境的區別，例子可以看這里。

接口代理

這個是非常有用的工具，可以脫離后端進行開發，后端提供接口就可以了。舉個板栗，你項目的端口是3000，后端項目的端口是5000，你需要使用一個叫/api的接口，那么你需要這樣子做。

// ./config/index.js
module.exports = {
    ...
    dev: {
        ...
        proxyTable: {
            "/api": {
                target: "local:5000",
                changeOrigin: true
            },
        },
    }
}

醬紫就可以愉快地使用/api接口啦。更多設置看這里。

一些還沒有做的事情

[] 各種測試

[] eslint

[] cli

GPU云服務器云服務器 php求字段的和 js計算一字段的和用php計算數組的和用c語言素數的和

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

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

Vuejs自己的構建工具

摘要：然而，這些模板并不限制你自己對于使用的架構組織和選擇類庫。目前可用的模板包括全功能的，包括熱加載，靜態檢測，單元測試一個簡易的，以便于快速開始。最近，尤大在和人對噴的時候，悄然放出了一個大招，于是為了追趕他的步伐，趕緊試驗了下，并且把原文給大家翻譯下。原文地址：Announcing vue-cli 譯文源地址： Vuejs自己的構建工具先上原文翻譯：最近有很多大量關于Reac...

leoperfect 2019-08-19 17:20 評論0 收藏0
php，vue，vue-ssr 做出來的頁面有什么區別？

摘要：靜態頁面的或者明顯最短，原因是模板幾乎沒什么內容。靜態頁面生成的白屏時間中，大部分是首屏數據請求消耗的時間，，同時也可以對比出，服務器渲染的對首屏時間的確有很明顯的效果。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由shirishiyue發表于云+社區專欄目前我這邊的web頁面，都是采用php+smarty模板生成的，是一種比較早期的開發模式。好處是沒有現階段...

yibinnn 2019-08-02 12:00 評論0 收藏0
php，vue，vue-ssr 做出來的頁面有什么區別？

摘要：靜態頁面的或者明顯最短，原因是模板幾乎沒什么內容。靜態頁面生成的白屏時間中，大部分是首屏數據請求消耗的時間，，同時也可以對比出，服務器渲染的對首屏時間的確有很明顯的效果。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由shirishiyue發表于云+社區專欄目前我這邊的web頁面，都是采用php+smarty模板生成的，是一種比較早期的開發模式。好處是沒有現階段常用的...

vpants 2019-04-23 13:11 評論0 收藏0
如何構建大型的前端項目

摘要：如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。如何構建大型的前端項目 1. 搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能：自動化構建代碼，比如打包、壓縮、上傳等功能本地開發與調試，并有熱替換與...

lykops 2019-08-29 16:56 評論0 收藏0
如何構建大型的前端項目

摘要：如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。如何構建大型的前端項目 1. 搭建好項目的腳手架一般新開發一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能：自動化構建代碼，比如打包、壓縮、上傳等功能本地開發與調試，并有熱替換與...

plokmju88 2019-08-23 12:18 評論0 收藏0