Vue.js React Angular Startup projects

前言

因为想大致了解一下前端,平时偶尔能做个网页,但是前段的框架太多,不知道具体应用哪个合适,所以学习了一下这门课程,从而有个初步的了解。故而开新坑。

一、参考资料

+ 学习资料

  • 1、包学会之浅入浅出Vue.js:开学篇
  • 2、Vue.js 教程 | 菜鸟教程
  • 3、官方指南

+ 其他

  • 1、Bulma : CSS 框架
  • 2、Font Awesome icon :图标
    • 图标的下载转换 : fa2png.io
    • flaticon.com : 下载方便
  • 3、Adobe XD CC 可以设计出很漂亮的UI界面

二、 Vue.js

1、安装 npm

NPM官网 下载安装

2、安装 vue

执行命令:npm install --global vue.cli

image.png

3、初始化创建项目

执行命令:vue init webpack compare-vue

image.png

会自动新建一个项目目录
image.png

进入目录,安装 npm 包:npm install
然后运行项目:npm run dev
image.png

4、删除原有主页,新增 Home 页面和 FAQ 页面

github commit

5、导入 Bulma css 包

  • npm install bulma --save
  • 导入 sass 包
    npm install node-sass sass-loader style-loader --save-dev

6、引入 sass 样式

  • 新建一个 mq.sass 文件, 复写 bulma的一些基础样式

$primary: #1EC9AC !default

// Responsiveness
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 40px
$desktop: 1000px !default
// 1152px container + 40
$widescreen: 1192px !default
// 1344px container + 40
$fullhd: 1384px !default

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content

=desktop
  @media screen and (min-width: $desktop)
    @content

=desktop-only
  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
    @content

Sass语法Ref

  • Vue 组件中引用 style
    image.png

    Github commit here

7、编写页面

点此连接查看commit页面

三、React

1、创建项目

  • 安装npm :npm install -g create-react-app
  • 创建project:create-react-app reactstartup
  • 启动项目:npm start

2、引入 Bulma css

  • npm install bulma --save
  • npm install node-sass --save
  • npm install --save-dev npm-run
  • npm install react-router-dom --save

3、编写页面

点此连接查看commit页面

四、Angular

1、创建

  • npm install -g @angular/cli
  • ng new compare-angular --routing --style=sass
  • 启动运行 : ng serve

2、生成页面

  • ng g c home : ng generate component compname
    image.png

你可能感兴趣的:(Vue.js React Angular Startup projects)