成人午夜福利视频后入,冈本视频,精品国产乱码久久久久久影片

歡迎關(guān)注我的專欄( つ??ω??)つ【人工智能通識(shí)】
【匯總】2019年4月專題

這篇文章介紹如何使用VSCode快速初始化一個(gè)基于React.js的Web項(xiàng)目，React.js是當(dāng)前最主流的Web開發(fā)框架之一,另一個(gè)是Vue.js。

前提工作

首先我們需要安裝(或確認(rèn)已安裝)：

VSCode
Git
Nodejs

然后我們需要：

創(chuàng)建項(xiàng)目文件夾（GoCraft）；
初始化本地Git倉(cāng)庫(kù)git init；
在Github網(wǎng)站創(chuàng)建對(duì)應(yīng)的無初始化的倉(cāng)庫(kù)(GoCraft)；
設(shè)置Github遠(yuǎn)程倉(cāng)庫(kù)git remote add origin https://用戶名地址(非郵箱):密碼@github...；
如果設(shè)置錯(cuò)了使用git remote remove origin刪除再來
創(chuàng)建cli文件夾，進(jìn)入并初始化npm init
創(chuàng)建.gitignore文件忽略掉cli/node_modules文件夾；

以上步驟可以參考這個(gè)文章的前半段內(nèi)容完成。

創(chuàng)建index文件

