Git Product home page Git Product logo

my-web-projects's Introduction

English | 简体中文

介绍

本项目原生js实现的web项目前20demo参考了vanilla-web-projects所实现的中文版,虽然很多代码借鉴了原项目,但也不同于原项目,因为逻辑代码完全不一致,而且每一个项目也做了相应的扩展,后续的项目为自己平时积累所写。

animate目录:主要使用一些动画库完成的示例。

CSS目录:主要使用简单的HTML和CSS完成的示例。

echarts目录:主要使用echarts完成的可视化图表示例。

JQuery目录:主要使用jQuery完成的示例。

js目录:主要使用HTML,CSS,JavaScript完成的示例。

React目录:主要使用React.js完成的示例。

threejs目录:主要使用three.js完成的示例[内含一个easy AR API完成的AR示例]。

vue目录:主要使用vue.js完成的示例。

typescript目录:主要使用typescript完成的示例。

home目录:本项目的官网,使用vuepress搭建。

website目录:个人响应式网站。

plugins目录:通过JavaScript编写的插件集合。

error目录:一些错误的html。

scripts目录:一些用于运行的脚本文件集合。

如果觉得本项目帮助到您学习,还望不吝啬 star。

温馨提示:所有项目 demo 仅供学习,不得用于商业用途,违者必究。

如何运行

website目录

npm run start //或者yarn start

1.home目录,即文档目录。

npm run home

打包:

npm run home:build

2.animate示例目录。

运行哪一个示例,就携带哪一个参数。如运行第一个示例,目录名为1。则运行命令如下:

npm run animate 1 //或者yarn run animate 1

3.CSS目录

原理同animate目录

npm run css 1  //或者yarn run css 1

4.jQuery目录

原理同上。

npm run jQuery 1 //或者yarn run jQuery 1

5.js目录

原理同上。

npm run js 1 //或者yarn js 1 (run可省略可不省略)

6.react目录

react目录有些不一样,如果执行第一个目录,则同上。

npm run react 1 //或者yarn react 1

如果是第2个目录,则需要安装依赖:

cd react/2
yarn install
npm run react 2 start //本地运行
npm run react 2 build //打包命令

如果是第3个目录,如果是以下命令:

npm run react 3 //无需下载依赖

如果是以下命令,也就是说命令行传了第二个参数:

npm run react dev/build/watch //需要先安装依赖,即执行命令yarn install/npm install/cnpm install

后续目录依次原理类推(由项目目录构建决定,如采用webpack则需要注意 webpack相关的命令)。

7.vue目录

第1到第5个示例命令执行如下:

npm run vue 1 //或者yarn vue 1,这里的1指的就是目录名

8.threejs目录

原理同animate目录

npm run threejs 1 //或者yarn threejs 1

9.typescript目录

需要先安装依赖,然后再执行命令,比如要运行第一个项目,命令如下:

yarn install //第一步安装依赖
npm run typescript 1 dev/build

第二个示例同第一个示例。

注意:需要安装git客户端,在git-bash中运行,如果有配置环境变量,则无需在git-bash中运行。当然,home目录除外。

友情链接

my-web-projects's People

Contributors

dependabot[bot] avatar eveningwater avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.