在环境搭建好的基础上

一、创建工程vue-cli项目

vue create 项目的名称

选择第三个自定义

选择需要的（空格选择bable TypeScript ts文件没学过不建议使用 router路由 vuex共享数据回车完成，选择3.x版本，选择y使用模板，选择上面，n不保存这个模板）

cd 项目名称

npm run serve 启动服务

删除assets,components,views初始化内容修改router.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [

{

path: '/',

component: () => import('../views/index.vue')/*按需加载*/

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

修改完需要保存，否则报错

修改App.vue

vues文件夹下创建index.vue

public下创建css文件夹，添加reset.css文件，百度搜索复制网上代码即可(网易的挺好使)，

html {overflow-y:scroll;}

body {margin:0; padding:0; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;/*background:#ffffff;*/}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}

table,td,tr,th{font-size:12px;}

ol,ul {list-style:none;}

li{list-style-type:none;}

img{vertical-align:top;border:0;}

h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}

address,cite,code,em,th,i{font-weight:normal; font-style:normal;}

.hx a,.hx em,.fB{font-weight:bold;}

.clearfix{*zoom:1;}

.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}

a {color:#252525; text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {color:#ba2636;text-decoration:underline;}

a:active {color:#ba2636;}

在public文件夹下的index.html里的head标签下引入

二、router使用

1.vues下创建xx.vue

router下的index.js配置路由

{

path: '/想写的路径',

component: () => import('../views/LoginRegister.vue')/*按需加载*/

2.vues下创建404.vue

router下的index.js配置路由 '/:catchAll(.*)'这个路径表示路径错误时，都会进入404.vue

{

path: '/:catchAll(.*)',

component: () => import('../views/404.vue')/*按需加载*/

3.子路由

router/index.js里面：

import Hi from '@/components/Hi'

import Hi1 from '@/components/Hi1'

// 配置Hi对象

{

path: '/Hi',

component: Hi,

//引子路由

children:[

{path:'Hi1',component:Hi1},

{path:'Hi2',component: () => import( '@/components/Hi2')},

]

}

3.导入axios

安装：

npm install axios

npm uninstall axios

安装报错就修理即可

main.js里挂载

//导入 axios

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8081'

将 axios 挂载为全局的 $http 自定义属性

app.config.globalProperties.$http = axios

页面里面使用的方法，如果获取查询数据，需要在生命周期created(){}调用方法获取数据，然后赋值到data数据里面，然后进行遍历啥的操作（vue的方法了）

//封装就是把页面中用到的get，post等方法封装起来使用

4.导入element-plus

安装element-plus

npm install element-plus --save

main.js

import ElementPlus from 'element-plus'

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

app.use(ElementPlus)

基于vue3-cli创建的项目+element-plus