vue3使用

见文档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搭建：

npm create vite@latest

　　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实例

//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);

 2. 配置全局自定义参数

// Vue3.x
const app = createApp({})
app.config.globalProperties.$api = axios;

 

import {ref,reactive, onMounted,getCurrentInstance} from 'vue'
const instance = getCurrentInstance();
const { $Name } = instance.appContext.config.globalProperties;

 3. 404组件路由定义

　　vue3对404配置进行了修改,必须要使用正则匹配

{
        path: '/:pathMatch(.*)*',
        name: '404',
        component: () => import('../views/notFound.vue'),
    }

  4. 引入element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

  app.use(ElementPlus)

 5. 项目中使用@代替 /src

npm i @types/node --save-dev

　vite.config.ts

import path from 'path' //关键
export default defineConfig({
    ...
    resolve: {
    　　alias: {
      　　"@": path.resolve("./src"),
    　　}
  　　},
})

tsconfig.json

"compilerOptions": {
"paths":{
      "@": ["src"],
      "@/*": ["src/*"],
    }
}