angualr 项目环境搭建

Posted zxbky

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angualr 项目环境搭建相关的知识,希望对你有一定的参考价值。

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 "zhangxu@inspur.com"

      配置完成以后

             找到  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 端口

以上是关于angualr 项目环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

十次方项目的环境搭建

怎样搭建web项目测试环境?

Mac搭建RN环境并运行Xcode项目

项目一众筹网01_02环境搭建_日志系统搭建日志打印级别debuginfoerror

路飞项目环境搭建

路飞虚拟环境搭建