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

更新时间：2023年04月17日 11:28:11 作者：小斯要觉觉

这篇文章主要介绍了vue-cli(vue脚手架方式搭建),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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)

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

第二步:定义组件路由

export default rout;

第三步:导出路由对象

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)

到此这篇关于vue-cli(vue脚手架方式搭建)的文章就介绍到这了,更多相关vue-cli脚手架搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue子组件如何修改父组件数据的方法及注意事项
这篇文章主要介绍了Vue子组件如何修改父组件数据的方法及注意事项,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue中的过滤器及其时间格式化问题
这篇文章主要介绍了vue中的过滤器及其时间格式化,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
关于vue3编写挂载DOM的插件问题
这篇文章主要介绍了vue3编写挂载DOM的插件的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-07-07
在vue-cli脚手架中配置一个vue-router前端路由
这篇文章主要给大家介绍了在vue-cli脚手架中配置一个vue-router前端路由的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-07-07
vue中keep-alive组件使用和一些基础配置方法
本文主要介绍了Vue中keep-alive组件的使用方法和一些基础配置,keep-alive是Vue中的一个抽象组件,可以缓存组件实例,提高性能,本文给大家介绍vue中keep-alive组件使用和一些基础配置方法,感兴趣的朋友一起看看吧
2024-10-10
vue实现列表拖拽排序的功能
这篇文章主要介绍了vue实现列表拖拽排序的功能，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
2020-11-11
vue3 element-plus 实现表格数据更改功能详细步骤
这篇文章主要介绍了vue3 element-plus实现表格数据更改功能,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
使用Vue3和ApexCharts实现3D径向条形图的代码
径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型,它在显示进度、完成率或其他类似度量时非常有用,本文给大家介绍了使用Vue3和ApexCharts实现3D径向条形图,感兴趣的小伙伴可以参考阅读下
2024-06-06
使用Vue 自定义文件选择器组件的实例代码
这篇文章主要介绍了使用Vue 自定义文件选择器组件的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-03-03