vue-cli(vue脚手架方式搭建)

最新推荐文章于 2025-05-27 10:55:28 发布

小斯要觉觉

最新推荐文章于 2025-05-27 10:55:28 发布

阅读量385

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_56587881/article/details/129341755

版权

文章讲述了如何安装和配置Node前端环境，使用HbuilderX创建Vue-cli项目，接着详细说明了vue-router的安装和配置，包括定义组件路由并导出。此外，还介绍了ElementUI前端框架的安装步骤以及在main.js中的导入和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先安装node前端环境,可以帮助我们去下载其他的组件

下载完成后,去自己的电脑找到node的文件路径,复制去配置环境变量,在path中配

环境搭配完成后,在cmd中进行测试 ,输入一下两个命令进行测试

2.在hbuilderX中创建一个vue-cli项目(标准的前段项目)

3.组件路由

(1)安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。

打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

(2) 第一步:

在src中创建一个文件夹router,并在该文件夹中建index.js,导入Vue,router和其他组件

格式(import Vue from"vue"),其中router和ElementUI需要Vue.use(router)

import Vue from "vue";
import router from "vue-router";
Vue.use(router);

import Login from "../Login.vue";

import Main from "../Main.vue";

第二步:定义组件路由

var rout = new router({
	routes:[
		{
		path:'/login',
		name:'Login',
		component:Login
	    },
	    {
		path:'/main',
		name:'Main',
		component:Main
	    }
	]
});

第三步:导出路由对象

export default rout;

在默认的App.vue中

4.使用

5.打包

npm run build

ElementUI前端框架

1.安装,在终端输入命令npm i element-ui -S

2.在main.js中导入ElementUI框架

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)