vue3项目搭建详细过程以及路由配置
vue3.0项目搭建详细过程以及路由配置
一、vue3.0安装
首先是安装Vue3，如下：
- 安装 vue-cli：
yarn add @vue/cli -g// 当然也可以选npm或者cnpm安装 - 检查是否安装成功：
E: \minepro\ myweek > vue - V
@vue / cli 4.5 .6
1. 创建项目
-
创建项目：
vue create vue5(项目名称) -
选择红色区域后回车：
-
然后耐心等待安装：
2. 启动项目
-
安装完成后，根据指引，启动项目：
-
到这里，恭喜你，Vue3项目运行成功：
二、路由（特别注意，很多朋友都是在这里出错）
Vue3的路由和Vue之前的安装不太一样，刚开始做的时候遇到很多坑，然后又看了很多文章，分别提取精华，又继续摸索才搞出来的。之所以将路由单独提取出来，就是个人觉得可能走的歪路比较多，写出来，跟大家一起学习，一起进步。
1. 路由版本
首先安装路由版本，这里的不一定是固定的，最近的话可以使用，是没有问题的。
yarn add [email protected] -S
2. 路由说明
这里的参数很重要，仔细看完后，在使用的时候对于我们来讲是非常有意义的。
| 名称 | 说明 | 补充 |
|---|---|---|
| createWebHashHistory(process.env. BASE_URL) | hash 路由 | 有‘#’号 |
| createWebHistory | history 路由 | 没有‘#’号 |
| createMemoryHistory | 带缓存 history 路由 | |
| parseQuery | 查询参数反序列化 | |
| stringifyQuery | 查询参数序列化 | |
| onBeforeRouteLeave | 路由离开钩子 |
3. 路由配置
安装好后，在main文件中使用。
- 导入路由系列：
import { createWebHistory, createRouter } from 'vue-router' - 创建路由
const history = createWebHistory() - 配置页面逻辑
在文件中使用router跟Vue2主体差不多，就是创建和路由模式不太一样，请仔细看。
const router = createRouter({
history, // 路由模式
routes: [
{
// 页面逻辑
path: '/test',
name: 'test',
component: () => import('@/page/Test')
}
]
})
4. 路由调用
下方app是由这里所得：
import {
createApp } from 'vue'
// 引入组件
import App from './App'
// 引入资源
import router from './route'
// 创建app
const app = createApp(App)
// 注入路由
app.use(router)
// 挂载实例
app.mount('#app')
-
引入：
import router from './route' -
注入：
app.use(router)
5. 路由使用
- 切换触发：
<router-link to="/mine">mine</router-link> - 显示：
<router-view></router-view>
6. 效果图
三、组件：创建及调用
1. 创建组件
- 创建组件：（新建个页面即可）
- 引入组件：
import ExportExcel from './components/ExportExcel'
2. 注册组件
import {
createApp } from 'vue'
import App from './App'
const app = createApp(App)
// 注册组件
app.component('ExportExcel', ExportExcel)
3. 使用组件
- 使用组件：
<ExportExcel/>
四、附件 - Vue3目录文件树
五、Vue3.0 新项目源码获取方式
1， git获取源码
点击这里：vue3.0项目git地址
2， npm安装：npm i ng_vue || yarn add ng_vue --save
详情指示：
- 安装完成后，进入
node_modules->ng_vue->单独提取文件夹->然后安装依赖，运行项目 - 找到
node_modules
- 找到
ng_vue
- 提取当前文件夹并新建文件夹存储
- 安装依赖，运行项目
