Create A New Project笔记

创建一个新项目

用 NPM 创建一个新的项目

    

  1. $ mkdir ilovereact
    2. 

  2. $ cd ilovereact
    3. 

  3. $ npm init
    4.

初始化 Git 仓库

  • 添加Node .gitignore
    

  1. curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore > .gitignore
    2.
  • 创建仓库
    

  1. $ git init
    2. 

  2. $ git add .
    3. 

  3. $ git commit -m "Project init"
    4. 

  4. $ git show HEAD
    5.

HTML 样板文件

创建index.html。 可以直接调整HTML5-boilerplate

    

  1. <!-- 使用 html5 语法 -->
    2. 

  2. <!doctype html>
    3. 

  3. <html lang="en">
    4. 

  4. <head>
    5. 

  5.     <meta charset="utf-8">
    6. 

    7. 

  7.     <!-- 强制 IE 遵循现代标准 -->
    8. 

  8.     <meta http-equiv="x-ua-compatible" content="ie=edge">
    9. 

    10. 

  10.     <title></title>
    11. 

  11.     <meta name="description" content="">
    12. 

    13. 

  13.     <!-- 在移动端禁用缩放。对响应式设计有用。 -->
    14. 

  14.     <meta name="viewport" content="width=device-width, initial-scale=1">
    15. 

    16. 

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

  17.     <!-- <link rel="stylesheet" href="css/app.css"> -->
    18. 

  18. </head>
    19. 

  19. <body>
    20. 

  20.     <h1>I Love React</h1>
    21. 

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

    23. 

  23. </body>
    24. 

  24. </html>
    25.

发布到GitHub

  • 首先到GitHub上创建一个新项目, 命名为sikeio-ilovereact。接下来，添加远程仓库：
    

  1. $ git remote add origin [email protected].com:yinxufeng/sikeio-ilovereact.git
    2. 

  2. $ git push -u origin master
    3.
  1. 要关联一个远程库，使用命令git remote add origin [email protected]:path/repo-name.git；
  2. 关联后，使用命令git push -u origin master第一次推送master分支的所有内容；
  3. 此后，每次本地提交后，只要有必要，就可以使用命令git push origin master推送最新修改；
  • 使用 GitHub Pages 来托管这个网页。所有你需要做的是推送到分支 gh-pages：
    

  1. git push origin master:gh-pages
    2.

然后你应该可以看到这个页面：http://yinxufeng.github.io/sikeio-ilovereact/

使用 BrowserSync 实时编辑

安装 BrowserSync

    

  1. $ npm install browser-[email protected].9.3 --save -d
    2.

--save把 browser-sync 添加到package.json。
-d使 npm 输出更多的日志信息。

如果一个 NPM 包是一个命令行工具，可执行文件会被安装在node_modules/.bin目录中。

    

  1. $ ls node_modules/.bin
    2. 

  2. browser-sync
    3.

为了让系统在./node_modules/.bin中查找browser-sync，我们需要把那个目录添加到 PATH 环境变量中：

    

  1. # vi ~/.bashrc or ~/.zshrc or ~/.bash_profile
    2. 

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

使用 BrowserSync 实时编辑

运行 BrowserSync 服务器

    

  1. $ browser-sync start --server --files=index.html
    2.

--files=index.html指定如果index.html改变了，自动刷新浏览器。
使用浏览器打开 http://localhost:3002, 你可以开始实时编辑了

Makefile

创建Makefile:

    

  1. # Makefile
    2. 

  2. .PHONY: server
    3. 

  3. server:
    4. 

  4.   # WARNING: The indentation MUST be a tab. Spaces won‘t work.
    5. 

  5.   browser-sync start --server --files=index.html
    6.

运行 browser-sync:

    

  1. make server
    2.

一个 Makefile“规则”通常会创建作为输出的文件..PHONY: server是说server是一个任务，而且并不创建文件。

市面上的 Makefile 教程几乎都是关于 C/C++ 项目的。查看一个不错的介绍：Using GNU Make as a Front-end Development Build Tool

项目 CSS 基础

CSS基础

