前言
因为想大致了解一下前端，平时偶尔能做个网页，但是前段的框架太多，不知道具体应用哪个合适，所以学习了一下这门课程，从而有个初步的了解。故而开新坑。
一、参考资料
+ 学习资料
+ 其他
- 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 页面
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
- Vue 组件中引用 style
image.png
Github commit here
7、编写页面
三、React
1、创建项目
- 安装npm ：
npm install -g create-react-app - 创建project：
create-react-app reactstartup - 启动项目：
npm start
2、引入 Bulma css
npm install bulma --savenpm install node-sass --savenpm install --save-dev npm-runnpm install react-router-dom --save
3、编写页面
四、Angular
1、创建
npm install -g @angular/cling new compare-angular --routing --style=sass- 启动运行 ：
ng serve
2、生成页面
-
ng g c home:ng generate component compname
image.png
