## 初始化项目
```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
Title
```
## main.ts
```ts
import {createApp, defineComponent} from 'vue';
const App = defineComponent({
template: `vue + vite
`
})
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
vue3 + vite + {{ username }} {{ currentPath }}
```
#### 页面较多 则使用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
```
### 前端分离的接口交互
#### 1.跨域
协议、访问域、端口只有一个不同都是跨域.
协议： http/https 端口： 冒号后面的数字
> 跨域除了上述原则之外，自定义请求头也会使跨域失败
#### 请求接口
### 数据状态 - **pinia**