一、Create-a-new-project

最新推荐文章于 2022-01-25 17:13:48 发布
最新推荐文章于 2022-01-25 17:13:48 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： Objective-C Html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/quanqinyang/article/details/49496077
版权

创建项目

mkdir ilovereact
cd ilovereact
npm init

初始/发布Git

git init
git add .
git commit -m "First Commit"

git remote add origin git@github.com:shahaier/sikeio-ilovereact.git
git push origin master -u

GitHub Pages托管网页

git push origin master:gh-pages

HTML样板文件

<!-- Uses html5 syntax -->
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <!-- Forces IE to follow modern standards -->
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title></title>
    <meta name="description" content="">

    <!-- Disable zooming on mobile. Useful for responsive design. -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- <link rel="apple-touch-icon" href="apple-touch-icon.png"> -->

    <link rel="stylesheet" href="css/app.css">

</head>
<body>
<h1>I Love React</h1>

<!-- <script src="js/app.js"></script> -->

</body>
</html>

BrowserSync安装使用

npm install browser-sync@2.9.3 --save -d
browser-sync start --server --files=index.html

git diff

配置PATH环境变量

查看PATH当前值

echo $PATH

让系统在./node_modules/.bin中查找browser-sync，配置PATH

export PATH=$PATH:./node_modules/.bin

持久化配置

# 添加到  ~/.bashrc or ~/.zshrc
export PATH=$PATH:./node_modules/.bin

touch Makefile

.PHONY: css
css:
    mkdir -p bundle
    postcss --watch --use autoprefixer --use postcss-import css/app.css --output bundle/app.css

.PHONY: server
server:
    browser-sync start --server --files='index.html,bundle/app.css'

.PHONY: clean
clean:
    rm -r bundle

make server

control+c退出

PostCSS 安装：

npm install postcss-cli@2.1.0 --save-dev

查看帮助：postcss -h

安装autoprefixer：

npm install autoprefixer@6.0.2 --save-dev

在项目中创建css文件，css/app.css

body, div, span {
  box-sizing: border-box;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  align-content: flex-start;

  border: 0 solid black;
  margin: 0;
  padding: 0;
}

使用postcss创建css文件

mkdir -p bundle
postcss --use autoprefixer css/app.css --output bundle/app.css

normalize.css安装：

npm install --save normalize.css@3.0.3

postcss-import 安装 ：

npm install --save-dev postcss-import@7.0.0

在css/app.css中添加@import

/* css/app.css */
@import "../node_modules/normalize.css/normalize.css";
或者
@import "normalize.css";

打包输出命令

postcss --use autoprefixer --use postcss-import css/app.css --output bundle/app.css

在全局使用 Flexbox @import "../node_modules/normalize.css/normalize.css"; @import "normalize.css";

mkdir -p bundle
postcss --use autoprefixer css/app.css --output bundle/app.css

