初始化项目
npm init -y
选择打包编译工具
webpack
vite(新项目个人推荐)
选择技术栈（推荐使用typescript）
vue 3 、vue-router 、axios/fetch 、pinia 、dayjs
安装依赖
npm install vue vue-router pinia dayjs
yarn add vue vue-router pinia dayjs
pnpm install vue vue-router pinia dayjs
# 安装 ts的依赖
npm install vite @vitejs/plugin-vue typescript vue-tsc
yarn add -D vite @vitejs/plugin-vue typescript vue-tsc
pnpm install vite @vitejs/plugin-vue typescript vue-tsc
html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue-root-app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
main.ts
import {createApp, defineComponent} from 'vue';
const App = defineComponent({
template: `<h1>vue + vite</h1>`
})
const app = createApp(App)
app.mount('#vue-root-app')
package.json的配置
{
"name": "admin-fe",
"version": "1.0.0",
"description": "积分系统管理端",
"scripts": {
"start": "npm run dev",
"dev": "vite",
"build": "vue-tsc && vite build"
},
...
}
vite的配置
import vue from '@vitejs/plugin-vue'
export default {
// 必须配置vue插件
plugins: [vue()]
}
路由
当页面比较少时，可以考虑直接使用if判断限制不使用组件
<template>
<div>
<h1>vue3 + vite + {{ username }} {{ currentPath }}</h1>
<input type="text" v-model="username">
<template v-if="currentPath == '/home'">
<Home/>
</template>
<User v-if="currentPath == '/user'"/>
</div>
</template>
<script lang="ts">
import {ref} from "vue";
import Home from "./Home.vue";
import User from "./User.vue";
export default {
name: "App",
components: {User, Home},
setup() {
const username = ref<string>()
const currentPath = ref<string>(location.hash ? location.hash.substring(1) : '/home')
window.onhashchange = () => {
currentPath.value = location.hash ? location.hash.substring(1) : '/home'
}
return {
username,
currentPath,
}
}
}
</script>
<style scoped>
</style>
页面较多 则使用vue-router
https://router.vuejs.org/zh/introduction.html
// 1.定义路由
const routes = [
{
path: '路径',
component: 组件对象,
redirect: '要跳转的路径',
children:[ // 路由嵌套
{
path: '路径',
component: 组件对象,
}
]
}
]
// 2.创建路由对象
import {createRouter} from 'vue-router'
const router = createRouter({
routes: routes
})
// 3.使用路由
const app = createApp();
app.use(router); // 在应用使用router
显示路由及跳转
<template>
<router-view/>
<router-link to="要跳转的路径"></router-link>
</template>
前端分离的接口交互
1.跨域
协议、访问域、端口只有一个不同都是跨域.
协议： http/https 端口： 冒号后面的数字
跨域除了上述原则之外，自定义请求头也会使跨域失败