{"id":39516,"date":"2023-04-16T16:58:38","date_gmt":"2023-01-08T17:15:08","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/"},"modified":"2024-04-29T23:48:28","modified_gmt":"2024-04-29T15:48:28","slug":"%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/","title":{"rendered":"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 – \u5b9e\u73b0\u90e8\u5206 – \u7b2c\u4e09\u90e8\u5206"},"content":{"rendered":"

\u7ee7\u524d\u4e00\u7bc7\u6587\u7ae0\uff0c\u5b66\u4e60Angular\u4e0eVue.js\u7684\u6bd4\u8f83 – \u914d\u7f6e\u7bc7 – \u7b2c2\u90e8\u5206<\/p>\n

\u6211\u6253\u7b97\u4ece\u8fd9\u91cc\u5f00\u59cb\u5199\u4ee3\u7801\u3002<\/p>\n

\u4f60\u9996\u5148\u8981\u505a\u4ec0\u4e48\uff1f<\/h1>\n

\u56e0\u4e3a\u60f3\u8981\u6bd4\u8f83\u9875\u9762\u8df3\u8f6c\uff0c\u6240\u4ee5\u6253\u7b97\u521b\u5efa\u4e3b\u9875\u3001\u5217\u8868\u9875\u548c\u8be6\u7ec6\u9875\u8fd9\u4e09\u4e2a\u9875\u9762\u3002<\/p>\n

\u5728\u5217\u8868\u9875\u9762\u548c\u8be6\u60c5\u9875\u9762\u4e2d\u5c55\u793a\u4eceAPI\u83b7\u53d6\u7684\u6570\u636e\u3002<\/p>\n

\u8bbe\u8ba1\u7684\u6837\u5b50\u662f\u8fd9\u6837\u7684<\/p>\n

\"Web<\/div>\n
\"Web<\/div>\n
\"Web<\/div>\n

\u4e0d\u7ba1\u600e\u6837\uff0c\u8df3\u8f6c\u9875\u9762\u3002<\/h1>\n

\u6211\u60f3\u9996\u5148\u521b\u5efa\u4e00\u4e2a\u7a7a\u767d\u9875\u9762\u3002<\/p>\n

\u5728Vue\u7684\u60c5\u51b5\u4e0b<\/h2>\n
<<\/span>template<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"top\"<\/span>><\/span>\r\n    Top\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>Top<\/span>'<\/span>,<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\r\n<\/code><\/pre>\n
<<\/span>template<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"list\"<\/span>><\/span>\r\n    List\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>List<\/span>'<\/span>,<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n<\/code><\/pre>\n
<<\/span>template<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"detail\"<\/span>><\/span>\r\n    Detail\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>Detail<\/span>'<\/span>,<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n<\/code><\/pre>\n
\u4e0b\u4e00\u6b65\u662f\u5c06\u7ec4\u4ef6\u548c\u8fc7\u6e21\u8054\u7cfb\u8d77\u6765\u3002
\nURL\u5c06\u8bbe\u7f6e\u4e3a\u4ee5\u4e0b3\u4e2a\u3002<\/p>\n
    \n
  • \n
      \/ \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u30c8\u30c3\u30d7\u30da\u30fc\u30b8<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \n
      • \n
          \/list\u3000\u3000\u3000\u3000\u3000\u4e00\u89a7\u30da\u30fc\u30b8<\/ul>\n<\/li>\n<\/ul>\n
           <\/p>\n
            \/detail\/[id]\u3000\u8a73\u7d30\u30da\u30fc\u30b8<\/ul>\n
            import<\/span> Vue<\/span> from<\/span> '<\/span>vue<\/span>'<\/span>\r\nimport<\/span> VueRouter<\/span> from<\/span> '<\/span>vue-router<\/span>'<\/span>\r\nimport<\/span> Top<\/span> from<\/span> '<\/span>@\/views\/Top.vue<\/span>'<\/span>\r\n\r\nVue<\/span>.<\/span>use<\/span>(<\/span>VueRouter<\/span>)<\/span>\r\n\r\nconst<\/span> routes<\/span> =<\/span> [<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/<\/span>'<\/span>,<\/span>\r\n    name<\/span>:<\/span> '<\/span>Top<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> Top<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/list<\/span>'<\/span>,<\/span>\r\n    name<\/span>:<\/span> '<\/span>List<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> ()<\/span> =><\/span> import<\/span>(<\/span>\/* webpackChunkName: \"list\" *\/<\/span> '<\/span>@\/views\/List.vue<\/span>'<\/span>)<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> '<\/span>\/detail\/:id<\/span>'<\/span>,<\/span>\r\n    name<\/span>:<\/span> '<\/span>Detail<\/span>'<\/span>,<\/span>\r\n    component<\/span>:<\/span> ()<\/span> =><\/span> import<\/span>(<\/span>\/* webpackChunkName: \"detail\" *\/<\/span> '<\/span>@\/views\/Detail.vue<\/span>'<\/span>)<\/span>\r\n  }<\/span>\r\n]<\/span>\r\n\r\nconst<\/span> router<\/span> =<\/span> new<\/span> VueRouter<\/span>({<\/span>\r\n  mode<\/span>:<\/span> '<\/span>history<\/span>'<\/span>,<\/span>\r\n  base<\/span>:<\/span> process<\/span>.<\/span>env<\/span>.<\/span>BASE_URL<\/span>,<\/span>\r\n  routes<\/span>\r\n})<\/span>\r\n\r\nexport<\/span> default<\/span> router<\/span>\r\n\r\n<\/code><\/pre>\n
            \u4fbf\u5b9c\u8d77\u89c1\uff0c\u5728\u6b64\u6211\u4eec\u4f7f\u7528\u4e86webpackchunk\uff0c\u5e76\u4e0d\u8be6\u7ec6\u89e3\u91ca\u3002<\/p>\n
            \n
            \u53ea\u8981\u6bcf\u4e2a\u9875\u9762\u7684URL\u663e\u793a\u5982\u4e0b\uff0c\u5c31\u7b97\u662f\u6210\u529f\u3002<\/p>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \n
            \u5982\u679c\u662fAngular\u7684\u60c5\u51b5<\/h2>\n
            \u8ba9\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u7a7a\u9875\u9762\u5728Angular\u4e2d\u3002<\/p>\n
            \u5728Vue\u4e2d\uff0c\u6211\u5011\u9700\u8981\u8907\u88fd\u6587\u4ef6\u4f86\u5efa\u7acb\u9801\u9762\u3002\u4f46\u5728Angular CLI\u4e2d\uff0c\u6211\u5011\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u4f86\u751f\u6210\u6587\u4ef6\u548c\u76ee\u9304\u3002<\/p>\n
            $<\/span> ng generate component top # \u7701\u7565\u5f62\u306e\u30b3\u30de\u30f3\u30c9 ng g c top<\/span>\r\n<\/code><\/pre>\n
            $<\/span> ng generate component list\r\n<\/code><\/pre>\n
            $<\/span> ng generate component detal\r\n<\/code><\/pre>\n
            \u6572\u51fb\u4e09\u4e2a\u547d\u4ee4\u540e\uff0c\u53ef\u4ee5\u786e\u8ba4\u5df2\u751f\u6210\u4e86\u4e09\u4e2a\u5305\u542b\u4e09\u4e2a\u6587\u4ef6\u7684\u76ee\u5f55\u3002<\/p>\n
            \u4ece\u9876\u5c42\u76ee\u5f55\u63d0\u53d6\u7684\u6458\u8981<\/p>\n
            <p><\/span>top works!<\/p><\/span>\r\n<\/code><\/pre>\n
            \/\/ \u7a7a\u306e\u30d5\u30a1\u30a4\u30eb<\/span>\r\n<\/code><\/pre>\n
            import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-top<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/top.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/top.component.scss<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> TopComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
            \/src\/app\/app.module.ts\u6587\u4ef6\u4e2d\u8ffd\u52a0\u4e86\u4e00\u4e2a\u9700\u8981\u6ce8\u610f\u7684\u90e8\u5206<\/p>\n
            import<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppRoutingModule<\/span> }<\/span> from<\/span> '<\/span>.\/app-routing.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> TopComponent<\/span> }<\/span> from<\/span> '<\/span>.\/top\/top.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/list\/list.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> DetailComponent<\/span> }<\/span> from<\/span> '<\/span>.\/detail\/detail.component<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    AppComponent<\/span>,<\/span>\r\n+<\/span>    TopComponent<\/span>,<\/span>\r\n+<\/span>    ListComponent<\/span>,<\/span>\r\n+<\/span>    DetailComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    BrowserModule<\/span>,<\/span>\r\n    AppRoutingModule<\/span>,<\/span>\r\n  ],<\/span>\r\n  bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
            \u901a\u8fc7\u5c06\u7ec4\u4ef6\u6587\u4ef6\u52a0\u8f7d\u5230\u58f0\u660e\u4e2d\uff0c\u53ef\u4ee5\u5728\u7ec4\u4ef6\u5185\u90e8\u4f7f\u7528\u6240\u9700\u7684\u6587\u4ef6\uff0c\u4ece\u800c\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u7ec4\u4ef6\u3002<\/p>\n
            \n
            \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u7f16\u5199\u7528\u4e8e\u8f6c\u79fb\u7684\u8def\u7531\u6587\u4ef6\u3002<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> Routes<\/span>,<\/span> RouterModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\n+<\/span> import<\/span> {<\/span> TopComponent<\/span> }<\/span> from<\/span> '<\/span>.\/top\/top.component<\/span>'<\/span>;<\/span>\r\n+<\/span> import<\/span> {<\/span> ListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/list\/list.component<\/span>'<\/span>;<\/span>\r\n+<\/span> import<\/span> {<\/span> DetailComponent<\/span> }<\/span> from<\/span> '<\/span>.\/detail\/detail.component<\/span>'<\/span>;<\/span>\r\n\r\n\r\nconst<\/span> routes<\/span>:<\/span> Routes<\/span> =<\/span> [<\/span>\r\n+<\/span>  {<\/span>\r\n+<\/span>    path<\/span>:<\/span> ''<\/span>,<\/span>\r\n+<\/span>    component<\/span>:<\/span> TopComponent<\/span>\r\n+<\/span>  },<\/span>\r\n+<\/span>  {<\/span>\r\n+<\/span>    path<\/span>:<\/span> '<\/span>list<\/span>'<\/span>,<\/span>\r\n+<\/span>    component<\/span>:<\/span> ListComponent<\/span>\r\n+<\/span>  },<\/span>\r\n+<\/span>  {<\/span>\r\n+<\/span>    path<\/span>:<\/span> '<\/span>detail\/:id<\/span>'<\/span>,<\/span>\r\n+<\/span>    component<\/span>:<\/span> DetailComponent<\/span>\r\n+<\/span>  }<\/span>\r\n];<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  imports<\/span>:<\/span> [<\/span>RouterModule<\/span>.<\/span>forRoot<\/span>(<\/span>routes<\/span>)],<\/span>\r\n  exports<\/span>:<\/span> [<\/span>RouterModule<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppRoutingModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
            \n
            \u8fd9\u91cc\u4e0eVue\u51e0\u4e4e\u6ca1\u6709\u4ec0\u4e48\u4e0d\u540c\u3002<\/p>\n
            \u53ea\u8981\u5728URL\u4e0a\u8bbf\u95ee\u5e76\u786e\u8ba4\u5c4f\u5e55\u4e0a\u663e\u793a\u4e0b\u65b9\u7684\u56fe\u7247\uff0c\u5c31\u8868\u793a\u6210\u529f\u4e86\u3002<\/p>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \n
            CSS\u5e03\u5c40<\/h1>\n
            \u7531\u4e8e\u6587\u4ef6\u521b\u5efa\u5df2\u7ecf\u5b8c\u6210\uff0c\u6240\u4ee5\u6211\u4eec\u5c06\u5f00\u59cb\u8fdb\u884cCSS\u5e03\u5c40\u3002<\/p>\n
            \u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u7f16\u5199normalize.scss\u548c\u5171\u901aCSS\u6765\u89e3\u51b3\u4e0d\u540c\u6d4f\u89c8\u5668\u4e4b\u95f4\u7684\u5e03\u5c40\u5dee\u5f02\u3002<\/p>\n
            Vue\u7684\u60c5\u51b5\u4e0b<\/h2>\n
            \u5b89\u88c5normalize.scss<\/p>\n
            yarn add normalize.scss\r\nor\r\nnpm install normalize.scss\r\n<\/span><\/code><\/pre>\n
            \u5bfc\u5165 normalize.scss \u6587\u4ef6<\/p>\n
            <<\/span>template<\/span>><\/span>\r\n  <div<\/span> id=<\/span>\"app\"<\/span>><\/span>\r\n    <router-view\/><\/span>\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n+ <<\/span>script<\/span>><\/span>\r\n+<\/span> import<\/span> '<\/span>normalize.scss\/normalize.scss<\/span>'<\/span>\r\n+<\/span>\r\n+<\/span> export<\/span> default<\/span>{<\/span>\r\n+<\/span>   name<\/span>:<\/span> '<\/span>App<\/span>'<\/span>\r\n+<\/span> }<\/span>\r\n+<\/span> <\/<\/span>script<\/span>><\/span>\r\n<\/code><\/pre>\n
            \u5199\u4e0a\u901a\u7528CSS<\/p>\n
            <<\/span>template<\/span>><\/span>\r\n  <div<\/span> id=<\/span>\"app\"<\/span>><\/span>\r\n    <router-view\/><\/span>\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\nimport<\/span> '<\/span>normalize.scss\/normalize.scss<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span>{<\/span>\r\n  name<\/span>:<\/span> '<\/span>App<\/span>'<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\r\n<<\/span>style<\/span>><\/span>\r\nbody<\/span> {<\/span>\r\n  font-family<\/span>:<\/span> YuGothic<\/span>,<\/span>'Yu Gothic'<\/span>,<\/span>'Hiragino Kaku Gothic ProN'<\/span>,<\/span>'\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 ProN W3'<\/span>,<\/span>'\u30e1\u30a4\u30ea\u30aa'<\/span>,<\/span> +<\/span> Meiryo<\/span>,<\/span>'\uff2d\uff33 \u30b4\u30b7\u30c3\u30af'<\/span>,<\/span>sans-serif<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 400<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 12px<\/span>;<\/span>\r\n}<\/span>\r\n<\/<\/span>style<\/span>><\/span>\r\n<\/code><\/pre>\n
            \u5728Angular\u7684\u60c5\u51b5\u4e0b<\/h2>\n
            normalize.scss\u7684\u5b89\u88c5\u65b9\u5f0f\u4e0d\u53d8\uff0c\u6545\u7701\u7565\u4e0d\u63d0\u3002<\/p>\n
            Angular\u7684\u73af\u5883\u914d\u7f6e\u6587\u4ef6\u4e2d\u5b58\u5728\u4e00\u4e2a\u540d\u4e3aangular.json\u7684\u4e1c\u897f\uff0c\u6211\u60f3\u8981\u5728node_modules\u6587\u4ef6\u5939\u4e2d\u5b89\u88c5\u7684\u6587\u4ef6\u4e2d\u4f7f\u7528scss\u8fdb\u884c\u8bfb\u53d6\u3002<\/p>\n
            \"node_modules\/normalize.scss\/normalize.scss\r\n<\/code><\/pre>\n
            \u5c06\u5176\u8ffd\u52a0\u5230styles\u4e2d\u3002<\/p>\n
            {<\/span>\r\n  \"$schema\"<\/span>:<\/span> \".\/node_modules\/@angular\/cli\/lib\/config\/schema.json\"<\/span>,<\/span>\r\n  \"version\"<\/span>:<\/span> 1<\/span>,<\/span>\r\n  \"newProjectRoot\"<\/span>:<\/span> \"projects\"<\/span>,<\/span>\r\n  \"projects\"<\/span>:<\/span> {<\/span>\r\n    \"sample-angular\"<\/span>:<\/span> {<\/span>\r\n      ...<\/span>\r\n      \"architect\"<\/span>:<\/span> {<\/span>\r\n        \"build\"<\/span>:<\/span> {<\/span>\r\n          \"builder\"<\/span>:<\/span> \"@angular-devkit\/build-angular:browser\"<\/span>,<\/span>\r\n          \"options\"<\/span>:<\/span> {<\/span>\r\n            ...<\/span>\r\n            \"styles\"<\/span>:<\/span> [<\/span>\r\n+<\/span>               \"node_modules\/normalize.scss\/normalize.scss\"<\/span>,<\/span>\r\n              \"src\/styles.scss\"<\/span>\r\n            ],<\/span>\r\n            ...<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u4e3a\u4e86\u8bbe\u5b9aAngular\u7684\u5171\u901a\u6837\u5f0f\uff0c\u53ef\u4ee5\u51c6\u5907styles.scss\u6587\u4ef6\uff0c\u5e76\u5728\u6b64\u5904\u52a0\u8f7dnormalize.scss\u5e76\u7f16\u5199\u5171\u901a\u6837\u5f0f\u63cf\u8ff0\u3002<\/p>\n
            @import<\/span> '~normalize.scss'<\/span>;<\/span>\r\n\r\nbody<\/span> {<\/span>\r\n  font-family<\/span>:<\/span> YuGothic<\/span>,<\/span>'Yu Gothic'<\/span>,<\/span>'Hiragino Kaku Gothic ProN'<\/span>,<\/span>'\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 ProN W3'<\/span>,<\/span>'\u30e1\u30a4\u30ea\u30aa'<\/span>,<\/span> +<\/span> Meiryo<\/span>,<\/span>'\uff2d\uff33 \u30b4\u30b7\u30c3\u30af'<\/span>,<\/span>sans-serif<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 400<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 12px<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u8fd9\u6837\u4e00\u5207\u51c6\u5907\u90fd\u5b8c\u6210\u4e86\u3002<\/p>\n
            \u521b\u5efa\u9996\u9875<\/h1>\n
            \u521b\u5efa\u9996\u9875
            \n\u9996\u9875\u7684\u7ed3\u6784\u662f<\/p>\n
            \u51c6\u5907\u53ef\u4f9b\u5171\u540c\u4f7f\u7528\u7684\u7ec4\u4ef6\uff0c\u5e76\u5c06\u5176\u52a0\u8f7d\u5230\u9996\u9875\u4e0a\u3002<\/p>\n
            \u5171\u901a\u7ec4\u4ef6
            \n– \u6309\u94ae
            \n– \u5934\u90e8<\/p>\n
            \u5bf9\u4e8eVue\u800c\u8a00<\/h2>\n
            \u6309\u94ae\u7ec4\u4ef6\u5e94\u4f7f\u7528props\u4ece\u7236\u7ec4\u4ef6\u63a5\u6536\u6570\u636e\uff0c\u4ee5\u4fbf\u8fdb\u884c\u6570\u636e\u4f20\u9012\u3002<\/p>\n
            <<\/span>template<\/span>><\/span>\r\n  <router-link<\/span> :to=<\/span>\"path\"<\/span> class=<\/span>\"button\"<\/span>><\/span>{{<\/span> text<\/span> }}<\/span><\/router-link><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>BaseButton<\/span>'<\/span>,<\/span>\r\n  props<\/span>:<\/span> {<\/span>\r\n    \/**\r\n     * @param text button\u306b\u8868\u793a\u3055\u305b\u308b\u6587\u5b57\u5217\r\n     * @param path \u9077\u79fb\u5148\u306eURL\u306e\u30d1\u30b9\r\n     *\/<\/span>\r\n    text<\/span>:<\/span> {<\/span>\r\n      type<\/span>:<\/span> String<\/span>,<\/span>\r\n      required<\/span>:<\/span> true<\/span>\r\n    },<\/span>\r\n    path<\/span>:<\/span> {<\/span>\r\n      type<\/span>:<\/span> String<\/span>,<\/span>\r\n      required<\/span>:<\/span> true<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\r\n<<\/span>style<\/span> lang=<\/span>\"scss\"<\/span> scoped<\/span>><\/span>\r\n.button<\/span>{<\/span>\r\n  display<\/span>:<\/span> block<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 22px<\/span>;<\/span>\r\n  width<\/span>:<\/span> 400px<\/span>;<\/span>\r\n  height<\/span>:<\/span> 70px<\/span>;<\/span>\r\n  padding<\/span>:<\/span> 25px<\/span>;<\/span>\r\n  box-sizing<\/span>:<\/span> border-box<\/span>;<\/span>\r\n  color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n  background<\/span>:<\/span> #000<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 700<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>;<\/span>\r\n  transition<\/span>:<\/span> all<\/span> .3s<\/span> ease<\/span>;<\/span>\r\n  border<\/span>:<\/span> 1px<\/span> solid<\/span> transparent<\/span>;<\/span>\r\n  &<\/span>:hover<\/span> {<\/span>\r\n    background-color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n    border-color<\/span>:<\/span> #000<\/span>;<\/span>\r\n    color<\/span>:<\/span> #000<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/<\/span>style<\/span>><\/span>\r\n<\/code><\/pre>\n
            \u5728\u4e2d\u6587\u4e2d\uff0cHeader\u7ec4\u4ef6\u4f7f\u7528router-link-active\u6765\u4e3a\u8df3\u8f6c\u9875\u9762\u5e94\u7528CSS\u7c7b\u3002<\/p>\n
            <<\/span>template<\/span>><\/span>\r\n  <header<\/span> class=<\/span>\"header\"<\/span>><\/span>\r\n    <nav><\/span>\r\n      <ul<\/span> class=<\/span>\"navList\"<\/span>><\/span>\r\n        <li<\/span> class=<\/span>\"navItem\"<\/span>><\/span>\r\n          <router-link<\/span> to=<\/span>\"\/\"<\/span> class=<\/span>\"navLink\"<\/span> exact<\/span>><\/span>\u30c8\u30c3\u30d7<\/router-link><\/span>\r\n        <\/li><\/span>\r\n        <li<\/span> class=<\/span>\"navItem\"<\/span>><\/span>\r\n          <router-link<\/span> to=<\/span>\"\/list\"<\/span> class=<\/span>\"navLink\"<\/span> exact<\/span>><\/span>\u5546\u54c1\u4e00\u89a7<\/router-link><\/span>\r\n        <\/li><\/span>\r\n      <\/ul><\/span>\r\n    <\/nav><\/span>\r\n  <\/header><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>TheHeader<\/span>'<\/span>,<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\r\n<<\/span>style<\/span> lang=<\/span>\"scss\"<\/span> scoped<\/span>><\/span>\r\n.header<\/span>{<\/span>\r\n  padding<\/span>:<\/span> 60px<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.navList<\/span>{<\/span>\r\n  display<\/span>:<\/span> flex<\/span>;<\/span>\r\n  justify-content<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n.navLink<\/span>{<\/span>\r\n  color<\/span>:<\/span> #ccc<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 700<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.navItem<\/span>{<\/span>\r\n  padding<\/span>:<\/span> 0<\/span> 20px<\/span>;<\/span>\r\n  &<\/span>:not<\/span>(<\/span>:first-child<\/span>)<\/span>{<\/span>\r\n    border-left<\/span>:<\/span> 1px<\/span> solid<\/span> #000<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n.router-link-active<\/span>{<\/span>\r\n  color<\/span>:<\/span> #000<\/span>;<\/span>\r\n}<\/span>\r\n<\/<\/span>style<\/span>><\/span>\r\n<\/code><\/pre>\n
            \u5728\u9876\u90e8\u4f7f\u7528 import \u5bfc\u5165\u5171\u901a\u7ec4\u4ef6\u6587\u4ef6\uff0c\u901a\u8fc7 components \u7f16\u5199\u4ee5\u5728 Vue \u6a21\u677f\u4e2d\u4f7f\u7528\u3002<\/p>\n
            <<\/span>template<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"top\"<\/span>><\/span>\r\n    <TheHeader><\/TheHeader><\/span>\r\n    <div<\/span> class=<\/span>\"titleWrap\"<\/span>><\/span>\r\n      <h1<\/span> class=<\/span>\"title\"<\/span>><\/span>\u305d\u308c\u3063\u307d\u3044\u30c8\u30c3\u30d7\u30da\u30fc\u30b8<\/h1><\/span>\r\n      <p<\/span> class=<\/span>\"subTitle\"<\/span>><\/span>KAKKO II EIGO NO TEKISUTO GA HAIRU<\/p><\/span>\r\n      <p<\/span> class=<\/span>\"subTitleBg\"<\/span>><\/span>KAKKO II EIGO<br><\/span>NO TEKISUTO GA HAIRU<\/p><\/span>\r\n    <\/div><\/span>\r\n    <div<\/span> class=<\/span>\"button\"<\/span>><\/span>\r\n      <BaseButton<\/span> text=<\/span>\"\u5546\u54c1\u3092\u898b\u308b\"<\/span> path=<\/span>\"\/list\"<\/span>><\/BaseButton><\/span>\r\n    <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\nimport<\/span> TheHeader<\/span> from<\/span> '<\/span>@\/components\/TheHeader<\/span>'<\/span>\r\nimport<\/span> BaseButton<\/span> from<\/span> '<\/span>@\/components\/BaseButton<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>Top<\/span>'<\/span>,<\/span>\r\n  components<\/span>:<\/span> {<\/span>\r\n    TheHeader<\/span>,<\/span>\r\n    BaseButton<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\r\n<<\/span>style<\/span> lang=<\/span>\"scss\"<\/span> scoped<\/span>><\/span>\r\n.titleWrap<\/span>{<\/span>\r\n  position<\/span>:<\/span> relative<\/span>;<\/span>\r\n  margin-top<\/span>:<\/span> 200px<\/span>;<\/span>\r\n}<\/span>\r\n.title<\/span>{<\/span>\r\n  font-size<\/span>:<\/span> 120px<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 700<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n.subTitle<\/span>{<\/span>\r\n  margin-top<\/span>:<\/span> 30px<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 20px<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n.subTitleBg<\/span>{<\/span>\r\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\r\n  top<\/span>:<\/span> 70px<\/span>;<\/span>\r\n  left<\/span>:<\/span> 50%<\/span>;<\/span>\r\n  z-index<\/span>:<\/span> -1<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 60px<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>.05<\/span>;<\/span>\r\n  color<\/span>:<\/span> #eee<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n  transform<\/span>:<\/span> translateX<\/span>(<\/span>-50%<\/span>);<\/span>\r\n}<\/span>\r\n\r\n.button<\/span>{<\/span>\r\n  width<\/span>:<\/span> 400px<\/span>;<\/span>\r\n  margin<\/span>:<\/span> 150px<\/span> auto<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n<\/<\/span>style<\/span>><\/span>\r\n<\/code><\/pre>\n
            \u5728App\u4e2d\u6dfb\u52a0\u91cd\u7f6eCSS\u540e\uff0c\u9996\u9875\u5b8c\u6210\u4e86\u3002<\/p>\n
            <<\/span>template<\/span>><\/span>\r\n  <div<\/span> id=<\/span>\"app\"<\/span>><\/span>\r\n    <router-view\/><\/span>\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\nimport<\/span> '<\/span>normalize.scss\/normalize.scss<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span>{<\/span>\r\n  name<\/span>:<\/span> '<\/span>App<\/span>'<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\r\n<<\/span>style<\/span>><\/span>\r\nbody<\/span> {<\/span>\r\n  font-family<\/span>:<\/span> YuGothic<\/span>,<\/span>'Yu Gothic'<\/span>,<\/span>'Hiragino Kaku Gothic ProN'<\/span>,<\/span>'\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 ProN W3'<\/span>,<\/span>'\u30e1\u30a4\u30ea\u30aa'<\/span>,<\/span> Meiryo<\/span>,<\/span>'\uff2d\uff33 \u30b4\u30b7\u30c3\u30af'<\/span>,<\/span>sans-serif<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 400<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 12px<\/span>;<\/span>\r\n  height<\/span>:<\/span> 100%<\/span>;<\/span>\r\n  background<\/span>:<\/span> #FCFCFC<\/span>;<\/span>\r\n}<\/span>\r\nh1<\/span>,<\/span> p<\/span>,<\/span> ul<\/span>{<\/span>\r\n  margin<\/span>:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\nul<\/span>{<\/span>\r\n  list-style-type<\/span>:<\/span> none<\/span>;<\/span>\r\n  padding-left<\/span>:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\na<\/span>{<\/span>\r\n  text-decoration<\/span>:<\/span> none<\/span>;<\/span>\r\n}<\/span>\r\n<\/<\/span>style<\/span>><\/span>\r\n<\/code><\/pre>\n
            \u5728Angular\u7684\u60c5\u51b5\u4e0b<\/h2>\n
            \u5728Angular\u4e2d\uff0c\u867d\u7136\u51e0\u4e4e\u662f\u76f8\u4f3c\u7684\uff0c\u4f46\u4e3a\u4e86\u65b9\u4fbf\u4f7f\u7528\u5171\u4eab\u6587\u4ef6\uff0c\u6211\u60f3\u521b\u5efa\u4e00\u4e2ashared\u6587\u4ef6\u5939\u6765\u7ba1\u7406\u7ec4\u4ef6\u3002<\/p>\n
            \u9996\u5148\uff0c\u4f7f\u7528cli\u547d\u4ee4\u521b\u5efa\u7528\u4e8e\u7ba1\u7406\u7684\u6587\u4ef6\u5939\u3002<\/p>\n
            ng generate module shared #<\/span> \u7701\u7565\u5f62\u306fng g m shared\r\n<\/code><\/pre>\n
            \u751f\u6210\u7684\u6587\u4ef6<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>\r\n  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> SharedModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
            \u672c\u6b21\u5c06\u7ec4\u4ef6\u6587\u4ef6\u4f5c\u4e3a\u5171\u4eab\u6587\u4ef6\u8fdb\u884c\u7ba1\u7406\uff0c
            \n\u8003\u8651\u5c06\u6765\u53ef\u80fd\u8fd8\u4f1a\u5c06\u5176\u4ed6\u529f\u80fd\u8fdb\u884c\u5171\u4eab\u5316\uff0c
            \n\u56e0\u6b64\u521b\u5efa\u4e00\u4e2ashare\/component\u6587\u4ef6\u5939\uff0c\u4ee5\u4fbf\u66f4\u65b9\u4fbf\u5730\u8fdb\u884c\u7ba1\u7406\u3002<\/p>\n
            ng generate module shared\/component\r\n<\/span><\/code><\/pre>\n
            \u751f\u6210\u7684\u6587\u4ef6<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>\r\n  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ComponentModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
            \u521b\u5efa\u6587\u4ef6\u540e, \u6309\u7167 App \u6a21\u5757\u2190 shared \u6a21\u5757\u2190 shared\/compoent \u6a21\u5757\u7684\u987a\u5e8f\u5c06\u5b83\u4eec\u8fde\u63a5\u5728\u4e00\u8d77, \u4ee5\u4fbf\u5728 App \u7ec4\u4ef6\u4e2d\u4f7f\u7528.<\/p>\n
            \u6700\u521d\uff0c\u5c06shared\u6a21\u5757\u6587\u4ef6\u4e0eapp\u6a21\u5757\u5173\u8054\u8d77\u6765\u3002
            \n\u5173\u8054\u6a21\u5757\u6587\u4ef6\u662f\u901a\u8fc7\u5c06\u5176\u8f7d\u5165\u5230imports: []\u4e2d\u5b9e\u73b0\u7684\u3002<\/p>\n
            import<\/span> {<\/span> BrowserModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/platform-browser<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> AppRoutingModule<\/span> }<\/span> from<\/span> '<\/span>.\/app-routing.module<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> AppComponent<\/span> }<\/span> from<\/span> '<\/span>.\/app.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> TopComponent<\/span> }<\/span> from<\/span> '<\/span>.\/top\/top.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ListComponent<\/span> }<\/span> from<\/span> '<\/span>.\/list\/list.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> DetailComponent<\/span> }<\/span> from<\/span> '<\/span>.\/detail\/detail.component<\/span>'<\/span>;<\/span>\r\n+<\/span> import<\/span> {<\/span> SharedModule<\/span> }<\/span> from<\/span> '<\/span>.\/shared\/shared.module<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    AppComponent<\/span>,<\/span>\r\n    TopComponent<\/span>,<\/span>\r\n    ListComponent<\/span>,<\/span>\r\n    DetailComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    BrowserModule<\/span>,<\/span>\r\n    AppRoutingModule<\/span>,<\/span>\r\n+<\/span>    SharedModule<\/span>\r\n  ],<\/span>\r\n  bootstrap<\/span>:<\/span> [<\/span>AppComponent<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> AppModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
            \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u5728shared\u6a21\u5757\u4e2d\u52a0\u8f7dshared\/component\u6a21\u5757\u3002<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ComponentModule<\/span> }<\/span> from<\/span> '<\/span>.\/component\/component.module<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>,<\/span>\r\n+<\/span>    ComponentModule<\/span>\r\n  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> SharedModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
            \u4e0b\u9762\u662f\u4e00\u4e2a\u53ef\u80fd\u7684\u4e2d\u6587\u7ffb\u8bd1\u9009\u9879\uff1a<\/p>\n
            \u5728\u67d0\u4e9b\u7279\u6b8a\u60c5\u51b5\u4e0b\uff0c\u5f53\u5728\u5916\u90e8\u7c7b\u4f3c\u4e8eapp\u6a21\u5757\u7684\u5730\u65b9\u4f7f\u7528\u5df2\u52a0\u8f7d\u7684\u6a21\u5757\u65f6\uff0c\u9700\u8981\u5728exports:[]\u4e2d\u5199\u4e0b\u6240\u4f7f\u7528\u7684\u5916\u90e8\u6a21\u5757\u6587\u4ef6\u3002\u56e0\u6b64\uff0c\u9700\u8981\u5728exports\u4e2d\u9010\u6b65\u8bb0\u5f55shared\/component\u6a21\u5757\u3002<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ComponentModule<\/span> }<\/span> from<\/span> '<\/span>.\/component\/component.module<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>,<\/span>\r\n    ComponentModule<\/span>\r\n  ],<\/span>\r\n+<\/span>  exports<\/span>:<\/span> [<\/span>\r\n+<\/span>    ComponentModule<\/span>\r\n+<\/span>  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> SharedModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
            \u8fd9\u6837\u5c31\u5b8c\u6210\u4e86\u5171\u4eab\u6587\u4ef6\u5939\u7684\u521b\u5efa\u3002<\/p>\n
            \u63a5\u4e0b\u6765\uff0c\u4f7f\u7528cli\u547d\u4ee4\u521b\u5efa\u6309\u94ae\u7ec4\u4ef6\u548c\u5934\u90e8\u7ec4\u4ef6\u7684\u6587\u4ef6\u3002<\/p>\n
            ng generate component shared\/component\/button #<\/span> \u7701\u7565\u5f62\u306fng g c shared\/component\/button\r\n<\/code><\/pre>\n
            ng g c shared\/component\/header\r\n<\/span><\/code><\/pre>\n
            \u5f53\u547d\u4ee4\u6210\u529f\u6267\u884c\u65f6\uff0c\u5c06\u4f1a\u751f\u6210ts\u3001html\u548cscss\u6587\u4ef6\u3002<\/p>\n
            import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-button<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/button.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/button.component.scss<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ButtonComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n<\/code><\/pre>\n
            import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-header<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/header.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/header.component.scss<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> HeaderComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5f53\u6210\u529f\u751f\u6210\u6587\u4ef6\u540e\uff0c\u53ef\u4ee5\u786e\u8ba4\u81ea\u52a8\u52a0\u8f7d\u4e86\u7ec4\u4ef6\u5230\u7236\u6a21\u5757\u6587\u4ef6\u7684\u58f0\u660e\u4e2d<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ButtonComponent<\/span> }<\/span> from<\/span> '<\/span>.\/button\/button.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HeaderComponent<\/span> }<\/span> from<\/span> '<\/span>.\/header\/header.component<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n+<\/span>  declarations<\/span>:<\/span> [<\/span>ButtonComponent<\/span>,<\/span> HeaderComponent<\/span>],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>\r\n  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ComponentModule<\/span> {<\/span> }<\/span>\r\n<\/code><\/pre>\n
            \u7136\u800c\uff0c\u5982\u679c\u4fdd\u6301\u73b0\u72b6\uff0c\u65e0\u6cd5\u5728\u5171\u4eab\u6a21\u5757\u4e2d\u8c03\u7528\uff0c\u56e0\u6b64\u9700\u8981\u6dfb\u52a0\u5bfc\u51fa\u547d\u4ee4\u3002<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ButtonComponent<\/span> }<\/span> from<\/span> '<\/span>.\/button\/button.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HeaderComponent<\/span> }<\/span> from<\/span> '<\/span>.\/header\/header.component<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    ButtonComponent<\/span>,<\/span>\r\n    HeaderComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>\r\n  ],<\/span>\r\n+<\/span>  exports<\/span>:<\/span> [<\/span>\r\n+<\/span>    ButtonComponent<\/span>,<\/span>\r\n+<\/span>    HeaderComponent<\/span>\r\n+<\/span>  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ComponentModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
            \u4ece shared \u6a21\u5757\u4e2d\u6b63\u786e\u52a0\u8f7d\u4e86 button \u7ec4\u4ef6\u548c header \u7ec4\u4ef6\u5417\uff1f\u5c1d\u8bd5\u4ece top \u7ec4\u4ef6\u4e2d\u8c03\u7528\u5e76\u8fdb\u884c\u786e\u8ba4\u3002<\/p>\n
            <app-header><\/app-header><\/span>\r\n<app-button><\/app-button><\/span>\r\n<\/code><\/pre>\n
            \u5982\u679c\u5728\u6a21\u677f\u4e2d\u5d4c\u5165\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u4f7f\u7528\u7ec4\u4ef6\u6587\u4ef6\u4e2d\u6307\u5b9a\u7684\u9009\u62e9\u5668\u540d\u79f0\u8fdb\u884c\u8c03\u7528\u3002<\/p>\n
            \n
            \u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2abutton\u7ec4\u4ef6\u3002<\/p>\n
            import<\/span> {<\/span> NgModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CommonModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/common<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ButtonComponent<\/span> }<\/span> from<\/span> '<\/span>.\/button\/button.component<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> HeaderComponent<\/span> }<\/span> from<\/span> '<\/span>.\/header\/header.component<\/span>'<\/span>;<\/span>\r\n+<\/span> import<\/span> {<\/span> RouterModule<\/span> }<\/span> from<\/span> '<\/span>@angular\/router<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>NgModule<\/span>({<\/span>\r\n  declarations<\/span>:<\/span> [<\/span>\r\n    ButtonComponent<\/span>,<\/span>\r\n    HeaderComponent<\/span>\r\n  ],<\/span>\r\n  imports<\/span>:<\/span> [<\/span>\r\n    CommonModule<\/span>,<\/span>\r\n+<\/span>    RouterModule<\/span>\r\n  ],<\/span>\r\n  exports<\/span>:<\/span> [<\/span>\r\n    ButtonComponent<\/span>,<\/span>\r\n    HeaderComponent<\/span>\r\n  ]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ComponentModule<\/span> {<\/span> }<\/span>\r\n\r\n<\/code><\/pre>\n
            \u5982\u679c\u60f3\u8981\u4f7f\u7528Vue\u4e2d\u7684\u6807\u7b7e\u8fdb\u884c\u9875\u9762\u8df3\u8f6c\uff0c\u53ea\u9700\u6dfb\u52a0\u6807\u7b7e\u5373\u53ef\u4f7f\u7528\uff0c\u5e76\u65e0\u7279\u6b8a\u9700\u6c42\u3002<\/p>\n
            \u5728Angular\u4e2d\uff0c\u9700\u8981\u5728module\u6587\u4ef6\u4e2d\u52a0\u8f7dRouterModule\u6a21\u5757\u3002<\/p>\n
            RouterModule\u4e0d\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684\u6a21\u5757\uff0c\u800c\u662f\u4e00\u4e2a\u5728\u6846\u67b6\u4e2d\u9884\u5148\u63d0\u4f9b\u7684\u6a21\u5757\u6587\u4ef6\u3002<\/p>\n
            <a<\/span> [routerLink]=<\/span>\"path\"<\/span> class=<\/span>\"button\"<\/span>><\/span>{{ text }}<\/a><\/span>\r\n<\/code><\/pre>\n
            \u5982\u679c\u52a0\u8f7d\u4e86module\u6587\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7routerLink=”\u6587\u4ef6\u8def\u5f84”\u6765\u6307\u5b9a\u5bfc\u822a\u76ee\u6807\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u6211\u60f3\u6dfb\u52a0\u53d8\u91cf\u800c\u4e0d\u662f\u5b57\u7b26\u4e32\uff0c\u6240\u4ee5\u6211\u901a\u8fc7[routerLink]=”\u53d8\u91cf\u540d\u5305\u542b\u6587\u4ef6\u8def\u5f84”\u7684\u5f62\u5f0f\u8fdb\u884c\u6570\u636e\u7ed1\u5b9a\u3002<\/p>\n
            .button<\/span>{<\/span>\r\n  display<\/span>:<\/span> block<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 22px<\/span>;<\/span>\r\n  width<\/span>:<\/span> 400px<\/span>;<\/span>\r\n  height<\/span>:<\/span> 70px<\/span>;<\/span>\r\n  padding<\/span>:<\/span> 25px<\/span>;<\/span>\r\n  box-sizing<\/span>:<\/span> border-box<\/span>;<\/span>\r\n  color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n  background<\/span>:<\/span> #000<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 700<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>;<\/span>\r\n  transition<\/span>:<\/span> all<\/span> .3s<\/span> ease<\/span>;<\/span>\r\n  border<\/span>:<\/span> 1px<\/span> solid<\/span> transparent<\/span>;<\/span>\r\n  &<\/span>:hover<\/span> {<\/span>\r\n    background-color<\/span>:<\/span> #fff<\/span>;<\/span>\r\n    border-color<\/span>:<\/span> #000<\/span>;<\/span>\r\n    color<\/span>:<\/span> #000<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5bf9\u4e8escss\u7684\u8be6\u7ec6\u8bf4\u660e\u5c06\u88ab\u7701\u7565\u3002<\/p>\n
            +<\/span> import<\/span> {<\/span> Component<\/span>,<\/span> OnInit<\/span>,<\/span> Input<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\n@<\/span>Component<\/span>({<\/span>\r\n  selector<\/span>:<\/span> '<\/span>app-button<\/span>'<\/span>,<\/span>\r\n  templateUrl<\/span>:<\/span> '<\/span>.\/button.component.html<\/span>'<\/span>,<\/span>\r\n  styleUrls<\/span>:<\/span> [<\/span>'<\/span>.\/button.component.scss<\/span>'<\/span>]<\/span>\r\n})<\/span>\r\nexport<\/span> class<\/span> ButtonComponent<\/span> implements<\/span> OnInit<\/span> {<\/span>\r\n  \/** Vue\u3067\u8a00\u3046\u6240\u306eprops\u306b\u8a72\u5f53\u3059\u308b\u3082\u306e\r\n   * @param text button\u306b\u8868\u793a\u3055\u305b\u308b\u6587\u5b57\u5217\r\n   * @param path \u9077\u79fb\u5148\u306eURL\u306e\u30d1\u30b9\r\n  *\/<\/span>\r\n+<\/span>  @<\/span>Input<\/span>()<\/span> text<\/span>:<\/span> string<\/span>;<\/span>\r\n+<\/span>  @<\/span>Input<\/span>()<\/span> path<\/span>:<\/span> string<\/span>;<\/span>\r\n\r\n  constructor<\/span>()<\/span> {<\/span> }<\/span>\r\n\r\n  ngOnInit<\/span>()<\/span> {<\/span>\r\n  }<\/span>\r\n\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5728Vue\u4e2d\uff0c\u901a\u8fc7\u4f7f\u7528props\uff0c\u53ef\u4ee5\u4ece\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e\u3002
            \n\u5728Angular\u4e2d\uff0c\u901a\u8fc7\u4f7f\u7528Input\uff0c\u53ef\u4ee5\u4f20\u9012\u548c\u63a5\u6536\u6570\u636e\u3002<\/p>\n
            import<\/span> {<\/span> Input<\/span> }<\/span> from<\/span> '<\/span>@angular\/core<\/span>'<\/span>;<\/span>\r\n\r\nclass<\/span> Hoge<\/span> {<\/span>\r\n  @<\/span>Input<\/span>()<\/span> val<\/span>:<\/span> type<\/span>;<\/span> \/\/ @Input() \u5909\u6570: \u578b\u306e\u540d\u524d<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u4e0b\u4e00\u6b65\uff0c\u521b\u5efaheader\u7ec4\u4ef6\u3002<\/p>\n
            <header<\/span> class=<\/span>\"header\"<\/span>><\/span>\r\n  <nav><\/span>\r\n    <ul<\/span> class=<\/span>\"navList\"<\/span>><\/span>\r\n      <li<\/span> class=<\/span>\"navItem\"<\/span>><\/span>\r\n        <a<\/span> routerLink=<\/span>\"\/\"<\/span> class=<\/span>\"navLink\"<\/span> routerLinkActive=<\/span>\"router-link-active\"<\/span> [routerLinkActiveOptions]=<\/span>\"{exact: true}\"<\/span>><\/span>\u30c8\u30c3\u30d7<\/a><\/span>\r\n      <\/li><\/span>\r\n      <li<\/span> class=<\/span>\"navItem\"<\/span>><\/span>\r\n        <a<\/span> routerLink=<\/span>\"\/list\"<\/span> class=<\/span>\"navLink\"<\/span> routerLinkActive=<\/span>\"router-link-active\"<\/span> [routerLinkActiveOptions]=<\/span>\"{exact: true}\"<\/span>><\/span>\u5546\u54c1\u4e00\u89a7<\/a><\/span>\r\n      <\/li><\/span>\r\n    <\/ul><\/span>\r\n  <\/nav><\/span>\r\n<\/header><\/span>\r\n<\/code><\/pre>\n
            \u4e0e\u4e4b\u524d\u7684button\u7ec4\u4ef6\u4e0d\u540c\uff0crouterLink\u9700\u8981\u653e\u5165\u4e00\u4e2a\u5b57\u7b26\u4e32\u3002<\/p>\n
            routerLinkActive\u662f\u4e00\u4e2a\u80fd\u591f\u5728\u8def\u7531\u5668\u94fe\u63a5\u5230\u6307\u5b9a\u4f4d\u7f6e\u65f6\u4f20\u9012class\u7684\u529f\u80fd\u3002\u5728routerLinkActive\u4e2d\u6307\u5b9aclass\uff0c\u53ef\u4ee5\u4f7f\u6307\u5b9a\u7684class\u5728\u6d3b\u52a8\u65f6\u751f\u6548\u3002<\/p>\n
            [routerLinkActiveOptions]=\"{exact: true}\"\r\n<\/code><\/pre>\n
            \u5982\u679c\u4e0a\u8ff0\u4ee3\u7801\u7684\u76ee\u6807\u8def\u5f84\u6b63\u786e\uff0c\u5b83\u5c06\u88ab\u8bbe\u5b9a\u4e3a\u6fc0\u6d3b\u72b6\u6001\u3002<\/p>\n
            \u53ea\u9700\u5199\u5165 SCSS\u3002<\/p>\n
            .header<\/span>{<\/span>\r\n  padding<\/span>:<\/span> 60px<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.navList<\/span>{<\/span>\r\n  display<\/span>:<\/span> flex<\/span>;<\/span>\r\n  justify-content<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n.navLink<\/span>{<\/span>\r\n  color<\/span>:<\/span> #ccc<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 700<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>;<\/span>\r\n}<\/span>\r\n\r\n.navItem<\/span>{<\/span>\r\n  padding<\/span>:<\/span> 0<\/span> 20px<\/span>;<\/span>\r\n  &<\/span>:not<\/span>(<\/span>:first-child<\/span>)<\/span>{<\/span>\r\n    border-left<\/span>:<\/span> 1px<\/span> solid<\/span> #000<\/span>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n.router-link-active<\/span>{<\/span>\r\n  color<\/span>:<\/span> #000<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            @import<\/span> '~normalize.scss'<\/span>;<\/span>\r\n\r\nbody<\/span> {<\/span>\r\n  font-family<\/span>:<\/span> YuGothic<\/span>,<\/span>'Yu Gothic'<\/span>,<\/span>'Hiragino Kaku Gothic ProN'<\/span>,<\/span>'\u30d2\u30e9\u30ae\u30ce\u89d2\u30b4 ProN W3'<\/span>,<\/span>'\u30e1\u30a4\u30ea\u30aa'<\/span>,<\/span> Meiryo<\/span>,<\/span>'\uff2d\uff33 \u30b4\u30b7\u30c3\u30af'<\/span>,<\/span>sans-serif<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 400<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 12px<\/span>;<\/span>\r\n  height<\/span>:<\/span> 100%<\/span>;<\/span>\r\n  background<\/span>:<\/span> #FCFCFC<\/span>;<\/span>\r\n}<\/span>\r\nh1<\/span>,<\/span> p<\/span>,<\/span> ul<\/span>{<\/span>\r\n  margin<\/span>:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\nul<\/span>{<\/span>\r\n  list-style-type<\/span>:<\/span> none<\/span>;<\/span>\r\n  padding-left<\/span>:<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\na<\/span>{<\/span>\r\n  text-decoration<\/span>:<\/span> none<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u4e0b\u4e00\u6b65\u662f\u521b\u5efa\u9996\u9875\u3002
            \n\u901a\u8fc7\u7236\u7ec4\u4ef6\u5411\u4f20\u9012\u6570\u636e\u3002<\/p>\n
            <div<\/span> class=<\/span>\"top\"<\/span>><\/span>\r\n  <app-header><\/app-header><\/span>\r\n  <div<\/span> class=<\/span>\"titleWrap\"<\/span>><\/span>\r\n    <h1<\/span> class=<\/span>\"title\"<\/span>><\/span>\u305d\u308c\u3063\u307d\u3044\u30c8\u30c3\u30d7\u30da\u30fc\u30b8<\/h1><\/span>\r\n    <p<\/span> class=<\/span>\"subTitle\"<\/span>><\/span>KAKKO II EIGO NO TEKISUTO GA HAIRU<\/p><\/span>\r\n    <p<\/span> class=<\/span>\"subTitleBg\"<\/span>><\/span>KAKKO II EIGO<br><\/span>NO TEKISUTO GA HAIRU<\/p><\/span>\r\n  <\/div><\/span>\r\n  <div<\/span> class=<\/span>\"button\"<\/span>><\/span>\r\n    <app-button<\/span> text=<\/span>\"\u5546\u54c1\u3092\u898b\u308b\"<\/span> path=<\/span>\"\/list\"<\/span>><\/app-button><\/span>\r\n  <\/div><\/span>\r\n<\/div><\/span>\r\n<\/code><\/pre>\n
            \u8bf7\u5199\u4e0a\u7528\u4e8e\u9876\u90e8\u5e03\u5c40\u7684css\u6837\u5f0f<\/p>\n
            .titleWrap<\/span>{<\/span>\r\n  position<\/span>:<\/span> relative<\/span>;<\/span>\r\n  margin-top<\/span>:<\/span> 200px<\/span>;<\/span>\r\n}<\/span>\r\n.title<\/span>{<\/span>\r\n  font-size<\/span>:<\/span> 120px<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>;<\/span>\r\n  font-weight<\/span>:<\/span> 700<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n.subTitle<\/span>{<\/span>\r\n  margin-top<\/span>:<\/span> 30px<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 20px<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n}<\/span>\r\n.subTitleBg<\/span>{<\/span>\r\n  position<\/span>:<\/span> absolute<\/span>;<\/span>\r\n  top<\/span>:<\/span> 70px<\/span>;<\/span>\r\n  left<\/span>:<\/span> 50%<\/span>;<\/span>\r\n  z-index<\/span>:<\/span> -1<\/span>;<\/span>\r\n  font-size<\/span>:<\/span> 60px<\/span>;<\/span>\r\n  line-height<\/span>:<\/span> 1<\/span>.05<\/span>;<\/span>\r\n  color<\/span>:<\/span> #eee<\/span>;<\/span>\r\n  text-align<\/span>:<\/span> center<\/span>;<\/span>\r\n  transform<\/span>:<\/span> translateX<\/span>(<\/span>-50%<\/span>);<\/span>\r\n}<\/span>\r\n\r\n.button<\/span>{<\/span>\r\n  width<\/span>:<\/span> 400px<\/span>;<\/span>\r\n  margin<\/span>:<\/span> 150px<\/span> auto<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            Angular\u7684\u4e3b\u9875\u5df2\u5b8c\u6210\u3002<\/p>\n
            \u603b\u7ed3<\/h1>\n
            \u7f16\u5199\u6e90\u4ee3\u7801\u540e\uff0c\u53d1\u73b0\u4f5c\u4e3a\u6587\u7ae0\u53d8\u5f97\u975e\u5e38\u957f\u3002
            \n\u5f53\u6211\u4eec\u5728\u4ee3\u7801\u7ea7\u522b\u4e0a\u6bd4\u8f83SPA\u6846\u67b6\u65f6\uff0c\u6211\u4eec\u53d1\u73b0\u5b83\u4eec\u5177\u6709\u76f8\u540c\u7684\u529f\u80fd\u3002<\/p>\n
            \u4e5f\u8bb8\u662f\u56e0\u4e3aVue\u7684\u521b\u4f5c\u8005\u5c24\u96e8\u6eaa\u5148\u751f\u53c2\u4e0e\u4e86AngularJS\u7684\u5f00\u53d1\uff0c\u6240\u4ee5\u8fd9\u4e24\u8005\u7684\u673a\u5236\u53ef\u80fd\u76f8\u4f3c\u3002<\/p>\n
            \u6211\u60f3\u5728\u4e0b\u4e00\u7ae0\u4e2d\u521b\u5efa\u5546\u54c1\u5217\u8868\u9875\u9762\u548c\u8be6\u7ec6\u9875\u9762\u3002<\/p>\n
            \u5e0c\u671b\u8fd9\u6210\u4e3a\u6700\u540e\u4e00\u7ae0\u3002<\/p>\n
            \u5728\u5b66\u4e60Angular\u7684\u5b9e\u9645\u5e94\u7528\u4e2d\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 – \u5b9e\u65bd\u7bc7- \u7b2c4\u90e8\u5206\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
            \u7ee7\u524d\u4e00\u7bc7\u6587\u7ae0\uff0c\u5b66\u4e60Angular\u4e0eVue.js\u7684\u6bd4\u8f83 – \u914d\u7f6e\u7bc7 – \u7b2c2\u90e8\u5206 \u6211\u6253\u7b97 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-39516","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 - \u5b9e\u73b0\u90e8\u5206 - \u7b2c\u4e09\u90e8\u5206 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60angular\u5e76\u4e0evue-js\u8fdb\u884c\u6bd4\u8f83-\u5b9e\u73b0\u90e8\u5206-\u7b2c\u4e09\u90e8\u5206\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 - \u5b9e\u73b0\u90e8\u5206 - \u7b2c\u4e09\u90e8\u5206\" \/>\n<meta property=\"og:description\" content=\"\u7ee7\u524d\u4e00\u7bc7\u6587\u7ae0\uff0c\u5b66\u4e60Angular\u4e0eVue.js\u7684\u6bd4\u8f83 – \u914d\u7f6e\u7bc7 – \u7b2c2\u90e8\u5206 \u6211\u6253\u7b97 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60angular\u5e76\u4e0evue-js\u8fdb\u884c\u6bd4\u8f83-\u5b9e\u73b0\u90e8\u5206-\u7b2c\u4e09\u90e8\u5206\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-08T17:15:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T15:48:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b1237434c4406c80282\/6-0.png\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/\",\"name\":\"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 - \u5b9e\u73b0\u90e8\u5206 - \u7b2c\u4e09\u90e8\u5206 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-01-08T17:15:08+00:00\",\"dateModified\":\"2024-04-29T15:48:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 – \u5b9e\u73b0\u90e8\u5206 – \u7b2c\u4e09\u90e8\u5206\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 - \u5b9e\u73b0\u90e8\u5206 - \u7b2c\u4e09\u90e8\u5206 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60angular\u5e76\u4e0evue-js\u8fdb\u884c\u6bd4\u8f83-\u5b9e\u73b0\u90e8\u5206-\u7b2c\u4e09\u90e8\u5206\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 - \u5b9e\u73b0\u90e8\u5206 - \u7b2c\u4e09\u90e8\u5206","og_description":"\u7ee7\u524d\u4e00\u7bc7\u6587\u7ae0\uff0c\u5b66\u4e60Angular\u4e0eVue.js\u7684\u6bd4\u8f83 – \u914d\u7f6e\u7bc7 – \u7b2c2\u90e8\u5206 \u6211\u6253\u7b97 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5b66\u4e60angular\u5e76\u4e0evue-js\u8fdb\u884c\u6bd4\u8f83-\u5b9e\u73b0\u90e8\u5206-\u7b2c\u4e09\u90e8\u5206\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-01-08T17:15:08+00:00","article_modified_time":"2024-04-29T15:48:28+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d3b1237434c4406c80282\/6-0.png"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/","name":"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 - \u5b9e\u73b0\u90e8\u5206 - \u7b2c\u4e09\u90e8\u5206 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-01-08T17:15:08+00:00","dateModified":"2024-04-29T15:48:28+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5b66\u4e60Angular\u5e76\u4e0eVue.js\u8fdb\u884c\u6bd4\u8f83 – \u5b9e\u73b0\u90e8\u5206 – \u7b2c\u4e09\u90e8\u5206"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%ad%a6%e4%b9%a0angular%e5%b9%b6%e4%b8%8evue-js%e8%bf%9b%e8%a1%8c%e6%af%94%e8%be%83-%e5%ae%9e%e7%8e%b0%e9%83%a8%e5%88%86-%e7%ac%ac%e4%b8%89%e9%83%a8%e5%88%86\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=39516"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39516\/revisions"}],"predecessor-version":[{"id":88385,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/39516\/revisions\/88385"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=39516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=39516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=39516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}