当前位置:首页 > VUEJS > iview > 正文内容

Vue高效UI组件之iview框架

anan1年前 (2021-07-29)iview1483

创建Vue项目 以及引入Iview作者:Anne、

Vue官方文档:

/

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$ cd my-project$ npm install$ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法。

创建Vue项目过程

$ vue init webpack vue-iview? Project name vue-iview? Project description A Vue.js project? Author yourname <youremail@example.com>? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "vue-iview". To get started: cd vue-iview npm install npm run dev Documentation can be found at 安装依赖

引入iview

src/main.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview'import 'iview/dist/styles/iview.css' // 使用 CSSVue.config.productionTip = falseVue.use(iView)/* eslint-disable no-new */new Vue({ el: '#app', router, template: '<App/>', components: { App }})在main.js中添加了

import iView from 'iview'import 'iview/dist/styles/iview.css' // 使用 CSSVue.use(iView)iview 安装

$ cnpm install --save iview使用iview 组件

src/components/msg.vue

<template> <div> 查看消息 <input type="text"> </div></template><script>export default { name: 'Msg'}</script><style scoped></style>src/main.js

import Vue from 'vue'import App from './App'import router from './router'import iView from 'iview'import axios from 'axios'import 'iview/dist/styles/iview.css'import 'iview/dist/iview.min.js'import { Button,Modal } from 'iview'Vue.component('Modal', Modal)Vue.config.productionTip = falseVue.use(iView)// 设置基础URLaxios.defaults.baseURL = ""urlencoded';Vue.prototype.$axios = axiosnew Vue({ el: '#app', router, components: { App }, template: '<App/>'})

打赏
版权声明:所有来源为第三方内容,若本站收录的文章无意侵犯了贵司版权,请给下面邮箱地址来信,我们会及时处理和回复,谢谢。

管理员邮箱:42004990@qq.com

微信公众号

分享给朋友:

相关文章

你为什么选择React而不选择Vue?

你为什么选择React而不选择Vue?

前端领域,选择框架是根据使用场景、业务需求、技术实现等综合因素考虑的,选择最适合的才能发挥最大效果。 目前前端三大主流框架有:React、Vue、Angular,他们在各自特定的场景下使用都非常出色。...

2020年 16 个最有用的 Vue UI库

2020年 16 个最有用的 Vue UI库

本文主要跟大家分享一些 Vue 的 UI 库,这些库都是 github 高星的库,废话不多说,我们一起来看看。 1. Vuetify (⭐️ 24k)网站:/ github: Vuetify 是一个...

Vue被淘汰了吗?

Vue被淘汰了吗?

我今天才开始去了解Vue-cli 3.0,着手写了一个demo下来发现,简直惊为天人,抛弃了2.x版本繁琐的webpack配置,现在的可以说简洁明了,你甚至不用写vue.config.js也行,空着呗...

有了Vue + Nginx,为什么还要Node?

有了Vue + Nginx,为什么还要Node?

首先概念先捋清楚:Vue是前端开发框架(类似的框架还有React、Angular等),Nginx是Web应用服务器(类似的Web服务器还有Apache、Tomcat等),Node是基于Chrome V...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。