端_木
关注
专栏目录
在GitLab 或者GitHub上创建新项目
Fickle_actor的博客
12-30 1151
1.登录GitLab 或者GitHub 注册GitLab的时候的验证码是谷歌提供的，需要翻墙才能显示，如果不想翻墙可以先使用gitHub的账号密码登录进去，然后在Setting中修改密码即可。 2.在GitLab 的 project tab中点击new project 按钮，或者在GitHub的repositories tab中点击new 按钮 3.填写项目相关信息 并点击 Create pr...
bash: create-react-app: command not found
游海东的技术专栏
05-23 3492
1、错误描述 Administrator@SKY-20160824VTF MINGW64 /d/HBuilderProjects/cmn $ npm install create-react-app npm WARN saveError ENOENT: no such file or directory, open 'D:\HBuilderProjects\ ...
Magento2 create a new module
davissuperman的专栏
12-01 874
1. download from magento website, it can not work 2. download magento2 from github https://github.com/magento/magento2 using branch merchat_beta 3. create a new module following https://github.com/a
Create new module “HelloWorld” – in Magento
Just Code
10-21 164
Do you want to create a new page in Magento ? or Do you want to create a new module in Magento ? If yes, Then ok, just spend 10 minutes and follow below steps.   Objectives: I will create a new pa...
git命令行推送新项目至github
weixin_44115164的博客
01-25 531
git命令行推送新项目至github1、idea创建一个maven项目2、github上创建同名仓库3、在本地项目下开启git bash 命令4、输入github账号和密码参考资料 1、idea创建一个maven项目 2、github上创建同名仓库 3、在本地项目下开启git bash 命令 依次输入如下命令 git remote add origin https://github.com/账号名/项目名.git git add . git commit -m "init project"
Ionic -----you can also create a new NgModule that exports and includes
张伟光
04-25 558
【问题来源？】 Ionic一个页面引用另一个页面时，形成了父与子类的关系，这时候我们需要在主页面添加定义，如下。 这时候就会报如下的信息错误，告诉我们父与子类只需添加一个就行。 【解决方案】 将引入的页面的生命删除掉就行，如下 ...
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
create-project：用于创建项目的cli工具
03-04
当用户在终端中运行`npx create-project my-new-project`这样的命令时，"create-project-main"将被调用并执行相应的逻辑。 总的来说，"create-project"是JavaScript开发中的一个实用工具，它结合了Node.js的强大...
create-near-app:创建一个连接到 NEAR 区块链的入门应用程序
07-23
yarn create near-app [options] new-awesome-project 如果没有任何选项，这将创建一个带有普通JavaScript前端和智能合约的项目 其他选项： --frontend=react – 使用作为你的前端模板 --contract=rust – 在你的...
New-Pimcore-Project
04-08
COMPOSER_MEMORY_LIMIT=-1 composer create-project pimcore/skeleton my-project cd ./my-project ./vendor/bin/pimcore-install 将您的虚拟主机指向my-project/web 在浏览器中打开 完毕！ :smiling_face_with_...
newproject
05-15
SQL是Structured Query Language(结构化查询语言)的缩写。SQL是专为数据库而建立的操作命令集
GitHub create project
何必低头的博客
05-17 3159
Hello World 10 minute readIntroWhat is GitHub?Create a RepositoryCreate a BranchMake a CommitOpen a Pull RequestMerge Pull RequestThe Hello World project is a time-honored tradition in computer progra...
create git project
wangziustc的博客
04-07 1463
若git未设置用户和邮箱，需要运行以下命令，设置全局信息(包括用户名，邮箱地址) git config --global user.name "wangzi" git config --global user.email "xxx@163.com" 1、登陆GitHub，然后，在右上角找到“Create a new repo”按钮，创建一个新的仓库：myproject 记住地址：http:
Cordova 创建项目失败 （cordova create project-name）
weixin_34337265的博客
01-11 703
2019独角兽企业重金招聘Python工程师标准>>> ...
IDEA下新建的Project与Eclipse下新建Project，你真的懂了吗？
ZrZrZr666666的博客
11-15 765
引言： 1.复习maven新建Project过程中，思路极度不清晰，只知道创建项目，但是对于在IDEA下新建项目到底是什么含义并没有透彻理解。 2.回想Eclipse的工作空间 workspace 以及新建Project，与IDEA做对比加以区分，进一步加深理解 3.通过查找资料，博客。解决自己的困惑和疑问，进行总结 1. 明确IDEA的新建Project与Eclipse的Project的区别 重点明确： IDEA下新建Project,相当于Eclipse的workspace,并不是与之前学习的.
IDEA初学者的使用指南
qq_37232843的博客
05-11 608
一、引言 1.1简介 IDEA 全称IntelliJ IDEA，是用于java语言开发的集成环境（也可用于其他语言），IntelliJ在业界被公认为最好 的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创 新的GUI设计等方面的功能可以说是超常的。 1.2下载 访问官⽅⽹站: https://www.jetbrains....
react初始化项目_如何自动化新的React项目的初始化
weixin_26750481的博客
09-07 304
react初始化项目Whenever I start a new React project I always have the same setup - run Create React App, create a GitHub repo, initialize the local repo, tediously and manually copy over all my usual depen...
React创建新项目
m0_37780367的博客
05-12 113
1、本地新建项目文件夹目录 2、cd到此目录下 3、npm install -g cnpm --registry=https://registry.npm.taobao.org 4、cnpm install -g create-react-app 5、create-react-app my-app 6、cd my-app 7、npm start
idea新建一个java项目_创建第一个Java项目(Create First Java Project)
weixin_39634438的博客
02-22 1012
创建第一个Java项目(Create First Java Project)现在是我们获得IntelliJ实践经验的时候了。 在本章中，我们将创建我们的第一个Java项目。 我们将编写并执行传统的Hello World程序。 本章介绍Java应用程序的编译和运行。创建项目对于与开发相关的任何事情，开发人员必须使用IntelliJ创建一个新项目。 让我们按照这些步骤创建一个项目 -启动Int...
Unity3D入门教程：Roll-a-Ball游戏制作
- 打开Unity编辑器，通过`File > New Project`创建新项目，设置项目名称（例如"Roll-a-Ball"）、项目存储路径，并选择游戏模式（通常是3D）。 - 创建后，你会看到Unity编辑器的默认布局，可以通过右上角的`layout`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值