Vue3.0 project construction detailed process and routing configuration

One, vue3.0 installation

The first is to install Vue3, as follows:

Install vue-cli: yarn add @vue/cli -g// Of course, you can also choose npm or cnpm to install
Check whether the installation is successful:

  E: \minepro\ myweek > vue - V
  @vue / cli 4.5 .6

1. Create a project

Create project: vue create vue5(项目名称)
Select the red area and press Enter:
Then wait patiently for the installation:

2. Start the project

After the installation is complete, start the project according to the instructions:
Here, congratulations, the Vue3 project ran successfully:

2. Routing (pay special attention, many friends make mistakes here)

The routing of Vue3 is not the same as the previous installation of Vue, I encountered a lot of pitfalls when I first started, and then I read a lot of articles, extracted the essence separately, and continued to explore. The reason why the routing is extracted separately is that I personally feel that there are more crooked roads that may be taken, write it out, learn with everyone, and make progress together.

1. Routing version

First install the routing version, here is not necessarily fixed, it can be used recently, there is no problem.
yarn add [email protected] -S

2. Routing instructions

The parameters here are very important. After reading them carefully, they are very meaningful for us when using them.

name	Description	supplement
createWebHashHistory(process.env. BASE_URL)	hash routing	Has a'#' sign
createWebHistory	history routing	No'#' sign
createMemoryHistory	Route with cached history
parseQuery	Query parameter deserialization
stringifyQuery	Query parameter serialization
onBeforeRouteLeave	Route leave hook

3. Routing configuration

After installation, use it in the main file.

Import routing series :
import { createWebHistory, createRouter } from 'vue-router'
Create a route
const history = createWebHistory()
Configure page logic
. Using router in the file is similar to the main body of Vue2, but the creation and routing mode are not the same, please take a closer look.

const router = createRouter({
    
    
  history, // 路由模式
  routes: [
    {
    
    
      // 页面逻辑
      path: '/test',
      name: 'test',
      component: () => import('@/page/Test')
    }
  ]
})

4. Route call

The following app is obtained from here:

import {
    
     createApp } from 'vue'
// 引入组件
import App from './App'
// 引入资源
import router from './route'
// 创建app
const app = createApp(App)

// 注入路由
app.use(router)

// 挂载实例
app.mount('#app')

Introduce :import router from './route'
Inject :app.use(router)

5. Routing Usage

Switch trigger :<router-link to="/mine">mine</router-link>
Display :<router-view></router-view>

6. Effect picture

Insert picture description here

Three, components: create and call

1. Create components

Create a component: (just create a new page)
Introduce components:import ExportExcel from './components/ExportExcel'

2. Register the components

import {
    
     createApp } from 'vue'
import App from './App'
const app = createApp(App)
// 注册组件
app.component('ExportExcel', ExportExcel)

3. Use components

Use components:<ExportExcel/>

4. Attachment-Vue3 directory file tree

Insert picture description here

Five, Vue3.0 new project source code acquisition method

1. Get the source code with git

Click here: Vue3.0 project git address

2 npm 安装： npm i ng_vue || yarn add ng_vue --save

Detailed instructions:

After the installation is complete, enter node_modules-> ng_vue-> 单独提取文件夹->然后安装依赖，运行项目
turn upnode_modules
turn up ng_vue
Extract the current folder and create a new folder to store
Install dependencies, run the project