使用 Vue 脚手架快速搭建导航网站

🎈 导航网址

• 利用 Vue 脚手架快速搭建一个导航网站项目，其实做自己的网站超简单
• 很多人觉得做网站很难，其实只要掌握了快速上手的方法，其实做个网站不过分分钟
• 当然，最爱的掘金，飞兔小哥 必须安排在第一位
• 点击直接预览网站最终效果：极客飞兔的网站导航

🎈 环境准备

• 本地需要安装 Node.js 环境
• npm 是 node 的包管理工具，安装好 node 后，npm 会默认安装
• 使用以下命令可以测试是否安装成功

> node -v
v16.14.2

> npm -v 
8.6.0

> vue --version
@vue/cli 5.0.4

🎈 创建项目

• 通过 vue create 项目名称 命令可以 创建项目
• 这里我们选择默认选项，也就是使用 Vue3 去构建项目
• 如果你熟悉 Vue2，可以按上下选择键去选择 Vue2，回车即可
• 等待项目 脚手架初始化 成功即可

vue create nav-web

🎈 脚手架目录结构

• 在执行完上面的命令之后，我们就创建了 nav-web 这个项目
• 使用 tree 命令，可以查看脚手架的 目录结构，这里只需要了解大概的即可

|-node_modules      # 项目依赖文件夹
|-dist              # 打包后资源存放文件夹，打包时自动创建
|-public            # 公共资源文件夹
|———favicon.ico     # 网站ico
|-src               # 项目核心文件夹
|———assets          # 静态资源文件夹
|———components      # 组件文件夹
|———App.vue         # 全局唯一根组件
|———main.js         # 程序入口文件
|-bable.comfig.js   # bable的相关配置文件
|-package.json      # 包管理工具
|-package-lock.json # 缓存文件
|-vue.config.js     # 可选配置文件

🎈 本地启动预览

• 通过 npm run serve 命令即可 预览脚手架 项目
• 会在本地启动一个 http 服务器，默认监听 8080 端口
• 只需要在浏览器中输入 http://localhost:8080/ 即可预览
• 默认最初始的页面仅仅是一个欢迎页，到这里其实我们的项目雏形已经完成了
• 我们只需要把这个页面改成自己的页面即可

cd nav-web

npm run serve

🎈 安装组件库

• 这里我们需要借用专为 Vue 开发的的网站快速成型组件库 element-ui
• 这个组件库可以快速帮我们构建网站，它提供了大量的页面设计组件，包括布局容器、按钮、表单、日期选择器、分页等。
• 我们只需要在项目文件夹中执行以下安装命令即可
• 这里贴上 vue 不同版本的安装命令，根据个人选择即可
• Vue2 安装命令

npm install element-ui --save

• Vue3 安装命令

npm install element-plus --save

🎈 注册服务

• 我们下载了 element-ui，但是想使用，还得注册服务
• 我们进入 main.js 中注册 element-ui 服务
• 这里选择 全局注册，当然你也可以选择 按需注册
• 按需注册主要是为了打包时候，让包更小，占用资源更少
• Vue2 注册方法

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; 

Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
})

• Vue3 注册方法

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

🎈 使用组件库

• 在 element-ui 文档中找到自己需要用到的组件
• 因为我们已经 全局注册 过，所以直接复制里面的代码到自己页面中即可
• 因为我们的导航网站需要用到 手风琴 效果，所以我们找到 手风琴组件，展开其中代码，复制即可

<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item title="一致性 Consistency" name="1">
      <div>
        与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
      </div>
      <div>
        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
      </div>
    </el-collapse-item>
    <el-collapse-item title="反馈 Feedback" name="2">
      <div>
        控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
      </div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </el-collapse-item>
    <el-collapse-item title="效率 Efficiency" name="3">
      <div>简化流程：设计简洁直观的操作流程；</div>
      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
      <div>
        帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
      </div>
    </el-collapse-item>
    <el-collapse-item title="可控 Controllability" name="4">
      <div>
        用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
      </div>
      <div>
        结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
      </div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

🎈 使用 ICON

• 我们的网站需要有分类，每个分类前都有一个 icon
• 我们如果想使用 element-ui 中的 icon，Vue2 只需要按照文档引入即可
• 但是 Vue3 使用图标，则需要 先下载和注册，方法如下
• ICON 服务安装

npm install @element-plus/icons

• ICON 服务注册

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons'

const app = createApp(App)

for (const name in ElIcons){
	app.component(name, ElIcons[name])
}

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

• ICON 使用
• 这里我们使用一个 Edit 图标

<el-icon><Edit /></el-icon>

<script setup>
</script>

<style lang="scss" scoped>
</style>

🎈 使用路由

• 我们的网站需要有多个页面，那最好就要使用路由功能
• 路由服务安装

npm install vue-router --save

• 路由服务创建
• 在 main.js 同级目录下新建 router.js，并添加以下内容

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

const routes = [
    // 自定义路由
    {
        path: '/hello',
        component: () => import('./views/PageHello.vue')
    },
    {
        path: '/word',
        component: () => import('./views/PageWord.vue')
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

• 路由服务注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

• 在APP.vue中使用路由服务

<template>
  <router-view></router-view>
</template>

<script>
</script>

<style>
</style>

🎈 使用链接组件

• 在导航网站里面，我们最常用的就是链接跳转了，而如何进行链接跳转
• 我们也需要用到 element-ui 中的 文字链接 组件
• 链接这里主要使用两种不同的类型，一种是 点击可跳转，一种是 不可跳转
• 另外可以通过 type 设置连接的 颜色类型，underline 可以设置 是否隐藏下划线

# 不可跳转链接
<el-link :underline="false" style="font-weight:bold;">热门</el-link>

# 点击可跳转链接
<el-link href="https://juejin.cn/" target="_blank" type="danger">掘金</el-link>

🎈 打包部署

• 在开发好导航网站后，我们需要将其打包并上线到服务器，即可对外开放啦
• 通过 npm run build 进行程序打包，打包之后的资源默认放在 dist 目录下
• 让后我们将 dist 中的代码放到服务器上即可
• 点击直接预览网站最终效果：极客飞兔的网站导航

# 打包命令
npm run build

正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。