185 lines
3.3 KiB
Markdown
185 lines
3.3 KiB
Markdown
## 初始化项目
|
||
|
||
```shell
|
||
npm init -y
|
||
```
|
||
|
||
## 选择打包编译工具
|
||
|
||
webpack
|
||
|
||
vite(新项目个人推荐)
|
||
|
||
## 选择技术栈（推荐使用typescript）
|
||
|
||
vue 3 、vue-router 、axios/fetch 、pinia 、dayjs
|
||
|
||
## 安装依赖
|
||
|
||
```shell
|
||
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模板
|
||
|
||
```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
|
||
|
||
```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的配置
|
||
|
||
```json
|
||
{
|
||
"name": "admin-fe",
|
||
"version": "1.0.0",
|
||
"description": "积分系统管理端",
|
||
"scripts": {
|
||
"start": "npm run dev",
|
||
"dev": "vite",
|
||
"build": "vue-tsc && vite build"
|
||
},
|
||
...
|
||
}
|
||
|
||
```
|
||
|
||
## vite的配置
|
||
|
||
[https://cn.vitejs.dev/guide/](https://cn.vitejs.dev/guide/)
|
||
|
||
```js
|
||
import vue from '@vitejs/plugin-vue'
|
||
|
||
export default {
|
||
// 必须配置vue插件
|
||
plugins: [vue()]
|
||
}
|
||
```
|
||
|
||
## 路由
|
||
|
||
#### 当页面比较少时，可以考虑直接使用if判断限制不使用组件
|
||
|
||
```vue
|
||
|
||
<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](https://router.vuejs.org/zh/introduction.html)
|
||
|
||
```shell
|
||
// 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
|
||
```
|
||
|
||
显示路由及跳转
|
||
|
||
```vue
|
||
|
||
<template>
|
||
<router-view/>
|
||
<router-link to="要跳转的路径"></router-link>
|
||
</template>
|
||
```
|
||
|
||
### 前端分离的接口交互
|
||
|
||
#### 1.跨域
|
||
|
||
协议、访问域、端口只有一个不同都是跨域.
|
||
|
||
协议： http/https 端口： 冒号后面的数字
|
||
> 跨域除了上述原则之外，自定义请求头也会使跨域失败
|
||
|
||
#### 请求接口
|
||
|
||
|
||
### 数据状态 - **pinia**
|