快速入门Angular或Vue前端环境配置和项目运行

本文档仅介绍Angular和Vue项目的环境安装到项目运行，具体相关api请到相应官网进行学习

 

第一步：建议安装编译器：vscode（也可以使用idea等其他编译器)

安装地址：https://code.visualstudio.com/Download

设置中文语言环境：
https://jingyan.baidu.com/article/7e44095377c9d12fc1e2ef5b.html

第二步：安装nodeJS和NPM（必备环境）

https://nodejs.org/en/（选择LTS版本）

安装后在控制台输入

node -v
 

或

npm -v
 

通过是否显示版本号来检验是否安装成功

参考地址：https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html

如果在windows下需要安装多个Node版本可以参考
https://www.cnblogs.com/kevinlvhsl/p/6226758.html

第三步：安装命令行工具（用来快速构建，运行，打包Angular或Vue项目等）

1)Angular：

安装angular-cli

在控制台输入

npm install -g @angular/cli
 

输入

ng -v 
 

显示版本号则安装成功

2)Vue：

安装vue-cli和webpack

在控制台输入

npm install --global vue-cli
 

输入

vue -V
 

显示版本号则安装成功

在控制台输入

npm install webpack -g
 

输入

webpack -v 
 

显示版本号则安装成功

第四步：构建一个应用或拉取已经存在的git项目

在控制台cd到你想要放置项目的文件夹路径，然后输入命令

1)Angular：

ng new ProjectName （ProjectName为项目文件夹名称）
 

 

2)Vue：

vue init webpack ProjectName （ProjectName为项目文件夹名称）
 

3)如拉取已经存在的git项目，需要安装依赖，输入

npm install
 

第五步：运行应用

1)Angular：

ng new构建项目或拉取已存在项目并npm install完成后，

cd到对应的项目文件夹下面

输入

ng serve --open
 

完成后将自动打开浏览器并自动访问http://localhost:4200/

这时候将看到该angular项目的第一个页面

注意：如果遇到如下问题

参考https://www.cnblogs.com/linjiangjin/p/10396773.html

2)Vue：

输入

npm run dev
 

完成后一般将自动打开浏览器并自动访问http://localhost:8080/，如果不是查看他提供的地址进行访问

这时候将看到该Vue项目的第一个页面

第六步：根据项目或自身需要前往官网学习Angular或Vue相关api！

Angular官网：https://angular.cn/

Vue官网：https://cn.vuejs.org/