前端web实战: 从0到1打造一个产品宣传网站首页

前言

很多时候我们想做一个网站宣传页。来宣传自己的产品和服务。但一直没法做出比较好的效果。

今天我将vue3+ts+element-ui为架构来实现一个仿站服务。便于后期拿来就用。
百川大模型这个站点就是今天的目标。

最终实现效果-魔法文档:

您将收获

从0到1构建前端项目的经验
项目架构思路和优雅的架构技巧
一份随时可以二次开发的源码
熟悉element-plus原生组件的熟练度

技术栈

Vue3
TypeScript
Element-Plus

环境准备

前端基础工具 nodejs
npm 的基本使用
package.json 的基础认知

Vue3+Vite项目构建

搭建vue3的vite项目

找一个目录: cd /xxx/xxx在终端执行如下命令创建项目

csharp 复制代码

//命令模版: npm init vite <project_name>
//执行如下指令创建项目
npm init vite  magic-doc-product

magic-doc-product是项目名称，你可以进行替换。

选择Framework->Vue

vbnet 复制代码

? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

variant选择TypeScript

sql 复制代码

? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    Customize with create-vue ↗
    Nuxt ↗

至此项目就创建成功了。通过VsCode工具打开，在终端执行如下命令便可运行看效果

arduino 复制代码

//安装依赖
npm install
//运行项目
npm run dev

演示效果

相关组件集成

element-plus安装

终端执行命令进行安装

css 复制代码

npm install element-plus --save

main.ts配置

javascript 复制代码

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

createApp(App).use(ElementPlus).mount('#app')

vite-env.d.ts 异常处理代码。取决于您的element-plus版本。

typescript 复制代码

/// <reference types="vite/client" />

declare module "*.vue" {
    import type { DefineComponent } from "vue";
    const vueComponent: DefineComponent<{}, {}, any>;
    export default vueComponent;
  }
   
  declare module 'element-plus/dist/locale/zh-cn.mjs';

element-plus图标配置

终端执行命令

ruby 复制代码

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

main.ts注册

typescript 复制代码

import * as ELIcons from '@element-plus/icons-vue';
const app = createApp(App); 
for (const name in ELIcons) {
    app.component(name, (ELIcons as any)[name]); 
}

安装路由组件router

终端执行命令

kotlin 复制代码

//cd切换到项目所在的目录
npm install vue-router@4
或
npm install vue-router@next

在src目录建立router文件夹，并建立index.ts文件。内容如下.用于配置路由信息

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import NotFound from '../components/NotFound.vue'


const routes = [
 {
    path: '/',
    name:'HelloWorld',
    component: HelloWorld
 },
 {
   //找不到匹配路由的 Path Match,另外这里使用的是 webHistory mode，URL 没有 # 了。
  path: '/:pathMatch(.*)*', 
  name: 'NotFound', 
  component: NotFound
},
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

NotFound.vue缺省路由页

xml 复制代码

<template>
    <div>Not Found 404</div>
</template>

<script  lang="ts">
export default {
 name: 'NotFound',
}
</script>

main.ts配置

php 复制代码

import router from './router' 
createApp(App).use(router).use(ElementPlus,{ locale }).mount('#app')

# path路径别名配置@

这项目配置省去我们寻找目录的麻烦，可以极大提高开发效率。

java 复制代码

//执行终端命令
npm install @types/node --save-dev

vite.config.ts

typescript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//以下两行代码是配置
import path from 'path'
const resolve = (dir:string) => path.resolve(__dirname, dir)


export default defineConfig({
  plugins: [vue()],
  resolve:{
    //这里是别名的映射规则
    alias:{
      '@': resolve('src'),
      '@components': resolve('src/components'),
      '@api': resolve('src/api')
    }
  }
})

ts.config

json 复制代码

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    //以下两条就是配置信息
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
	    "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

最后我们就可以这样操作了

javascript 复制代码

import router from '@/router'
import store from '@/store'
import i18n  from '@/lang'

布局容器

接下来使用布局容器完成骨架页面的架构
构建Index.vue页面。代码如下

xml 复制代码

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script  lang="ts" setup>

</script>
<style>

.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

main.ts中去掉./style.css文件

javascript 复制代码

import { createApp } from 'vue'
//删除这个样式文件。
// import './style.css'
import App from './App.vue'

在index.html 设置margin:0;

xml 复制代码

//不设置这个参数会出现padding效果
 <body style="margin: 0;">
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>

最后完成的效果如下图: