使用HBuilderX快速搭建一个vue-cli项目

最新推荐文章于 2024-07-26 14:58:14 发布

03lx

最新推荐文章于 2024-07-26 14:58:14 发布

阅读量4.9k

点赞数 9

文章标签：前端 javascript elementui css

本文链接：https://blog.csdn.net/m0_69038398/article/details/131990955

版权

本文介绍了如何使用vue-cli创建Vue项目，包括安装前端环境node.js，创建项目，启动项目。然后讲解了如何创建组件，配置vue-router进行组件路由，以及如何引入和使用ElementUI来提升开发效率。最后展示了如何给组件添加事件处理，实现路由跳转。

摘要由CSDN通过智能技术生成

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板，预先定义

好的目录结构及基础代码。，

在创建vue-cli项目之前，需要安装前端运行环境node.js，详细安装过程在上一篇博客 http://t.csdn.cn/414XJ中，安装并测试成功后，就可以搭建vue项目了。

一、创建项目

等待创建，这个创建过程可能会比较长，也和网速有关，要耐心等待。

二、启动项目

(1).点击左下角终端按钮，启动终端。

(2).启动成功后，输入npm run serve命令，回车，启动项目。

(3).复制以下一个网址，到浏览器运行。

至此，一个vue-cli项目就搭建成功了！以下是关于项目的一些介绍。

三、项目详细介绍

1.创建组件(Login组件和Main组件)

右键点击components->新建->vue文件

同理，创建Main组件。

2.组件路由

由于创建好的组件不能直接通过文件名访问，因此需要借助vue中组件路由功能进行访问。

(1).下载安装vue router组件

vue router组件可以让vue把所有的组件管理起来，并为每一个组件配置一个映射地址。

启动终端，输入npm i vue-router@3.5.3命令。

(2).在src目录下创建一个router目录，并在该目录中创建一个index.js文件，在index.js文件中配置路由。

import Vue from 'vue';

/* 导入路由 */

import router from 'vue-router';

/* 导入注册我们自己的组件 */
import Login from "../components/Login.vue"; //组件路径
import Main from "../components/Main.vue";

Vue.use(router)

/* 定义组件路由 */
var rout = new router({
   routes: [
       {
           path: '/login', // 路由路径
           name: 'login',
           component: Login //组件名
       },
       {
           path: '/main',
           component: Main
       }
   ]
});