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 路由
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

详情指示：

1. 安装完成后，进入node_modules -> ng_vue -> 单独提取文件夹 -> 然后安装依赖，运行项目
2. 找到node_modules
   
3. 找到 ng_vue
   
4. 提取当前文件夹并新建文件夹存储
   
5. 安装依赖，运行项目