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

資訊專欄INFORMATION COLUMN

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

alin / 3226人閱讀

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

react-webpack-boilerplate 
vue-cli的外表，React的心
說在前面

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

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

項(xiàng)目地址

特性

React 15.3.1

JSX

ES6

Webpack

Express dev server

Hot-Reload

Proxy 接口代理

Global-Variable 全局變量，用來區(qū)分線上線下環(huán)境

使用

可以先將項(xiàng)目clone或者fork下來。

# 安裝依賴
npm install

# 測(cè)試環(huán)境，默認(rèn)端口: 3000
npm run dev

# 生成項(xiàng)目
npm run build
文檔

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

預(yù)處理器

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

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

別忘了安裝相應(yīng)的依賴。

處理靜態(tài)文件

相關(guān)的可以看這里。
項(xiàng)目對(duì)./static下的靜態(tài)文件只是簡單地進(jìn)行復(fù)制粘貼，所以引入的時(shí)候你需要使用相對(duì)路徑/static/blah.js。webpack并不會(huì)對(duì)該文件夾下的文件進(jìn)行處理。

全局變量

整個(gè)項(xiàng)目會(huì)有一個(gè)全局變量process.env，你可以通過它來設(shè)置測(cè)試環(huán)境與生產(chǎn)環(huán)境的區(qū)別，例子可以看這里。

接口代理

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

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

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

一些還沒有做的事情

[] 各種測(cè)試

[] eslint

[] cli

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

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

相關(guān)文章

  • Vuejs自己的構(gòu)建工具

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

    leoperfect 評(píng)論0 收藏0

  • php，vue，vue-ssr 做出來的頁面有什么區(qū)別？

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

    yibinnn 評(píng)論0 收藏0

  • php，vue，vue-ssr 做出來的頁面有什么區(qū)別？

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

    vpants 評(píng)論0 收藏0

  • 如何構(gòu)建大型的前端項(xiàng)目

    摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目內(nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...

    lykops 評(píng)論0 收藏0

  • 如何構(gòu)建大型的前端項(xiàng)目

    摘要：如何構(gòu)建大型的前端項(xiàng)目搭建好項(xiàng)目的腳手架一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。組件化一般分為項(xiàng)目內(nèi)的組件化和項(xiàng)目外的組件化。 如何構(gòu)建大型的前端項(xiàng)目 1. 搭建好項(xiàng)目的腳手架 一般新開發(fā)一個(gè)項(xiàng)目時(shí)，我們會(huì)首先搭建好一個(gè)腳手架，然后才會(huì)開始寫代碼。一般腳手架都應(yīng)當(dāng)有以下的幾個(gè)功能： 自動(dòng)化構(gòu)建代碼，比如打包、壓縮、上傳等功能 本地開發(fā)與調(diào)試，并有熱替換與...

    plokmju88 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

alin

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<