我們創(chuàng)建兩個(gè)文件cli/dist/index.html和``cli/src/index.js`內(nèi)容分別如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React-MD-Aframe</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h1>Hello World!!</h1>
    <div id="root"></div>
  </body>
</html>

(function () {
    console.log("Hello!");
}());

安裝和配置Webpack

使用下面的命令安裝(管理員或sudo)：
npm install --save-dev webpack webpack-cli webpack-dev-server

如果遇到問題可以考慮嘗試使用淘寶npm鏡像的cnpm命令，具體方法參見官網(wǎng)http://npm.taobao.org/，以下相同。

可能會(huì)要幾分鐘，也可能會(huì)出現(xiàn)一些錯(cuò)誤，但只要最后正常完成即可：

為我們的package.json增加兩個(gè)腳本命令(注意行尾的逗號(hào))：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js",
    "build": "webpack",
    "dev": "webpack-dev-server --open --hot"
  },

創(chuàng)建cli/webpack.config.js:

const path = require('path');
module.exports = {
    entry: path.join(__dirname, "src/index.js"), //入口文件
    output: {
        filename: 'main.js', //編譯后的文件
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devServer: {
        contentBase: path.join(__dirname, "dist"), //編譯好的文件放在這里
        compress: true,
        port: 9000 //本地開發(fā)服務(wù)器端口
    }
}

然后我們執(zhí)行npm run build可以生成文件，執(zhí)行npm run dev可以啟動(dòng)開發(fā)服，這會(huì)自動(dòng)打開頁(yè)面http://localhost:9000/顯示Hello world!文字。

注意，要停止dev服務(wù)，可以按Ctrl+C快捷鍵。建議從菜單新建單獨(dú)的終端命令行終端來執(zhí)行別的命令，而不必每次都停止它。

如果遇到IP地址端口被占用（由于上一次沒有正常關(guān)閉導(dǎo)致），就需要結(jié)束掉之前的進(jìn)程。Mac下顯示Error: listen EADDRINUSE: address already in use,解決辦法是lsof -i tcp:9000列出所有占用9000端口進(jìn)程，kill pid結(jié)束掉指定pid的進(jìn)程，多試幾次，可以使用fg命令查看，直到lsof -i tcp:9000為空然后再npm run dev重啟。

打開頁(yè)面的控制臺(tái)Console，這時(shí)候我們?cè)赩SCode里面修改src/index.js文件，例如改為console.log("Hello world!!");，瀏覽器頁(yè)面控制臺(tái)內(nèi)將自動(dòng)刷新輸出新的內(nèi)容。

使用Webpack的Html插件

如果我們修改dist/index.html文件，頁(yè)面不會(huì)自動(dòng)刷新。而且直接把index.html這個(gè)源碼文件放在dist下面也并不合適。

安裝html-webpack-plugin插件(管理員或sudo)：
npm install --save-dev html-webpack-plugin

然后我們修改webpack.config.js文件內(nèi)容，開頭增加HtmlWebpackPlugin并結(jié)尾增加plugin內(nèi)容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, "src/index.js"), //入口文件
    output: {
        filename: 'main.js', //編譯后的文件
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devServer: {
        contentBase: path.join(__dirname, "dist"), //編譯好的文件放在這里
        compress: true,
        port: 9000 //本地開發(fā)服務(wù)器端口
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ]
}

然后我們把dist/index.html移動(dòng)到src/index.html，并把里面的<script type="text/javascript" src="main.js"></script>刪除，因?yàn)槲覀兊牟寮?huì)自動(dòng)補(bǔ)充這個(gè)內(nèi)容。

重啟npm run dev服務(wù)。修改src/index.html內(nèi)容，頁(yè)面將自動(dòng)刷新變化。

安裝React

使用下面命令安裝：
sudo npm install --save react react-dom

修改src/index.js：

import React from "react";
import ReactDOM from "react-dom";

let HelloWorld = () => {
  return <h1>Hello React!</h1>
}

ReactDOM.render(
  <HelloWorld/>,
  document.getElementById("root")
);

保存時(shí)候?yàn)g覽器控制臺(tái)會(huì)出錯(cuò)，這是由于webpack還不知道怎么處理React這種html標(biāo)記和js語(yǔ)句混用的情況。

安裝和配置Babel

Babel可以告訴webpack該如何做。使用下面的語(yǔ)句安裝：
sudo npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

在項(xiàng)目目錄下創(chuàng)建cli/.babelrc文件，內(nèi)容：

{
    "presets": [
        "@babel/env",
        "@babel/react"
    ]
}

然后再webpack.config.js中添加新的module.rules內(nèi)容，指定.js格式文件都由babel-loader來處理，而且不處理node_modules文件夾內(nèi)容：

    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
    ...

然后重新啟動(dòng)npm run dev，可以看到能夠正常編譯，出現(xiàn)Hello Reac!文字。

CSS載入器

安裝特殊的css文件處理器：
sudo npm install --save-dev style-loader css-loader sass-loader node-sass

創(chuàng)建一個(gè)src/index.scss文件：

body {
  div#root{
    background-color: #222;
    color: #8EE4AF;
  }
}

在src/index.js中導(dǎo)入它，開頭增加一行：

import "./index.scss";

這時(shí)候頁(yè)面控制臺(tái)編譯失敗。我們修改webpack.config.js,增加樣式的載入器內(nèi)容：

    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },

重新啟動(dòng)npm run dev，可以看到Hello React!背景變黑色，文字變綠色。

文件載入器

用下面命令安裝：
npm install --save-dev file-loader @babel/plugin-proposal-class-properties

修改webpack.config.js，增加文件載入器內(nèi)容：

    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
                loaders: ['file-loader']
            }
        ]
    },

然后將.babelrc文件修改為：

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

到這里為止，可以作為基本的React+webpack項(xiàng)目初始化使用。你可以在Github上獲取以上代碼：react-webpack-base

Material Design

安裝核心元件及可選元件（下面只包含了SVG圖標(biāo)）：
npm install @material-ui/core --save-dev
npm install @material-ui/icons --save-dev

安裝好了之后就可以在頁(yè)面上直接在index.js中導(dǎo)入并使用：

import React from "react";
import ReactDOM from "react-dom";
import Button from '@material-ui/core/Button';

import "index.scss";

let HelloWorld = () => {
  return <h1>Hello React!!</h1>
}

let HelloBtn=()=>{
  return <Button variant="contained" color="secondary">Hello,MaterialDesign!</Button>
}

ReactDOM.render(
  <div><HelloWorld/><HelloBtn/></div>,
  document.getElementById("root")
);

產(chǎn)生如下的效果：

image.png

關(guān)于更多Material-UI的內(nèi)容可以參考這里。

react-hyperscript

盡管React官方更加支持html和js混用的jsx格式，但是我很討厭它。推薦大家可以結(jié)合react-hyperscript來實(shí)現(xiàn)完全js的界面編寫。

安裝命令：
npm install react-hyperscript --save-dev

直接在index.js中使用：

import React from "react";
import ReactDOM from "react-dom";
import Button from '@material-ui/core/Button';
import h from "react-hyperscript"

import "index.scss";

let HelloWorld = () => {
  return h('h1', 'Hello React')
}

let HelloBtn = () => {
  return h(Button, {
    variant: 'contained',
    color: 'primary',
  }, 'Hello,MaterialDesign!')
}

ReactDOM.render(
  h('div', [
    h(HelloWorld),
    h(HelloBtn)
  ]),
  document.getElementById("root")
);

這樣的代碼雖然看起來多了幾行，但更加清楚整齊，而且自動(dòng)格式化之后也不會(huì)出錯(cuò)。

Aframe

最簡(jiǎn)單的接入方法是直接安裝導(dǎo)入使用：
npm install aframe --save-dev

在index.js改為：

import React from "react";
import ReactDOM from "react-dom";
import h from "react-hyperscript"
import 'aframe';

import "index.scss";

let Box=()=>{
  return h('a-box',{color:'red',position:'0 0 -4'})
}

ReactDOM.render(
  h('a-scene',{background:'color:#CCC'},[
    h(Box)
  ]),
  document.getElementById("root")
);

這個(gè)方法問題也很多，只能用于組裝場(chǎng)景，而不能檢測(cè)場(chǎng)景內(nèi)物體的事件，所以主要還是得使用aframe自身的編程規(guī)范。

最終代碼可以參考Github的項(xiàng)目這里

關(guān)于如何檢測(cè)aframe元素的點(diǎn)擊事件，稍后我們繼續(xù)學(xué)習(xí)。

歡迎關(guān)注我的專欄( つ??ω??)つ【人工智能通識(shí)】

每個(gè)人的智能新時(shí)代

如果您發(fā)現(xiàn)文章錯(cuò)誤，請(qǐng)不吝留言指正；
如果您覺得有用，請(qǐng)點(diǎn)喜歡；
如果您覺得很有用，歡迎轉(zhuǎn)載~

END

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

軟件技術(shù)-Web-React-MD-Aframe項(xiàng)目快速搭建

軟件技術(shù)-Web-React-MD-Aframe項(xiàng)目快速搭建

前提工作

創(chuàng)建index文件

安裝和配置Webpack

使用Webpack的Html插件

安裝React

安裝和配置Babel

CSS載入器

文件載入器

Material Design

react-hyperscript

Aframe

每個(gè)人的智能新時(shí)代

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

軟件技術(shù)-Web-React-MD-Aframe項(xiàng)目快速搭建

前提工作

創(chuàng)建index文件

安裝和配置Webpack

使用Webpack的Html插件

安裝React

安裝和配置Babel

CSS載入器

文件載入器

Material Design

react-hyperscript

Aframe

每個(gè)人的智能新時(shí)代

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频