前言
本文将通过介绍并对比react、vue2、vue3框架的搭建流程,了解并掌握完整的项目初始化流程
1. react项目搭建
主要通过 create-react-app
脚手架配合 react-app-rewired
添加一些额外的webpack配置搭建一个基础 H5 项目。更加详细的配置和优化可以参考我的文章 不用 npm run eject,我是这么配置webpack的
1.1 安装
js
npx create-react-app react-demo(项目名称,可以自己命名)
1.2 安装相关依赖
js
// 安装基本UI库andt-mobile
yarn add antd-mobile
// 安装 react-app-rewired customize-cra 用来添加webpack相关配置,只需要安装在开发环境就好
yarn add react-app-rewired customize-cra -D
// babel-plugin-import这个是分包工具
yarn add babel-plugin-import -D
1.3 修改package.json
启动项
js
{
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
1.4 在项目根目录创建一个 config-overrides.js
用于修改默认配置
js
const { override, fixBabelImports } = require("customize-cra")
module.exports = override(
fixBabelImports("import", {
libraryName: 'antd-mobile',
style: 'css',
})
)
1.5 修改app.js
js
import { Button } from 'antd-mobile'
function App() {
return (
<div className="App">
<Button type="primary">按钮</Button>
</div>
);
}
export default App;
1.6 启动项目,并访问localhost:3000
arduino
npm run start
2. vue 项目搭建
2.1 Vue CLI
CLI (@vue/cli)
是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create xxx
快速搭建一个新项目。
2.2 安装CLI
2.2.1 安装命令
js
npm install -g @vue/cli
或者
js
yarn global add @vue/cli
2.2.2 版本查看
js
vue --version
或者
js
vue -V
2.2.3 版本升级
js
npm update -g @vue/cli
或者
js
yarn global upgrade --latest @vue/cli
2.3 创建vue项目
js
vue create vue-demo
2.4 选择默认【Vue 2】或者【Vue 3】选项
2.5 启动项目
js
npm run serve
// OR
yarn serve