司徒玦 發表於 2019-6-5 13:30:00

angular 项目创建打包过程

<p>1.安装node<br>  node下载地址:https://nodejs.org/zh-cn/download/<br>  node安装会默认装好npm<br>  检验node,npm安装成功否<br>  node -v<br>  npm -v<br>2.安装淘宝镜像(cnpm)<br>  npm install cnpm -g --registry=https://registry.npm.taobao.org<br>  检验cnpm安装成功否<br>  cnpm -v<br>3.安装脚手架<br>  npm install -g @angular/cli<br>4.创建项目<br>&nbsp; &nbsp; &nbsp; 1).npm创建项目ng new myProject&nbsp;&nbsp; //myProject是项目名称,自定义就行<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2).有时候上边方法还好,有时候会慢到你怀疑人生,可以用第二种。cnpm安装<br>&nbsp; &nbsp;&nbsp;   &nbsp;ng new myProject --skip-install&nbsp; // 先跳过npm安装<br>&nbsp;&nbsp; &nbsp;&nbsp;   cd myProject<br>&nbsp;&nbsp;&nbsp;   &nbsp;cnpm install &nbsp;<br>5.启动 ng serve &nbsp;&nbsp;</p>
<p>&nbsp; &nbsp; 启动成功浏览器访问localhost:4200就可以<br>6.打包<br> &nbsp; ng build<br>&nbsp;  生成一个dist文件夹,里面就是打包的文件<br>打包注意:<br>&nbsp;&nbsp;&nbsp;&nbsp; 1).index.html里面 &lt;base href="/"&gt;改成 &lt;base href="./"&gt;</p>
<p>  app.module.ts文件里导入HashLocationStrategy和LocationStrategy</p>
<p>  导入方法:import {HashLocationStrategy, LocationStrategy} from '@angular/common';</p>
<p>  providers: [<br>&nbsp;     {provide: LocationStrategy, useClass: HashLocationStrategy}<br>&nbsp;  ]</p>
<p>  不改打包出来文件路径不对<br>&nbsp;&nbsp;&nbsp;&nbsp; 2).assets里面的静态文件直接 "assets/logn-1.png"访问就行<br>&nbsp; &nbsp;&nbsp; eg:&lt;img src="assets/logn-1.png" /&gt;<br>&nbsp; &nbsp;&nbsp; "../"方式访问路径打包出来找不到路径<br>&nbsp; &nbsp;&nbsp; eg:&lt;img src="../../assets/logn-1.png" /&gt;</p>
<p>常用于新建的指令<br>  ng g class classname // 新建 class<br>  ng g component componentname // 新建组件<br>  ng g directive directivename // 新建指令<br>  ng g enum enumname // 新建枚举<br>  ng g module modulename // 新建模块<br>  ng g pipe pipename // 新建管道<br>  ng g service servicename // 新建服务<br><br></p>

</div>
<div id="MySignature" role="contentinfo">
    我不生产代码,只是代码的搬运工<br><br>
来源:https://www.cnblogs.com/zyb-722/p/10979073.html
頁: [1]
查看完整版本: angular 项目创建打包过程