零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目

简介: 零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目

通过对《零基础学前端系列教程 | 和前端谈恋爱的第001–006天》的学习,我们已经基本掌握了HTML的核心标签,CSS的常见样式,对 Javascript 也略有接触。


零基础学前端系列教程 | 和前端谈恋爱的第001天——你好,前端

https://blog.csdn.net/weixin_41192489/article/details/122534575


零基础学前端系列教程 | 和前端谈恋爱的第002天——约会邀请

https://blog.csdn.net/weixin_41192489/article/details/122708030


零基础学前端系列教程 | 和前端谈恋爱的第003天——电影海报

https://blog.csdn.net/weixin_41192489/article/details/122730734


零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮

https://blog.csdn.net/weixin_41192489/article/details/122810383


零基础学前端系列教程 | 和前端谈恋爱的第005天——约会账单

https://blog.csdn.net/weixin_41192489/article/details/122847398


零基础学前端系列教程 | 和前端谈恋爱的第006天——了解喜好

https://blog.csdn.net/weixin_41192489/article/details/122873490

但真实开发中,应快速开发大型复杂项目的需求,我们会使用 Vue 框架Element UI 组件库,具体它们有多么方便和强大,在后续实战开发中慢慢体会吧!

争取在 100 步之内,搞定它们,一起加油吧!

下面立马开始第01步 —— 搭建开发环境

下载安装 vscode

https://blog.csdn.net/weixin_41192489/article/details/125647248

下载安装 node.js

https://blog.csdn.net/weixin_41192489/article/details/117979077

搭建 Vue 开发环境

https://blog.csdn.net/weixin_41192489/article/details/117979367

创建 Vue 项目

在要创建项目的文件夹中,鼠标右键快捷菜单打开终端

输入下方命令,按 Enter 键(简称:回车)

vue create ccweb

按向下的方向键 ,将 > 光标调整到 Manually select features 处回车

按向下的方向键 ,将 > 光标调整到 Router 处按空格键,实现选中的加 * 效果

继续按向下的方向键 ,将 > 光标调整到 Vuex 处按空格键,加 * 选中后回车

直接回车

输入 n 回车

直接回车

直接回车

按向下的方向键 ,将 > 光标调整到 In package.json 处回车

最后输入 n 回车即可,最终效果如下图:

安装 Element UI 组件库

使用 vscode 打开文件夹 ccweb,新建终端

在终端输入下方命令后回车

vue add element
  • 选择 Fully import 回车(默认已选中,直接回车)
  • 输入 n 回车
  • 选择 zh-CN 回车(默认已选中,直接回车)

修改默认文件

经过以上各安装步骤,已完成了项目的基础搭建,但有很多以后用不到的默认生成的文件可以清理掉,按下述步骤操作即可:

  • 删除以下文件
    src\assets\logo.png
    src\components\HelloWorld.vue
    src\views\About.vue
    src\views\Home.vue
  • 将 src\App.vue 修改为
<template>
  <div id="app">
    <el-collapse-transition>
      <router-view></router-view>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>
  • 新建文件 src\views\index\index.vue,内容为
<template>
  <div>首页</div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>
  • 新建文件 src\views\otherPages\404.vue,内容为
<template>
  <div>404 - 请求的页面不存在、已被删除或无法访问</div>
</template>

<script>
export default {};
</script>

<style scoped>
</style>
  • 将 src\router\index.js 修改为
import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "首页",
    component: (resolve) => require(["@/views/index/index.vue"], resolve),
  },
  // 404 表示请求的页面不存在、已被删除或无法访问
  {
    path: "/404",
    component: (resolve) => require(["@/views/otherPages/404.vue"], resolve),
  },

  // 未匹配到的路由,重定向到 /404
  { path: "*", redirect: "/404" },
];

const router = new VueRouter({
  routes,
});

export default router;

启动项目

方式一:点击 vscode 的NPM脚本面板中的启动按钮

方式二:在终端中执行命令

npm run serve

显示最终的项目运行地址,则表示项目启动成功!

访问项目

方式一:按住 Ctrl 单击项目地址

方式二:打开浏览器,地址栏中输入下方网址后回车

http://localhost:8080/#/

效果如下:

若访问其他地址,如

http://localhost:8080/#/404

可见网页的内容随网址的变化而变化

若输入其他在 src\router\index.js 中没有定义的路由(即网址),如

http://localhost:8080/#/login

则网址会迅速自动变化为 http://localhost:8080/#/404 ,因为我们进行了路由自适配,当访问未定义的路由时,就会自动跳转到 http://localhost:8080/#/404

其核心代码为 src\router\index.js 中的:

  // 404 表示请求的页面不存在、已被删除或无法访问
  {
    path: "/404",
    component: (resolve) => require(["@/views/otherPages/404.vue"], resolve),
  },

  // 未匹配到的路由,重定向到 /404
  { path: "*", redirect: "/404" },

这是 vue 插件 vue-router 的语法,现在简单了解即可,以后会慢慢详细讲解哈!

有基础的朋友,可以点击下方链接,先睹为快!

Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、r o u t e 、 route、route、router、路由过渡动画等

https://blog.csdn.net/weixin_41192489/article/details/117214343


目录
相关文章
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
318 12
|
3月前
|
存储 JavaScript 前端开发
element ui <el-date-picker> 设置展示当前月
在 Element UI 中,使用 `el-date-picker` 的 `value-format` 属性可将日期值格式化为指定字符串。设置 `type=&quot;month&quot;` 时,绑定值默认为 Date 对象,通过 `value-format=&quot;yyyy-MM&quot;` 可将其转为如 &quot;2023-05&quot; 格式,便于存储与处理。
776 0
|
5月前
|
人工智能 安全 程序员
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
用 Colab 和 ngrok 免费部署你的 Web UI 项目,随时随地访问!
|
8月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
476 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
8月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
241 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
8月前
|
前端开发 数据安全/隐私保护 开发者
FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
嗨,大家好,我是小华同学。今天为大家介绍一个轻量级、响应式的前端UI框架——FirstUI。它提供丰富的组件库,包括按钮、输入框、下拉菜单等,帮助开发者快速构建美观、功能丰富的用户界面。FirstUI的核心理念是“简单、快速、高效”,适合各种Web应用开发,如企业网站、电商平台和个人博客。其体积小、加载快,支持响应式设计,并且易于定制。FirstUI拥有活跃的社区支持,开发者可以轻松找到帮助并分享经验。欢迎关注我们,获取更多优质开源项目和高效工作学习方法。
288 0
|
11月前
|
UED
「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
本篇将带领你实现一个互动性十足的灯光控制小项目,用户可以通过点击按钮来控制灯光的开关。该项目将涉及状态管理、动态图片加载以及按钮交互,是学习鸿蒙应用开发的重要基础。
211 5
「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
|
12月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
873 0
|
5月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
165 15
|
5月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
151 11