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