前端框架新建项目复习

安装node.js环境

# 查看node版本
$ node -v
v12.18.1
# 查看npm版本
$ npm -v
6.14.5

vue搭建项目

1. 最新稳定版 全局安装

$ npm install vue

2. 全局安装vue cli

$ npm install --global vue-cli

3. 创建一个基于webpack的项目

$ vue init webpack project-name

4. 打开新建的项目

$ cd project-name

5. 运行项目

$ npm run dev

angular搭建项目

1. 安装国内镜像

$ npm config set registry https://registry.npm.taobao.org

2. 安装angular-cli

$ npm install -g @angular/cli

3. 新建项目，typescript + less

$ ng new my-angular-project --style less

4. 启动项目

$ npm install 
$ ng serve

react搭建项目

方法一：

<!-- 加载 React。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>  
<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 加载我们的 React 组件。-->
<script src="like_button.js"></script>

在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

方法二：使用官方脚手架create-react-app，其中一种是直接使用npx命令

1. 创建项目

$ npx create-react-app <项目名>

2. 打开新项目文件夹

$ cd demo

3. 运行项目

$ npm start

4. 项目打包

$ npm run build

5. npm run eject会复制所有依赖文件和相应的依赖到项目中，操作不可逆。
6. npm test 运行测试包 方法三：全局安装脚手架
7. 全局安装create-react-app脚手架

$ npm install -g create-react-app

2. 创建项目

$ create-react-app <项目名>