NodeJs环境安装与配置

下载地址

1.      官网地址:https://nodejs.org/en/

angular cli开发angular环境搭建angular cli开发angular环境搭建

2.      中文地址:http://nodejs.cn/download/

angular cli开发angular环境搭建angular cli开发angular环境搭建

下载完成后,一直下一步安装就行,期间最好指定安装目录,我的安装目录为:

D:\install\nodejs

验证安装是否成功

命令行输入:node -v

angular cli开发angular环境搭建

angular cli开发angular环境搭建

Npm(包管理工具)环境安装与配置

介绍

npm是什么东东?npm其实是Node.js的包管理工具(package manager)。

为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用,直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。

更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Ynpm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。

讲了这么多,npm究竟在哪?

其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v

安装

Npm在nodejs安装的时候,就已经默认安装了,检查安装成功:

angular cli开发angular环境搭建angular cli开发angular环境搭建

镜像注册

淘宝镜像地址:https://npm.taobao.org/

考虑到npm依赖文件官网地址是国外的,需要越狱,所以需要指定一个国内的镜像文件

npm install -g cnpm --registry=https://registry.npm.taobao.org    //注册镜像

安装webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(ScssTypeScript等),并将其转换和打包为合适的格式供浏览器使用。

 

cnpm install -g webpack

Angularjs-cli脚手架安装配置

安装

cnpm install -g @angular/[email protected]    //安装angularjs cli最新版本

生成一个新的项目

ng new ng-test(项目名称)

angular cli开发angular环境搭建angular cli开发angular环境搭建

生成后,结构如下:

angular cli开发angular环境搭建angular cli开发angular环境搭建

安装依赖包(大概有2万多个文件)

cnpm install      //到项目目录执行,主要安装依赖node_modules

 

完成后,文件夹结构如下:

angular cli开发angular环境搭建

angular cli开发angular环境搭建

Intellij idea 开发搭建和部署

搭建

【File->Open】打开上面生成的新的angularjs项目

angular cli开发angular环境搭建

angular cli开发angular环境搭建

插件下载

Typescript相对于angularjs的语法提示下载

【File->Settings】

angular cli开发angular环境搭建

angular cli开发angular环境搭建

Nodejs插件下载

【File->Settings->Browse repositories】搜索NodeJs,由于我本机已安装NodeJs插件,如下图展示

angular cli开发angular环境搭建

angular cli开发angular环境搭建

运行配置

angular cli开发angular环境搭建angular cli开发angular环境搭建angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

angular cli开发angular环境搭建

配置完成,启动项目

angular cli开发angular环境搭建

angular cli开发angular环境搭建

说明:启动时会有进度展示,10%时页面自动打开,100%才会开始加载页面并显示页面内容


项目目录详解:

angular cli开发angular环境搭建

angular cli开发angular环境搭建

相关文章:

  • 2018-01-28
  • 2018-03-18
  • 2018-05-24
  • 2021-11-07
  • 2021-11-08
  • 2021-11-02
  • 2022-01-07
  • 2021-12-30
猜你喜欢
  • 2021-11-07
  • 2022-01-07
  • 2021-11-02
  • 2021-08-30
  • 2018-07-19
  • 2021-11-07
  • 2021-12-04
  • 2021-05-27
相关资源
相似解决方案