Vue项目的开发步骤(vue+iview 本人的总结)

本文总结了Vue项目开发的主要步骤,包括新建项目并安装必要的依赖,讲解了如何在main.js中配置,接着介绍了Vue组件和路由的使用,虽然未涉及vue-resource。
摘要由CSDN通过智能技术生成

1、新建项目 安装依赖包

	(1)	vue init webpack website	创建项目website
	(2)cd website		进入到项目目录
	
	(3)cnpm install		安装依赖包
	
	(4)路由	:
		安装		cnpm install vue-router
		使用		import VueRouter from 'vue-router'
		  Vue.use(VueRouter)
	
	~~(5)Vue-resource【注意,官网已经停止了对vue-resource的维护了,建议使用axios】
		安装		cnpm install vue-resource --save-dev
		使用		import VueResource from 'vue-resource'
		 Vue.use(VueResource)~~ 
	(6)axios 
		安装		cnpm install axios
		引用		import  axios from 'axios'在这里插入代码片
	

		(7) 使用基于vue的iView框架
		安装		cnpm install iview --save
		使用		import iView from 'ivew';
		import 'iview/dist/styles/iview.css';		//iView样式
		Vue.use(iView);

·main.js
在这里插入图片描述

2、Vue组件的使用

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在你的 Vue3 项目中安装 iview 组件库,可以使用以下命令: ``` npm install iview --save ``` 然后你需要在你的 Vue3 项目中引入 iview 组件库。在你的 main.js 文件中添加以下代码: ```javascript import { createApp } from 'vue' import App from './App.vue' import iView from 'iview'; import 'iview/dist/styles/iview.css'; createApp(App).use(iView).mount('#app') ``` 接着,你需要创建两个组件来展示各自的树。你可以使用 iview 组件库中的 Tree 组件来展示树。例如,你可以创建以下两个组件: ```vue <template> <div> <i-tree :data="treeData" :options="treeOptions"></i-tree> </div> </template> <script> export default { name: 'TreeA', data() { return { treeData: [ { title: 'Node 1', expand: true, children: [ { title: 'Child 1', expand: true, children: [ { title: 'Grandchild 1' }, { title: 'Grandchild 2' } ] }, { title: 'Child 2' } ] } ], treeOptions: { showCheckbox: true } } } } </script> ``` ```vue <template> <div> <i-tree :data="treeData" :options="treeOptions"></i-tree> </div> </template> <script> export default { name: 'TreeB', data() { return { treeData: [ { title: 'Node 1', expand: true, children: [ { title: 'Child 1' }, { title: 'Child 2' } ] } ], treeOptions: { showCheckbox: false } } } } </script> ``` 最后,你需要在你的路由中定义这两个组件的路由。例如: ```javascript import { createRouter, createWebHistory } from 'vue-router' import TreeA from './components/TreeA.vue' import TreeB from './components/TreeB.vue' const routes = [ { path: '/treeA', component: TreeA }, { path: '/treeB', component: TreeB } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 这样,你就可以在你的应用程序中访问这两个组件并展示各自的树了。例如,你可以在你的应用程序中使用以下链接来访问这两个组件: ``` http://localhost:8080/#/treeA http://localhost:8080/#/treeB ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值