Vue 实战:自定义指令实现右键下拉菜单开发

6年全栈工程师,帝莎IT学院创始人,多年实战经验,曾担任过多个企业的技术支持...

文章正文

1. Vue CLI 快速搭建

在课程开始之前呢,我们来快速搭建一下环境,为了更好地运用于实际实战开发,我们使用最新 Vue CLI 来搭建,其中前提是 Node 和 npm 已经安装好(毕竟我们这是高阶实战课),我们直接进入主题:

安装 vue-cli

1. 打开 cmd,敲入命令:

npm install -g @vue/cli

安装之后,你就可以在命令行中访问 Vue 命令。你可以通过简单运行 Vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

我们运行一下查看当前 Vue 的版本号的命令来测试一下

vue --version

如果出现版本号就代表安装成功啦~

在这里插入图片描述

创建项目

运行以下命令来创建一个新项目:

vue create vue-demo

其中 vue-demo 是项目名称,你可以自定义。

运行之后会跳出让你选择 preset,我们选择默认 default 就可以了,回车。

在这里插入图片描述

当出现 Successfully created project vue-demo 就代表创建成功了。

在这里插入图片描述

取消 ESLint 校验代码

在项目根目录下创建一个 vue.config.js,添加如下代码:

module.exports = {
  lintOnSave: false
}

运行项目

将命令行切换到项目根目录,并运行项目:

// 切换到项目根目录
cd vue-demo
// 运行项目
npm run serve

当出现可以访问的 URL 时代表运行成功了,如下图:

在这里插入图片描述

打开浏览器,直接访问:http://localhost:8080/。

在这里插入图片描述

引入 Bootstrap 4 样式

为了美化我们的组件,选择引入 Bootstrap 4 的样式库,在引入之前我们先来清理一下多余代码和文件。

1. 打开 src/App.vue 文件,删除多余代码~

<template>
  <div id="app">
    Hello world~
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {

  }
}
</script>

<style>

</style>

保存文件后刷新一下页面,只留下干净的 Hellow world~

在这里插入图片描述

接下来,打开 public/index.html,在 里直接引入 Bootstrap4 样式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-demo</title>
    <!-- 引入bootstrap4 -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

如果当前的 Bootstrap 4 CDN 资源失效了,大家自己百度去获取有效的 Bootstrap 4 CDN 资源即可。

不熟悉 Bootstrap 4 样式的同学可以查看一下文档。

小试牛刀,写个右键区域和菜单样式

在这里插入图片描述

代码如下:

<template>
  <div id="app">
      <!-- 右键菜单 -->
      <!-- 蒙版:用于监听用户其他点击操作时关闭当前菜单 -->
      <div id="move_menu" class="position-f
                        
作者正在撰写中...
隐藏内容 支付可见
内容互动
写评论
加载更多
评论文章
¥1.99 购买
× 订阅 Java 精选频道
¥ 元/月
订阅即可免费阅读所有精选内容