前端项目搭建和基础配置

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

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

1. npm create vite

复制代码

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

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

1. # 安装依赖
2. npm install
3. # 运行
4. npm run dev

复制代码

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

二、常用配置

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

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

2、配置src项目目次别名

可以在引用组件过程中可以利用@进行引用，简化操纵，
起首安装对应的依赖组件

1. npm install @types/node

复制代码

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

2. import { defineConfig } from 'vite'
3. import vue from '@vitejs/plugin-vue'
4. import path from 'path'
6. // https://vite.dev/config/
7. export default defineConfig({
8.   plugins: [vue()],
9.   resolve: {
10.     alias: {
11.       '@': path.resolve(__dirname, './src')
12.     },
13.     dedupe: [
14.       'vue'
15.     ]
16.   }
17. })

复制代码

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

1. {
2.   "files": [],
3.   "references": [
4.     // { "path": "./tsconfig.app.json" },
5.     // { "path": "./tsconfig.node.json" }
6.   ],
7.   "compilerOptions": {
8.     "baseUrl": ".",
9.     "paths": {
10.       "@/*": ["./src/*"]
11.     }
12.   },
13.   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
14. }

复制代码

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

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

复制代码

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

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

3、添加路由组件

安装路由组件

1. npm install vue-router@4

复制代码

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

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

复制代码

在main.ts中注册路由组件

1. import { createApp } from 'vue'
2. import './style.css'
3. import App from './App.vue'
4. // 引入路由组件
5. import router from '@/router'
7. let app = createApp(App)
8. app.use(router)
9. app.mount('#app')

复制代码

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

home下的index.vue

1. <template>
2.     <div>
3.         这是Home页面
4.     </div>
5. </template>
7. <script setup lang="ts">
9. </script>
11. <style scoped>
13. </style>

复制代码

about下的index.vue

1. <template>
2.     <div>
3.         这是about页面
4.     </div>
5. </template>
7. <script setup lang="ts">
9. </script>
11. <style scoped>
13. </style>

复制代码

在路由配置中添加路由

1. import { createRouter, createWebHashHistory } from 'vue-router'  
2. // createRouter方法用于创建路由实例，可以管理多个路由
3. export default createRouter({
4.     history: createWebHashHistory(),
5.     routes: [
6.         // 路由页面
7.         {
8.             path: '/home',
9.             component: () => import('@/home/index.vue')
10.         },
11.         {
12.             path: '/about',
13.             component: () => import('@/about/index.vue')
14.         },
15.         {
16.             // 默认主页跳转路由
17.             path: "/",
18.             redirect: '/home'
19.         }
20.     ]
21. })

复制代码

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

1. <template>
2.   <div>
3.     <router-view />
4.   </div>
5. </template>
6. <script setup lang="ts"></script>
7. <style scoped></style>

复制代码

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

4、封装pinia

起首安装pinia

1. npm install pinia

复制代码

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

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

复制代码

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

代码如下：

1. import { defineStore } from "pinia";
3. const useUserStore = defineStore('user', {
4.     state: () => {
5.         return {
6.         }
7.     },
8.     actions: {
10.     },
11.     getters: {
13.     },
14. })
16. export default useUserStore;

复制代码

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

安装js-cookie模块

1. npm install --save js-cookie
3. npm install --save @types/js-cookie

复制代码

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

1. import  Cookies  from 'js-cookie'
3. const TokenKey = 'Admin-Token'
5. export const getToken = () => {
6.     return Cookies.get(TokenKey)
7. }
9. export const setToken = (token) => {
10.     return Cookies.set(TokenKey, token)
11. }
13. export const removeToken = (token) => {
14.     return Cookies.remove(TokenKey)
15. }

复制代码

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

1. {
2.   "files": [],
3.   "references": [
4.     // { "path": "./tsconfig.app.json" },
5.     // { "path": "./tsconfig.node.json" }
6.   ],
7.   // 作用：让@具有提示效果
8.   "compilerOptions": {
9.     "esModuleInterop": true,
10.     "baseUrl": ".",
11.     "paths": {
12.       "@/*": ["./src/*"]
13.     }
14.   },
15.   "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.vue"]
16. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。