在我们开始这个项目前，我们应该添加一些 CSS 来解决常见的跨浏览器问题。此外，为了让 CSS 布局更简单，我们会采用 ReactNative 的flexbox设置。

使用 PostCSS 向标准 CSS 添加特性

Sass 和 Less 是最受欢迎的两个 CSS 预处理器。它们是有着大量特性（变量，循环语句，条件语句，函数）的完备语言，可以生成复杂的 CSS 样式表。我们不需要那个。

Less/Sass 的替代品之一是 PostCSS。PostCSS 不是一种语言。它是一个解析器，解析标准 CSS 语法，而且允许你安装 JavaScript 插件通过不同方法来转换 CSS。使用 PostCSS，你可以添加你需要的功能。

  • 安装 PostCSS command line tool：

      

    1. npm install postcss-[email protected].1.0 --save-dev
      2.

使用 autoprefixer 添加浏览器引擎前缀。

查看一下 flexbox 的浏览器支持表 Can I Use: Flexbox

你需要为每个你支持的浏览器添加浏览器引擎前缀。 这条 CSS 规则也许看起来是这样：

    

  1. .a-flexible-row {
    2. 

  2.   /* 不用浏览器引擎前缀就支持 flexbox 的浏览器 */
    3. 

  3.   flex-direction: row;
    4. 

  4.   /* Safari 8, Android 4.3 或更早版本, iOS Safari 7/8 */
    5. 

  5.   -webkit-flex-direction: row;
    6. 

  6.   /* IE 10 */
    7. 

  7.   -ms-flex-direction: row;
    8. 

  8. }
    9.

autoprefixer工具自动给你添加浏览器引擎前缀。另外，它使用一个 浏览器市场占有率数据库 来决定某个特殊的特性是否仍旧需要浏览器引擎前缀。

  • 安装 autoprefixer：
    

  1. npm install [email protected].0.2 --save-dev
    2.

在全局使用 ReactNative flexbox settings。

ReactNative 中元素默认从上到下排列，但是在浏览器中默认是从左到右排列。结果是 ReactNative 的设定更加友好，所以让我们使浏览器表现出同样的行为。

  • 添加 ReactNative flexbox settings 到文件 css/app.css 中:
    

  1. body, div, span {
    2. 

  2.   box-sizing: border-box;
    3. 

  3.   position: relative;
    4. 

    5. 

  5.   display: flex;
    6. 

  6.   flex-direction: column;
    7. 

  7.   align-items: stretch;
    8. 

  8.   flex-shrink: 0;
    9. 

  9.   align-content: flex-start;
    10. 

    11. 

  11.   border: 0 solid black;
    12. 

  12.   margin: 0;
    13. 

  13.   padding: 0;
    14. 

  14. }
    15.
  • 用 postcss 和 autoprefixer 来转换CSS文件：
    

  1. mkdir -p bundle
    2. 

  2. postcss --use autoprefixer css/app.css --output bundle/app.css
    3.

可以看到在 bundle/app.css 中，自动添加前缀的 CSS 属性

normalize.css

浏览器行为表现彼此略有不同。normalize.css使浏览器行为更相似

  • 安装normalize.css
    

  1. npm install --save normalize.[email protected].0.3
    2.

我们使用postcss-import插件来导入 normalize.css 而不是使用另外一个 link 元素。

  • 安装postcss-import：
    

  1. npm install --save-dev postcss-import@7.0.0
    2.
  • 在 css/app.css 里导入normalize.css
    

  1. /* css/app.css */
    2. 

  2. @import "../node_modules/normalize.css/normalize.css";
    3. 

    4. 

  4. /* 因为 normalize.css 被安装在 node_modules 目录里，你实际上可以使用包名称来导入
    5. 

  5. @import "normalize.css";
    6. 

  6. */
    7.
  • 生成打包后的CSS
    

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

实时编辑

