angularjs脚手架cli-angularjs安装问题解决

JavaScript020

angularjs脚手架cli-angularjs安装问题解决,第1张

    安装cli-angularjs的过程出现命令无法执行，其原因是cli-angular自带的webpack-cli版本过低，解决的办法是：

1. 全局安装webpack-cli: npm install -g webpack-cli

2. 将安装webpack-cli后对应的文件夹拷贝到指定目录

    拷贝源:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\webpack-cli

    拷贝目的：C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\cli-angularjs\node_modules\webpack-cli

    其中xxxxxx为各自的计算机用户名

前端开发中提到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。

在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作者帮你把开发环境大部分东西都配置好了，你把脚手架下载下来就可以直接开发了，不用再考虑搭建这些工具环境。

一、安装最新的node.js

原博文是这样写说的

npm install -g n //首先安装n模块 

n stable //升级node.js到最新稳定版 

n 5.0.0 //或者指定版本升级 

node -v //检查更新是否成功

我自己是去重新下了一个最新版的node.js

二、修改npm源为淘宝源

npm config set registry “”

加快npm下载速度，不这样做的话npm install会卡很久。

三、安装脚手架

首先确保自己安装了nodejs，然后全局安装yeoman

npm install -g yo

然后直接安装脚手架

npm install -g generator-reactpackage123456

四、创建React项目

在合适的地方新建一个文件夹，在文件夹下运行：

yo reactpackage12

然后就会在此目录下生成以下目录结构：

├── data

│ └── test.json├── src

│ ├── components

│ │ └── App.js│ ├── images

│ │ └── yeoman.png│ ├── styles

│ │ └── app.scss│ ├── vendor

│ │ └── jquery.js│ ├── views

│ │ └── home.html├── node_modules

├── index.html├── package.json└── webpack.config.js1234567891011121314151617181920

五、调试打包React项目

然后使用以下命令：

npm run dev //项目开发过程使用，启动服务，实时刷新npm run build //开发完成之后打包文件（js、css分开打包）123

六、测试预览项目

本项目默认监听端口是8888，所以在浏览器输入 http://localhost:8888，或者index.html->右键打开方式->chrome 就能看到效果了

如果执行上述命令提示错误：Error: getaddrinfo ENOTFOUND localhost，在host文件里面添加127.0.0.1 localhost即可

监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置123