vue3-搭建项目-vue2-vu3使用上的变化

见文档https://vue-docs-next-zh-cn.netlify.app/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli

vite搭建：

1. 安装vite   npm init @vitejs/app
2. npm init vite <project-name>
3. cd <project-name>
4. npm i
5. npm run dev

　　vite引入组件时需要加文件后缀不然报错

路由配置

　　下载路由： npm install vue-router@4

　　1. 新建router文件夹，其下建index.js

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router"
const routes = [
    { 
        path: "/",
        component: () => import('../components/home.vue')
    },
    { 
        path: "/about", 
        component: () => import('../components/pages/about.vue')
    },
];

const router = createRouter({
    // 4. 采用hash 模式
    history: createWebHashHistory(),
    // 采用 history 模式 history: createWebHistory(),
    routes, 
});
export default router

　　

　　2. 挂载到main.js

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

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

1. 调用挂在vue实例区别

//vue2
//main.js全局引入
import axios from 'axios'
Vue.prototype.$axios = axios
//在组件中使用通过this.$axios调用

//vue3
//main.js
import axios from 'axios'
import * as echarts from 'echarts'
app.config.globalProperties.$http = axios
app.config.globalProperties.$echarts = echarts

//再别的组件中使用
const { proxy } = getCurrentInstance()
let chart1 = proxy.$echarts.init(chartDom);