把Makefile 改成下面这样：

    

  1. .PHONY: css
    2. 

  2. css:
    3. 

  3.   mkdir -p bundle
    4. 

  4.   postcss --watch --use autoprefixer --use postcss-import css/app.css --output bundle/app.css
    5. 

    6. 

  6. .PHONY: server
    7. 

  7. server:
    8. 

  8.   browser-sync start --server --files=‘index.html,bundle/app.css‘
    9. 

    10. 

    11. 

  11. .PHONY: clean
    12. 

  12. clean:
    13. 

  13.   rm -r bundle
    14.
  1. 为 postcss 添加了 --watch 选项，因此每当你作出改动时，它重新构建 css/app.css。
  2. 把 bundle/app.css 添加到了 --files，因此每当我们重新构建时， BrowserSync 重新加载。

如果用Brackets代码编辑器，可以不用browser-sync，自带实时编辑功能

时间： 2024-10-25 03:18:07

Create A New Project笔记的相关文章

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:2.4:create (default-cli) on project standalone-pom: Unable to parse configuration of 3: mojo org.apache.maven.plugins:

问题: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-archetype-plugin:2.4:create (default-cli)  on project standalone-pom: Unable to parse configuration of 3:  mojo org.apache.maven.plugins:maven-archetype-plugin:2.4:create for parameter

IDEA创建maven项目报错解决：Failed to create a Maven project: &#39;C:/Users/../IdeaProjects/../pom.xml&#39; already e

晚上用IDEA创建Java的maven项目时报错了: Failed to create a Maven project: 'C:/Users/../IdeaProjects/../pom.xml' already exists in VFS1这个错误是因为之前我已经在这个文件夹里创建过同名的maven项目. 解决方法如下: 先把这个项目删了,然后把回收站中的这个项目和之前同名的项目一起彻底删除,重新创建一遍就不会报错了 IDEA创建maven项目报错解决:Failed to create a M

c++ 五月末六月初 GROUP PROJECT 笔记

判断是否为空txt的方法 1 bool empty_file() 2 { 3 bool ret = 0; //初始化为0 4 ifstream fin; 5 fin.open("data.txt"); 6 if(fin.peek() == EOF) 7 { 8 ret = 1; //文件为空,返回1 9 } 10 11 return ret; 12 } 疑惑: getline()函数究竟有哪些用法.读的行里面有tab该如何?

create dll project based on the existing project

Today, I have to create a dll project(called my.sln), the dllmain.cpp/.h/ is already in another project(called A.sln), I only have to update the included lib file in my dll project. So I create a new win32 project, which is an empty dll project. Here

How to create a project with Oracle Policy Modeling

This blog is about how to create a project with Oracle Policy Modeling. You can do it successfully if you do what I teach you, en, Now, we will start! Step 1: Open Oracle Policy Modeling, File --> New Project... Type the "hongten-pom" for the

Maven学习笔记-使用Eclipse插件创建Java Webapp项目

使用Java的猿们,最多接触的大概就是web项目了吧?在学习Maven的过程中,首先当然就是创建一个webapp项目. 自己在尝试的过程中,碰到了很多的问题.我把详细的过程都记录下来,用以今后参考. 步骤: 如果未搭建好Maven开发环境,请参考前一篇:Maven学习笔记--环境搭建 打开Eclipse, 菜单栏选择File -> new -> other,在弹出的对话框中找到Maven Project. 在弹出的新建Maven项目的对话框中,不要勾选第一项"Create a sim

使用eclipse插件创建一个web project

使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing 选择 war的形式 由于packing是war包,那么下面也就多出了webapp的目录 由于我们的项目要使用eclipse发布到tomcat下面,这里我们需要先把项目转成dynamic web project 在我们的项目上点击右键,选择properties 并找到 Project Facets ,并点

Conditional project or library reference in Visual Studio

Conditional project or library reference in Visual Studio In case you were wondering why you haven’t heard from me in a while, I’ve been busy, which isn’t really of much importance unless you know me on a personal level. What is relevant is that I re

eclipse jee创建Maven project并转换为Dynamic web project

一.创建maven工程 在eclipse的菜单栏选择File->New->Other->Maven->Maven Project 下一步后选择Create a simple project(skip archetype selection),如图 下一步后输入Group Id,Archive Id,Packaging后点击Finish,如图 创建成功后的文件目录,如图 二.转换为java的Dynamic Web Project 右键点击Project的名称,选择Properties