ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端项目搭建和基础配置 [打印本页]
作者: 西河刘卡车医    时间: 2025-1-18 11:30
标题: 前端项目搭建和基础配置
这个模块主要是介绍从零开始搭建项目的一些操纵，包含一些前端常用的配置，这里只是一部分，会在后续的文章中逐步进行补充和美满
一、创建项目

在项目路径下利用以下命令生成前后端项目
  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4