如何在vue里面引用iview

最新推荐文章于 2025-07-18 19:30:13 发布

qq_25462315

最新推荐文章于 2025-07-18 19:30:13 发布

阅读量1.1k

点赞数 1

分类专栏： vue

vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何从零开始搭建基于Vue和Webpack的前端开发环境，包括安装Node.js、npm，使用vue-cli创建项目，配置Webpack，以及安装和使用iView组件库。

1.安装node环境 webpack
node.js环境（npm包管理器）
npm install --save-dev webpack

//安装前需要配置node及npm环境
//全局安装 vue-cli 如果本机以前安装过  就无须执行避免重复安装 
 npm install --global vue-cli
//创建一个基于 webpack 的vue项目
vue init webpack firstApp // 后续按回车安装默认即可
//进入到创建的vue项目
cd firstApp
//安装依赖
npm install
//启动项目
npm run dev //启动成功 http://localhost:8080 即可打开测试首页

执行命令 vue init webpack firstApp

? Target directory exists. Continue? Yes
  A newer version of vue-cli is available.

  latest:    2.9.6
  installed: 2.9.3

'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���
? Project name firstApp
? Project description firstApp
? Author chen
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "firstApp".

执行命令 npm run dev

> vue-iview-master@1.0.0 dev G:\Git\public\vue-iview-master
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 4029ms                                                           12:36:44

 I  Your application is running here: http://localhost:8080

安装iview

npm install --save iview

引入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' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式

Vue.config.productionTip = false
Vue.use(iView) //使用iview组件 

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

转载来自