创建vue/react项目
1.使用vue-cli创建vue2/vue3项目
(1)安装node环境
-
检测node版本及检查node是否安装成功:node -v
(2)vue-cli脚手架搭建项目
1.全局安装vue-cli:
yarn global add @vue/cli
检查是否安装成功:
vue --version
2.vue项目创建
(1)进入你要创建vue项目的目录下进行项目创建，输入：vue create ”项目名称“
(2)我们一般选择自行配置:manually select features
(3)选择项目所需配置(空格是选中或取消,回车进入下一步)
- 空格键是选中与取消，A键是全选
- TypeScript 支持使用 TypeScript 书写源码
- Progressive Web App (PWA) Support PWA 支持。
- Router 支持 vue-router 。
- Vuex 支持 vuex 。
- CSS Pre-processors 支持 CSS 预处理器。
- Linter / Formatter 支持代码风格检查和格式化。
- Unit Testing 支持单元测试。
- E2E Testing 支持 E2E 测试。
原文链接：blog.csdn.net/Li_Wen_Zhon…
(4)选择vue版本
(5)选择是否需要类类型组件
(6)选择是否需要ts编译器
(7)选择路由模式(默认hash)
(8)选择css预处理语言
(9)选择存放编译器,Eslint规范的方式(我们一般选单独建一个配置文件)
(10)是否保存当前设置(否)
vue2快速生成模板: vb或者vbtc
vue3快速生成模板:v3p
2.使用vite创建vue3项目
(1)创建应用（vite）
yarn create vite
- 设置项目名
- 选择框架--vue
- 选择语言(ts/js)
- cd 项目名 进入项目
- yarn 根据package.json生成依赖包
(2)vue3的vscode插件支持
- 首先要卸载vue2 插件 vetur
- 然后安装插件： Vue Language Features (Volar)
- 重启vscode
(3)vue3项目中路由使用
-
安装vue-router （4.x）
- yarn add vue-router
-
创建文件src/router/index.ts
- 创建router，配置路由，导出router
// 创建一个router 并导出到main.ts,然后挂载到vue的应用上
// createRouter 是一个方法，创建一个router对象
// createWebHashHistory创建router的hash模式
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
// 配置地址与页面的映射
const routes: RouteRecordRaw[] = [
{
path: '/index',
name: 'index',
component: () => import('../views/index.vue'),
}
]
const router = createRouter({
routes,
history: createWebHashHistory()
})
export default router
将router挂载到全局的vue应用
import router from './router/index'
import App from './App.vue'
// 以App为根组件，创建了一个vue的应用，并将这个应用挂载到#app的节点上
const app = createApp(App)
app.use(router)
app.mount('#app')
测试
- 在入口组件App.vue里面设置路由出口
- 在浏览器测试
3.react项目环境搭建
(1) 使用webpack方式
借助一个脚手架：create-react-app
- 全局安装脚手架命令
- yarn global add create-react-app
- npm install create-react-app -g
- 查看脚手架版本：create-react-app --version
- 创建项目： create-react-app 项目名
(2)使用vite方式(同vue)
yarn creat vite
- 设置项目名
- 选择框架--react
- 选择语言(ts/js)
- cd 项目名 进入项目
- yarn 根据package.json生成依赖包
vscode快速生成组件插件: ES7+ React/Redux/React-Native snippets
react快速生成模板:
- rcc快速生成类类型组件
- rfc快速生成函数类型组件
-react路由
安装路由： yarn add react-router-dom (v6)
- 为什么有一个-dom： 路由时通过组件配置在render里面（写的是节点、组件）
- HashRouter: 路由的容器，react-router-dom的其他组件都要在ta下面，包裹整个项目
- Routes：用于包裹Route,来决定渲染哪一个组件
- Route： 此组件是把地址与组件一一对应起来
- Navigate： 通常用来做重定向
- Outlet: 类比vue的router-view
