angualr 项目环境搭建

Posted 2022-05-02 zxbky

1  安装node.js 

    https://nodejs.org/en/   在官网找到最新版本下载 

    安装成功后  打开cmd  输入命令  node  -v   查看版本号如果有安装成功

2  安装yarn

   Yarn提供了丰富的命令使你可以对Yarn包进行许多操作，包括安装、管理、发布等

    https://yarnpkg.com/zh-Hans/   在官网找到稳定版下载‘

     安装成功后   打开cmd  输入命令  yarn  -v   查看版本号如果显示安装版本号则安装成功

       输入 yarn  命令直接查看详细内容

     如果安装不成功查看提示是否有其他环境影响

    代码示例

 C:\Users\root>yarn -v

1.10.1

C:\Users\root>yarn

yarn install v1.10.1

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.11s.

3 安装angular   

   3.1 设置开发环境

   直接在命令行输入    yarn global add @angular/cli    

   如果没有安装 yarn 可以直接输入   $ npm install -g @agular/cli   命令

   注意  在angular   npm install -g @angular/cli   中因为安装了yarn包管理工具    所以要把npm install 替换成 yarn global add  语法安装

   显示如下内容则安装成功

   yarn global v1.10.1        版本号

   [1/4] Resolving packages...

   [2/4] Fetching packages...

   info fsevents@1.2.4: The platform "win32" is incompatible with this module.

   info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.

   [3/4] Linking dependencies...

   [4/4] Building fresh packages...

   success Installed "@angular/cli@6.2.5" with binaries:      提示成功

    Done in 86.28s.

 3.2   创建新项目

      在 cmd  中输入命令   ng new my-app

      Angular CLI 会安装必要的 NPM 包、创建项目文件，并在该项目中生成一个简单的默认应用。这可能要花一点时间。       你可以使用 ng add 命令往新项目中添加一些预先打包好的功能。你可以使用 ng add 命令往新项目中添加一些预先打包好的功能。

 3.3  启动开发服务器

     进入项目目录，并启动服务器。

     content_copycd my-app

     ng serve --open

  ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

    使用 --open（或 -o）参数可以自动打开浏览器并访问 http://localhost:4200/。

4  配置依赖包

   1  安装依赖包

     C:\Users\root>cd my-app   进入下载好的项目   

     C:\Users\root\my-app>cd src

     C:\Users\root\my-app\src>yarn   在cmd输入命令  yarn  安装依赖包

      yarn install v1.10.1

   2  启动依赖包

   C:\Users\root\my-app\src>yarn start     在cmd输入命令  yarn  start  启动依赖包

 

yarn run v1.10.1          

$ ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-15T08:43:58.137Z

Hash: c2ae3b537a5907462efc

Time: 7795ms

chunk main main.js, main.js.map (main) 10.7 kB [initial] [rendered]

chunk polyfills polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]

chunk runtime runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]

chunk styles styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]

chunk vendor vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]

i ?wdm?: Compiled successfully.

 

5 git安装

   5.1 安装git  

    5.2 登陆账号配置用户名

            在gitlab 详情中配置用户登陆账号和密码    注意必须要新建文件

            在gitlab直接复制进去配置用户信息

            git config --global user.name "张旭"

             git config --global user.email "[e-mail]"

      配置完成以后

             找到  crm-front  这个项目也可以是其他项目  在itlab中复制文件链接下载文件    $ 为gitlab自带文件

               $ http://git.inspur.com/bss-crm/crm-front.git  后加ctrl+c

              $ git clone     http://git.inspur.com/bss-crm/crm-front.git       注意执行   clone克隆命令 克隆文件的放置位置中打开git   

              $ cd            使用cd命令查看 文件下载下来没有

 

     $ cd crm-front/   使用cd  进入下载下来的文件

    $ git branch -a         查看远程分支   

     * master

     remotes/origin/HEAD -> origin/master          当前远程分支指向master

     remotes/origin/dev            远程分支  dev

     remotes/origin/master      远程分支  master

             $ git checkout -b dev origin/dev      切换到当前分支dev    git checkout命令用于切换分支      

     $ ls     读取文件    查看文件配置

     $ yarn   配置环境        执行 yarn strat  项目就可以跑起来了

6  命令操作（vs code编辑器操作）

       git  pull      拉取（下载） 远程的数据同步到自己的目录的命令

      自己操作上传过程中如果出现冲突就是自己的不是最新的，需要先把自己的备份，然后拉取最新的数据，然后把自己的改动放入最新的内容

      把修改之后的文件暂存到本地，然后在上传之前拉取一次，看看有没有冲突，然后在消息输入框内填入修改文件夹及修改内容，然后点击对勾上传  ps: vs code 编辑器操作  

      ng serve --host localhost --port 4201     ng serve --port      修改端口号为  4201 端口