vue3项目搭建详细过程以及路由配置

vue3.0项目搭建详细过程以及路由配置一、vue3.0安装1. 创建项目2. 启动项目 二、路由（特别注意，很多朋友都是在这里出错）1. 路由版本2. 路由说明3. 路由配置4. 路由调用5. 路由使用6. 效果图 三、组件：创建及调用1. 创建组件2. 注册组件3. 使用组件 四、附件 - Vue3目录文件树五、Vue3.0 新项目源码获取方式1， git获取源码2， npm安装：npm i ng_vue || yarn add ng_vue --save详情指示：

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 vue-router@4.0.0-beta.6 -S

2. 路由说明

这里的参数很重要，仔细看完后，在使用的时候对于我们来讲是非常有意义的。

名称说明补充createWebHashHistory(process.env. BASE_URL)hash 路由有‘#’号createWebHistoryhistory 路由没有‘#’号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 提取当前文件夹并新建文件夹存储 安装依赖，运行项目