在环境搭建好的基础上
一、创建工程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: '/',
name: 'index',
component: () => import('../views/index.vue')/*按需加载*/
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
修改完需要保存，否则报错
修改App.vue
<template>
<router-view/>
</template>
<style>
html,body,
#app {
width: 100%;
height: 100%;
}
</style>
vues文件夹下创建index.vue
<template>
<div class="index">
首页
</div>
</template>
<script >
export default{
};
</script>
<style >
</style>
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标签下引入<link rel="stylesheet" href="css/reset.css" title清空
二、router使用
1.vues下创建xx.vue
<template>
<div >
内容，template里面写一个div，所有内容只能写到div中
</div>
</template>
<script >
export default {
name: "自己定",
components: {},
};
</script>
<style scoped>
</style>
router下的index.js配置路由
{
path: '/想写的路径',
name: '可写，写的话必须唯一',
component: () => import('../views/LoginRegister.vue')/*按需加载*/
},
2.vues下创建404.vue
<template>
<div>
<img src="../assets/404.jpg" alt="加载错误">
</div>
</template>
<script >
export default{
name: "404",
components: {},
};
</script>
<style scoped>
</style>
router下的index.js配置路由 '/:catchAll(.*)'这个路径表示路径错误时，都会进入404.vue
{
path: '/:catchAll(.*)',
name: '404',
component: () => import('../views/404.vue')/*按需加载*/
},
3.子路由
<template>
<div>
<div>
<router-link to="/">Hello</router-link>|
<router-link to="/Hi">Hi</router-link>|
<router-link to="/Hi/Hi1">Hi1</router-link>|
<router-link to="/Hi/Hi2">Hi2</router-link>
</div>
<router-view/>
</div>
</template>
router/index.js里面：
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
// 配置Hi对象
{
path: '/Hi',
name: '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的方法了）
<script>
export default{
data() {
return {
adminlist:[],
}
},
created() {
this.adminList()
},
methods: {
// 请求商品列表的数据
async adminList() {
// 1. 通过组件实例 this 访问到全局挂载的 $http 属性，并发起Ajax 数据请求
const { data: res } = await this.$http.get('/sys')
// 2. 判断请求是否成功
if (res.code != 20000) return alert('请求商品列表数据失败！')
// 3. 将请求到的数据存储到 data 中，供页面渲染期间使用
this.adminlist = res.list
},
},
}
</script>
//封装就是把页面中用到的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)
