在環(huán)境搭建好的基礎上
一、創(chuàng)建工程vue-cli項目
vue create 項目的名稱
選擇第三個自定義
選擇需要的（空格選擇bable TypeScript ts文件沒學過不建議使用 router路由 vuex共享數(shù)據(jù) 回車完成，選擇3.x版本 ，選擇y使用模板 ，選擇上面 ，n不保存這個模板）
cd 項目名稱
npm run serve 啟動服務
刪除assets,components,views初始化內(nèi)容修改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文件夾下創(chuàng)建index.vue
<template>
? ? <div class="index">
? ? ? ? 首頁
? ? </div>
</template>
<script >
export default{
};
</script>
<style >
</style>
public下創(chuàng)建css文件夾，添加reset.css文件，百度搜索復制網(wǎng)上代碼即可(網(wǎng)易的挺好使)，
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下創(chuàng)建xx.vue
<template>
? ? <div >
????????內(nèi)容，template里面寫一個div，所有內(nèi)容只能寫到div中
? ? </div>
</template>
<script >
export default {
? ? name: "自己定",
? ? components: {},
};
</script>
<style scoped>
</style>
router下的index.js配置路由
? {
? ? path: '/想寫的路徑',
? ? name: '可寫，寫的話必須唯一',
? ? component: () => import('../views/LoginRegister.vue')/*按需加載*/
? },
2.vues下創(chuàng)建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
頁面里面使用的方法，如果獲取查詢數(shù)據(jù)，需要在生命周期created(){}調(diào)用方法獲取數(shù)據(jù)，然后賦值到data數(shù)據(jù)里面，然后進行遍歷啥的操作（vue的方法了）
<script>
export default{
? data() {
? ? return {
? ? ? adminlist:[],
? ? }
? },
? created() {
? ? this.adminList()
? },
? methods: {
? ? // 請求商品列表的數(shù)據(jù)
? ? async adminList() {
? ? // 1. 通過組件實例 this 訪問到全局掛載的 $http 屬性，并發(fā)起Ajax 數(shù)據(jù)請求
? ? const { data: res } = await this.$http.get('/sys')
? ? // 2. 判斷請求是否成功
? ? if (res.code != 20000) return alert('請求商品列表數(shù)據(jù)失??！')
? ? // 3. 將請求到的數(shù)據(jù)存儲到 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)
