前言
因?yàn)橄氪笾铝私庖幌虑岸司湎玻綍r(shí)偶爾能做個(gè)網(wǎng)頁(yè)，但是前段的框架太多沟于，不知道具體應(yīng)用哪個(gè)合適，所以學(xué)習(xí)了一下這門(mén)課程植康，從而有個(gè)初步的了解旷太。故而開(kāi)新坑。
一销睁、參考資料
+ 學(xué)習(xí)資料
+ 其他
- 1睡毒、Bulma : CSS 框架
- 2、Font Awesome icon ：圖標(biāo)
- 圖標(biāo)的下載轉(zhuǎn)換 ： fa2png.io
- flaticon.com : 下載方便
- 3冗栗、Adobe XD CC 可以設(shè)計(jì)出很漂亮的UI界面
二演顾、 Vue.js
1、安裝 npm
NPM官網(wǎng) 下載安裝
2隅居、安裝 vue
執(zhí)行命令：npm install --global vue.cli
image.png
3钠至、初始化創(chuàng)建項(xiàng)目
執(zhí)行命令：vue init webpack compare-vue
image.png
會(huì)自動(dòng)新建一個(gè)項(xiàng)目目錄
image.png
進(jìn)入目錄，安裝 npm 包：
npm install然后運(yùn)行項(xiàng)目：
npm run dev
image.png
4胎源、刪除原有主頁(yè)棉钧，新增 Home 頁(yè)面和 FAQ 頁(yè)面
5、導(dǎo)入 Bulma css 包
npm install bulma --save- 導(dǎo)入 sass 包
npm install node-sass sass-loader style-loader --save-dev
6涕蚤、引入 sass 樣式
- 新建一個(gè)
mq.sass文件宪卿， 復(fù)寫(xiě)bulma的一些基礎(chǔ)樣式
$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、編寫(xiě)頁(yè)面
三万栅、React
1佑钾、創(chuàng)建項(xiàng)目
- 安裝npm ：
npm install -g create-react-app - 創(chuàng)建project：
create-react-app reactstartup - 啟動(dòng)項(xiàng)目：
npm start
2、引入 Bulma css
npm install bulma --savenpm install node-sass --savenpm install --save-dev npm-runnpm install react-router-dom --save
3烦粒、編寫(xiě)頁(yè)面
四次绘、Angular
1、創(chuàng)建
npm install -g @angular/cling new compare-angular --routing --style=sass- 啟動(dòng)運(yùn)行 ：
ng serve
2撒遣、生成頁(yè)面
-
ng g c home:ng generate component compname
image.png
