vscode导入基于Angular框架的项目以及环境搭建

1. 安装node.js

在官网找到最新版本下载 :
官网地址:https://nodejs.org/en/
安装成功后,打开vscode,打开终端,在终端里输入命令“node -v ”查看版本 号,如果显示安装版本号则安装成功

2. 安装yarn

Yarn提供了丰富的命令使你可以对Yarn包进行许多操作,包括安装、管理、发布等。
上官网,选择稳定版下载:
官网地址:https://yarnpkg.com/zh-Hans/
安装成功后,在终端里输入命令“yarn -v”查看版本号,如果显示安装版本号则安装成功。
输入“yarn”命令完成配置,代码如下:

PS D:\Angular> yarn
yarn install v1.17.3
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.21s.

3. 配置Angular开发环境

直接在终端里输入:yarn global add @angular/cli
显示如下内容则安装成功:

PS D:\Angular> yarn global add @angular/cli
yarn global v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@angular/[email protected]" with binaries:
      - ng
Done in 14.61s.

4. 克隆项目

在终端里通过“cd”命令进入想要保存项目的地方,我是保存在D盘里的Angular文件里。
然后输入git clone 加上使用HTTP克隆的网址,回车后等待克隆即可。
可能有网速不稳定的问题导致克隆下来的项目有bug,删掉项目,重新克隆即可。
具体代码实现如下:

PS C:\Users\wuyulun> D:
PS D:\> cd Angular
PS D:\Angular> git clone http://git.inspur.com/bss_lvc/lvc-front.git
Cloning into 'lvc-front'...
remote: Enumerating objects: 267, done.
remote: Counting objects: 100% (267/267), done.
remote: Compressing objects: 100% (133/133), done.
Receiving objects: 100% (4735/4735), 17.61 MiB | 600.00 KiB/s, done.
Rremote: Total 4735 (delta 179), reused 206 (delta 133)
Resolving deltas: 100% (3692/3692), done.
PS D:\Angular>

5. 安装项目依赖

使用“ls”命令查看项目是否下载下来,如果成功,可以找到项目名称。
“cd”命令进入项目,继续进入项目下的“src”文件。
输入“yarn”命令安装依赖。
具体代码如下:

PS D:\Angular\lvc-front\src> yarn
yarn install v1.17.3
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it     from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 76.60s.

6. 切换分支

输入命令“git branch -a”,查看远程分支
输入命令“git checkout dev”,切换到当前分支dev

PS D:\Angular\lvc-front> git branch -a
* master
remotes/origin/HEAD -> origin/master
remotes/origin/dev
remotes/origin/dsk
remotes/origin/master
remotes/origin/mastnew
remotes/origin/newmaster
remotes/origin/sjr
remotes/origin/sww
remotes/origin/swwmaster
remotes/origin/tenew
remotes/origin/test
remotes/origin/test-zj
PS D:\Angular\lvc-front> git checkout dev
Switched to a new branch 'dev'
M       src/common/index.ts
Branch 'dev' set up to track remote branch 'dev' from 'origin'.

7. 启动项目

输入“yarn start”命令把项目跑起来,代码如下:

PS D:\Angular\lvc-front> yarn start
yarn run v1.17.3
$ gulp generate-common &&ng serve --port 8060
[17:18:57] Using gulpfile D:\Angular\lvc-front\gulpfile.js
[17:18:57] Starting 'generate-common'...
[17:18:57] Finished 'generate-common' after 96 ms
** Angular Live Development Server is listening on localhost:8060, open your browser on http://localhost:8060/ **
10% building modules 3/3 modules 0 activei 「wdm」: wait until bundle finished:                                                                              1                                                                            2                                                                            3                                                                            5                                                                            6                                                                            6                                                                            6                                                                            6                                                                            6                                                                          6Date: 2019-08-14T09:20:00.387Z
Hash: 8b80a3661fa692fcf4b5
Time: 49630ms
chunk {Address_generator-Address_generator-module} Address_generator-       Address_generator-module.js, Address_generator-Address_generator-module.js.map (Address_generator-Address_generator-module) 55.2 kB  [rendered]
chunk {Onthemanagement-Onthemanagement-module} Onthemanagement-Onthemanagement-module.js, Onthemanagement-Onthemanagement-module.js.map (Onthemanagement-Onthemanagement-module) 54.5 kB  [rendered]
chunk {Onthemanagement-Onthemanagement-module~monitoring-monitoring-module~overview-overview-module} Onthemanagement-Onthemanagement-module~monitoring-monitoring-module~overview-overview-module.js, Onthemanagement-Onthemanagement-module~monitoring-monitoring-module~overview-overview-module.js.map (Onthemanagement-Onthemanagement-module~monitoring-monitoring-module~overview-overview-module) 588 kB  [rendered]
chunk {aguopbm-aguopbm-module} aguopbm-aguopbm-module.js, aguopbm-aguopbm-module.js.map (aguopbm-aguopbm-module) 39.8 kB  [rendered]
chunk {domain_manager-domain_manager-module} domain_manager-domain_manager-module.js, domain_manager-domain_manager-module.js.map (domain_manager-domain_manager-module) 209 kB  [rendered]
chunk {global_setting-global_setting-module} global_setting-global_setting-module.js, global_setting-global_setting-module.js.map (global_setting-global_setting-module) 39.9 kB  [rendered]
chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 6.83 kB  [rendered]
chunk {is-opening-is-opening-module} is-opening-is-opening-module.js, is-opening-is-opening-module.js.map (is-opening-is-opening-module) 20.6 kB  [rendered]
chunk {main} main.js, main.js.map (main) 91.2 kB [initial] [rendered]
chunk {monitoring-monitoring-module} monitoring-monitoring-module.js, monitoring-monitoring-module.js.map (monitoring-monitoring-module) 45.7 kB  [rendered]
chunk {monitoring-monitoring-module~overview-overview-module} monitoring-monitoring-module~overview-overview-module.js, monitoring-monitoring-module~overview-overview-module.js.map (monitoring-monitoring-module~overview-overview-module) 18.6 kB 
[rendered]
chunk {overview-overview-module} overview-overview-module.js, overview-overview-module.js.map (overview-overview-module) 38.9 kB  [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 489 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 8.86 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.03 MB  [rendered]
chunk {styles} styles.js, styles.js.map (styles) 833 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 9.88 MB [initial] [rendered]
i 「wdm」: Compiled successfully.
发布了18 篇原创文章 · 获赞 1 · 访问量 3840

猜你喜欢

转载自blog.csdn.net/qq_36398269/article/details/99587836