环境准备

前期需要准备好 Node 相关环境。因为本项目采用的是 Vue3/Vite 版本，所以推荐使用 Node 18 以上，这里使用了 Node 20.15.1。
检查 Node 环境是否是 18 以上，如果不是，则需要到官方网站下载：https://nodejs.cn/download/

node -v


默认情况下，镜像地址为官方地址，下载依赖很慢，所以我们需要配置好淘宝镜像，方便后续可以加快依赖的安装与下载。

npm config set registry https://registry.npmmirror.com/

查看镜像使用情况

npm config get registry

创建并配置项目

创建项目

安装Vite

我们使用Vite来创建项目，Vite是一个快速的前端构建工具，支持现代JavaScript框架如Vue、React、Svelte等。

在创建Vite项目之前，需要先安装Vite。你可以使用以下命令来全局安装Vite:

npm install -g create-vite

或者使用yarn或pnpm

yarn global add create-vite
# 或
pnpm add -g create-vite

创建项目

我们这边使用JavaScript，TypeScript的难度较大，所以不好使用模版来创建项目。

npm create vite@latest zhihu-web

然后选择Vue框架和JavaScript语言

项目启动和开发

按照上面的指示，分别依次输入：

cd zhihu-web
npm install
npm run dev

就会跳到如下界面：

点击链接，跳转到初始页面，可以看到项目已经可以成功启动啦！

配置项目

基础配置

配置端口号

打开vite.config.js文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vite.dev/config/
export default defineConfig({
  server: {
    open: true, // 自动打开浏览器
    port: 8088,
  },
  plugins: [vue()],
});
配置根目录

方便我们后面写文件路径的时候不用谢很多的"…/…/“，而只用”@"就可以代替根目录。

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

// https://vite.dev/config/
export default defineConfig({
  server: {
    open: true, // 自动打开浏览器
    port: 8088,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [vue()],
});
项目logo修改

在iconfont中选择自己喜欢的图标，复制svg代码，替换掉<font style="color:#ED740C;">public/vite.svg</font>的文件内容，再保存一下index.html

index.html内容也可以改一下啊

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>知乎</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

最后运行的效果

安装Vue-Router并配置

使用VS Code打开创建好的项目，输入如下命令安装路由

npm install vue-router

查看package.json可以看到路由的版本，下面的配置也是同样的

  • 配置Vue Router : src下创建 router/index.js 文件。
  • 我们这边暂且设置根路径为App.vue,使用动态导入（import（））语法，书写更加简洁。
import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("../App.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;
  • 在 main.js 中引入router
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

src下新建views目录，用来存放页面组件。

安装Tailwind CSS并配置

Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。

TailwindCSS 是一种现代的前端样式框架，它以“原子化”设计理念为核心，通过提供一系列可重复使用的CSS 类，帮助开发人员更快速地构建美观且响应式的用户界面。

安装 Tailwind CSS 并进行初始化

通过 npm 安装 <font style="color:rgb(77, 77, 77);">tailwindcss</font>，然后通过初始化命令创建你自己的 <font style="color:rgb(77, 77, 77);">tailwind.config.js</font> 配置文件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
配置模板文件的路径

在 tailwind.config.js 配置文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
export default {
  //配置tailwind的应用范围
  //在这里我们配置了tailwind应用到index.html文件和src目录下所有.vue和.js文件
  content: ["./index.html", "./src/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
创建 src/css/tailwind.css 文件

通过@tailwind指令添加每一个Tailwind功能模块。

@tailwind base;
@tailwind components;
@tailwind utilities;
在main.js 文件中引入 tailwind.css
import "@/css/tailwind.css";
插件推荐：Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 是 Tailwind CSS 官方推荐的 VSCode 插件，它为开发者提供了以下强大的功能：

  1. 类名自动补全：在输入 Tailwind 类名时自动提示所有可能的类。
  2. 实时预览：鼠标悬停在类名上时会显示该类的 CSS 样式。
  3. 错误提示：如果输入了不存在的 Tailwind 类名，插件会立即提示错误，减少手动检查的麻烦。

原文链接：https://blog.csdn.net/lph159/article/details/143844380

使用

简单修改一下App.vue 中的图片样式

运行项目，可以看到如下的效果

安装Element-Plus并配置

一个 Vue 3 UI 框架 | Element Plus

  • 安装
npm install element-plus --save
  • main.js 中完整导入
...
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount("#app");

安装Pinia并配置

  • 安装

在项目目录下，运行以下命令安装Pinia

npm install pinia
  • 引入Pinia

main.js中，引l入Pinia并使用

...
// 引⼊ Pinia
import { createPinia } from "pinia";
// 实例化 Pinia
const pinia = createPinia();

const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.use(pinia);
app.mount("#app");

安装Axios并配置

  • 安装
npm install axios
  • 全局配置 Axios 的基础选项

src新建api目录，新建axioslnstance.ts文件，来全局引入axios并配置属性，baseURL,超时时间等，然后导出axios实例：

//  src/api/axiosInstance.ts
import axios from "axios";
// 创建 Axios 实例
const api = axios.create({
  baseURL: "https://api.zhihu.com", // 基础 URL
  timeout: 5000, // 请求超时时间5秒
});
export default api; // 导出封装后的 Axios 实例

项目框架初始化

views中暂且划分模块如下，删除 HelloWorld.vue ,删除 style.css ，删除 main.js 中引入的 style.css

定义页面对应的路由router/index.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    redirect: "/login", //重定向到登录页
  },
  {
    path: "/login", //登录页
    name: "login",
    component: () => import("../views/login/index.vue"),
  },
  {
    path: "/index", //首页
    name: "index",
    component: () => import("../views/index/index.vue"),
    children: [
      {
        path: "/index/interest", //关注页
        name: "interest",
        component: () => import("../views/index/interest/index.vue"),
      },
      {
        path: "/index/recommend", //推荐页
        name: "recommend",
        component: () => import("../views/index/recommend/index.vue"),
      },
      {
        path: "/index/hotlist", //热门页
        name: "hotlist",
        component: () => import("../views/index/hotlist/index.vue"),
      },
      {
        path: "/index/vedio", //视频页
        name: "vedio",
        component: () => import("../views/index/video/index.vue"),
      },
    ],
  },
  {
    path: "/education", //知乎知学堂页
    name: "education",
    component: () => import("../views/education/index.vue"),
  },
  {
    path: "/waiting", //等你来答页
    name: "waiting",
    component: () => import("../views/waiting/index.vue"),
  },
  {
    path: "/firsthand", //知乎直答页
    name: "firsthand",
    component: () => import("../views/firsthand/index.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

更改App.vue中的内容

<template>
  <nav><router-link to="/"></router-link></nav>
  <router-view></router-view>
</template>

运行项目自动重定向到登录页

# 前端
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

工业物联网时序数据库选型指南：Apache IoTDB 技术架构与实战解析

avatar 魔乐社区
cover

面向未来的工业大数据架构：时序数据库（TSDB）选型避坑指南和国产化思考

avatar 魔乐社区

React 性能优化教程：useMemo 和 useCallback 的正确使用方式

1. useMemo 缓存值，为了解决昂贵计算和引用稳定性问题。2. useCallback 缓存函数引用，为了解决函数传递导致的重复渲染问题。3. 不要为了“看起来高级”滥用它们——衡量成本和收益才是工程思维。

avatar 魔乐社区