vue react angular 分别如何创建一个新项目

前提，这三个框架都需要依赖node.js 环境，并且node.js 包含npm环境

Vue: (vue-cli 3之前的版本)

1. 全局安装vue-cli 和 webpack

npm install vue-cli -g      //全局安装 vue-cli

npm install webpack -g

2. 用webpack模板新建一个vue 项目

vue init webpack my-vue-app

3. 安装node-module依赖目录

npm install

4.运行项目

npm run start

或者

npm run dev

5.打包项目

npm run build

生成dist目录，是为vue 项目打包后的文件目录

附：webpack 配置链接

https://www.webpackjs.com/concepts/

https://www.jianshu.com/p/080e18fcf0e3

Vue: (vue-cli 3)

vue-cli 3 创建项目更简单

1. 卸载旧版的vue-cli

npm uninstall vue-cli -g

2. 如果node版本不够，升级node相应的版本,vue-cli 3 依赖的nodejs版本>8.9

3. 安装新版的vue-cli

npm install -g @vue/cli

默认的版本应该是最新的。也可以直接在后面加上 --latest，或者带上版本号

4. 创建一个vue-cli 3的项目

vue create vue-cli3-app

然后一步步选择创建相应的配置

完成创建

附：或者还可以使用vue ui（图形化工具的命令）来创建vue-cli3的项目

react

方法一：直接通过标签直接引入，不推荐

<!-- 引入react -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

方法二：使用官方脚手架creact-react-app

这个方法也非常简单：

npx create-react-app my-react-app

或者，直接先安装脚手架工具

npm install -g create-react-app

然后，

create-react-app my-react-app

方法三：使用webpack、babel、react来创建React项目

1. 初始化项目

npm init -y

2. 安装webpack 和 webpack-cli 依赖

npm install webpack webpack-cli --save-dev

3. 安装babel

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

4. 配置webpack

5.安装react 和 react-dom 包

npm install react react-dom --save

6.安装webpack-dev-serve

npm install webpack-dev-server --save-dev

package.json中添加脚本：

"scripts": {"start": "webpack-dev-server --open --mode development"
}

7. 运行项目

npm run start

注意：webpack 配置比较关键

angular

1.安装angular-cli

npm install -g @angular/cli

2.创建项目

ng new my-angular-app

3. 运行项目

ng serve --open

4.编译项目

ng build

5. 创建组件

ng g component first-component