angular 6 學習一: 搭建angular環境

1.安裝node.js

 下載node.js從在網址:https://nodejs.org, 我用的版本是v10.16.3.

進入: https://nodejs.org/dist/ 可以找到所有的版本。

2. npm作爲默認隨node.js安裝

3.安裝指定版本的Angular cli

>npm i -g @angular/[email protected]

>npm install -g @angular/[email protected]

a. 卸載當前的angula cli, 並清除緩存

    >npm install -g @angular/cli

   >npm cache clean

4.可以創建angular項目了:

a.>ng new blueprj

a.1>cd blueprj

b.>ng g component admtech

c.>ng g service CartService

d>ng serve --open 

The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

5.安裝bootstrap的幾個命令

在工程目錄下執行, bootstrap的包被安裝的blueprj\node_modules下

\blueprj>npm i [email protected] -s

>npm i bootstrap --save
>npm i @types/bootstrap --save-dev

Angular6的命令行工具配置文件從angular-cli.json更名爲angular.json,且路徑變更

在.angular-cli.json文件中的apps下的styles和scripts裏分別寫入:

 "../node_modules/[email protected]@bootstrap/dist/css/bootstrap.min.css",                    
 "../node_modules/[email protected]@jquery/dist/jquery.js",
 "../node_modules/[email protected]@bootstrap/dist/js/bootstrap.min.js"
 
 
 
 // 調整前
"styles":[
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
]

 

// 調整後
"styles":[
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts":[
    "node_modules/jquery/dist/jquery.js",
    "node_modules/bootstrap/dist/js/bootstrap.js"
]

6. 引入指定版本的jquery

>npm i [email protected] -- save>

>npm i @types/jquery --save-dev

7. 當下載的anguar工程只包含src時, 可以用在工程根目錄下用以下命令安裝所有需要的包:

angular6login>npm install

安裝後, 需要的包被放在 node_modules目錄下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章