搭建vue3.0项目

第一种：使用脚手架搭建vue3.0项目

1、vue create vue3-project    // [项目名]
2、选择手动配置，自选所需
3、cd vue3-project
4、yarn i / npm i
5、yarn serve
vue -V  //  去查vue版本  需大于4.5.0

第二种: 使用vite + vue3.0

Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

$ npm init vite-project <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

但是需要自己配置路由

npm info vue-router versions    //  查找路由最新版本

yarn add vue-router@4.0.0-rc.5

新建一个index.js

import {
    
    createWebHashHistory, createRouter} from 'vue-router'
import login from './src/view/login.vue'
const history = createWebHashHistory()
const router = createRouter({
    
    
    history,
    routes: [
      {
    
     path: '/', component: login }
    ]
  })
export default router

在main.js中引入

import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from '../index'

const app = createApp(App)
app.use(router)
app.mount('#app')

useRouter
使用useRouter进行编程式导航

import {
    
     useRouter } from 'vue-router'
setup () {
    
    
  const router = useRouter()

  const goHome = () => {
    
    
    router.push('/home')
  }
}

useRoute
通过useRoute获取当前路由信息,path、query、params

import {
    
     useRoute } from 'vue-router'
setup () {
    
    
  const route = useRoute()
  console.log(route.path)
}