前端项目搭建和基础配置

这个模块主要是介绍从零开始搭建项目的一些操作，包含一些前端常用的配置，这里只是一部分，会在后续的文章中逐步进行补充和完善

一、创建项目

在项目路径下使用以下命令生成前后端项目

npm create vite

输入项目名称，框架选择Vue，然后选择TypeScript

生成的项目执行以下命令进行运行

# 安装依赖
npm install
# 运行
npm run dev

然后打开浏览器访问生成的地址，能打开如下页面即可

二、常用配置

1、设置打开启动服务后自动打卡浏览器

找到项目的package.json文件，修改启动脚本，增加–open参数，如下图，重启后即可自动打开浏览器页面

2、配置src项目目录别名

可以在引用组件过程中可以使用@进行引用，简化操作，

首先安装对应的依赖组件

npm install @types/node

然后在vite.config.ts配置文件中新增如下内容：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    },
    dedupe: [
      'vue'
    ]
  }
})

在tsconfig.json文件中增加如下内容：

{
  "files": [],
  "references": [
    // { "path": "./tsconfig.app.json" },
    // { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
}

vite-env.d.ts文件中增加如下内容：

// 配置这个文件是 解决错误：找不到模块“@/views/Login.vue”或其相应的类型声明。ts(2307)
// 这段代码告诉 TypeScript，所有以 .vue 结尾的文件都是 Vue 组件，可以通过 import 语句进行导入。这样做通常可以解决无法识别模块的问题。
declare module "*.vue" {
    import { Component } from "vue";
    const component: Component;
    export default component;
  }

如下图所示，如果references中的内容报错，重启vscode即可

然后将APP.vue文件中引用的HelloWorld.vue改造成从@符号中读取，重启任务依然可以访问

3、添加路由组件

安装路由组件

npm install vue-router@4

在项目src目录下新建router文件夹，并创建index.ts文件，并添加如下内容

import { createRouter, createWebHashHistory } from 'vue-router'
// createRouter方法用于创建路由实例，可以管理多个路由
export default createRouter({
    history: createWebHashHistory(),
    routes: [
      // 路由页面内容
        
    ]
})

在main.ts中注册路由组件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入路由组件
import router from '@/router'

let app = createApp(App)
app.use(router)
app.mount('#app')

测试路由功能，在src下新建两个文件夹，分别是home和about，并分别创建两个index.vue文件，内容随便写，区分开即可

home下的index.vue

<template>
    <div>
        这是Home页面
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

about下的index.vue

<template>
    <div>
        这是about页面
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

在路由配置中添加路由

import { createRouter, createWebHashHistory } from 'vue-router'  
// createRouter方法用于创建路由实例，可以管理多个路由
export default createRouter({
    history: createWebHashHistory(),
    routes: [
        // 路由页面
        {
            path: '/home',
            component: () => import('@/home/index.vue')
        },
        {
            path: '/about',
            component: () => import('@/about/index.vue')
        },
        {
            // 默认主页跳转路由
            path: "/",
            redirect: '/home'
        }
    ]
})

修改App.vue文件删除其他组件并添加路由组件

<template>
  <div>
    <router-view />
  </div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

访问主页即可跳转到home页面

4、封装pinia

首先安装pinia

npm install pinia

在src下新建store文件夹，并新建index.ts，代码内容如下：

import { createPinia } from "pinia"; 
export default createPinia();

由于我们的store要分模块存储数据，因此在store文件夹下新建modules文件夹，新建一个user.ts文件来存放用户相关的数据，如下图所示

代码如下：

import { defineStore } from "pinia"; 

const useUserStore = defineStore('user', {
    state: () => {
        return { 
        }
    },
    actions: { 

    },
    getters: {

    },
})

export default useUserStore; 

5、封装操作操作token工具类util

安装js-cookie模块

npm install --save js-cookie
 
npm install --save @types/js-cookie

在utils下新建auth.ts文件内容如下:

import  Cookies  from 'js-cookie'

const TokenKey = 'Admin-Token'

export const getToken = () => {
    return Cookies.get(TokenKey)
}

export const setToken = (token) => {
    return Cookies.set(TokenKey, token)
}

export const removeToken = (token) => {
    return Cookies.remove(TokenKey)
}

如果上面的代码第一行Cookies报红，就在tsconfig.json 中设置 compilerOptions.esModuleInterop 为 true即可

{
  "files": [],
  "references": [
    // { "path": "./tsconfig.app.json" },
    // { "path": "./tsconfig.node.json" }
  ],
  // 作用：让@具有提示效果
  "compilerOptions": {
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
}