创建vue3

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g

1.vue create mypro

        

> Default ([Vue 2] babel, eslint)
          Default (Vue 3) ([Vue 3] babel, eslint)    <选择>
          Manually select features

2. cd mypro

3.cnpm install 安装cnpm依赖

4.cnpm install vue-router@4 安装路由

5.cnpm i vant@next -S 安装vant

5.1下载 echarts 可视化图形

cnpm install echarts --save

6.  cnpm install element-plus --save  安装element ui

7.cnpm install axios 安装axios

8.cnpm run serve 运行vue3

9.路由配置

        在src下新建 router目录，然后在 router目录下新建 index.js和 routers.js文件

index.js

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routers'
 
const router = new createRouter({
    history: createWebHistory(), // history为必填项
    routes,
})
 
export {
    router
}

routers.js

import HelloWorld from '../components/HelloWorld'
var routes = [
    {
      path:'/',
      name:'HelloWorld',
      component:HelloWorld
    },
    
]
export default routes

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router/index'
 
const app = createApp(App)
 
app.use(router);
//全局引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
app.use(Vant);
 
//全局引入element ui
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
app.use(ElementPlus)
 
app.mount('#app')

app.vue

<template>
  <div id="app">
      
    <router-view></router-view>
  
  </div>
</template>

封装axios
在src/components下新建 http目录，然后在 http目录下新建axios.js

import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000/"
app.config.globalProperties.axios = axios;
 
import qs from 'qs'
const myaxios = function(url,method,data={}){
    return new Promise((resolve)=>{
        if(method == 'get' || method == 'delete'){
            axios({
                'method':method,
                'url':url,
                'params':qs.stringify(data)
            }).then(res=>{
                resolve(res.data)
            })
        }else{
            axios({
                'method':method,
                'url':url,
                'data':qs.stringify(data)
            }).then(res=>{
                resolve(res.data)
            })
        }
    })
}
export default myaxios

接下来就在src/components新建一个view试图  在视图里写vue文件

在试图建一个页面  在routers.js中配置路由