CSS3艺术:网页设计案例实战之angular实现 序

Posted 2023-02-24 lxhjh

最近看见一本比较好的书《CSS3艺术:网页设计案例实战》。该书作者，用详实的语言、丰富的经验组织css3各个方面的特点。

我在css方面认识几乎是零，想学习学习，看完前面三章之后，我想重新复习一下前面章节时，遇到麻烦事：书还是书，例子还是例子。例子太零散，不方便查看。冲动之下，我准备用angular做一个项目，把书中各个章节的知识点、例子进行一定的组织，方便查看和复习。

一、准备工作

1、开发工具：vscode

2、浏览器:firefox

3、在gitee中创建一个叫css3art的仓库

二、环境准备

1、建立工程

ng new css3art

2、安装npm依赖包

cd css3art
npm install bootstrap --save
npm install @popperjs/core --save
npm install @fortawesome/fontawesome-free --save

3、在工程中使用bootstrap、popperjs、fontawesome

3.1、用编辑器打开工程

3.2、修改angular.json

  ....
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/sidebars",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ]
          ,
          ....

在styles中增加bootstrap、fontawesome的样式;
在scripts中增加bootstrap、popperjs、fontawesome的js

4、启动工程

ng serve --open

5、在Gitee中创建仓库css3art

6、git关联Gitee中的仓库

git remote add origin [e-mail]:lxhjh2015/css3art.git

7、关联到远程仓库分支
git fetch origin master

8、合并远程
git merge origin FETCH_HEAD

9、重定基
git pull --rebase origin master
10、推送到远程分支
git push --set-upstream origin master

至此，准备工作完成。