zoukankan      html  css  js  c++  java
  • angular 项目创建打包过程

    1.安装node
      node下载地址:https://nodejs.org/zh-cn/download/
      node安装会默认装好npm
      检验node,npm安装成功否
      node -v
      npm -v
    2.安装淘宝镜像(cnpm)
      npm install cnpm -g --registry=https://registry.npm.taobao.org
      检验cnpm安装成功否
      cnpm -v
    3.安装脚手架
      npm install -g @angular/cli
    4.创建项目
          1).npm创建项目ng new myProject   //myProject是项目名称,自定义就行
          2).有时候上边方法还好,有时候会慢到你怀疑人生,可以用第二种。cnpm安装
            ng new myProject --skip-install  // 先跳过npm安装
            cd myProject
           cnpm install  
    5.启动 ng serve   

        启动成功浏览器访问localhost:4200就可以
    6.打包
       ng build
       生成一个dist文件夹,里面就是打包的文件
    打包注意:
         1).index.html里面 <base href="/">改成 <base href="./">

      app.module.ts文件里导入HashLocationStrategy和LocationStrategy

      导入方法:import {HashLocationStrategy, LocationStrategy} from '@angular/common';

      providers: [
          {provide: LocationStrategy, useClass: HashLocationStrategy}
       ]

      不改打包出来文件路径不对
         2).assets里面的静态文件直接 "assets/logn-1.png"访问就行
         eg:<img src="assets/logn-1.png" />
         "../"方式访问路径打包出来找不到路径
         eg:<img src="../../assets/logn-1.png" />

    常用于新建的指令
      ng g class classname // 新建 class
      ng g component componentname // 新建组件
      ng g directive directivename // 新建指令
      ng g enum enumname // 新建枚举
      ng g module modulename // 新建模块
      ng g pipe pipename // 新建管道
      ng g service servicename // 新建服务

  • 相关阅读:
    12.4案例分析:NASAECS项目
    第12章 CBAM:构架设计决策制定的定量方法
    11.4 Nightingale系统:应用ATAM的案例分析
    第11章 ATAM:一种进行构架评估的综合方法
    第Ⅲ部分 分析构架
    第10章 软件构架重构
    9.5跨视图的文档
    第9章 构架编档
    基于Spring MVC的Web应用开发(三)
    Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/12303997.html
Copyright © 2011-2022 走看看