Vue.js安装及引入iview组件库

Vue安装

在项目中使用Vue的方式有两种,一种是通过CDN引入Vue.js

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

但是这种方式不适合用于较大的项目

使用NPM安装的方式更适合用于构建大型项目,NPM 能很好地和webpack或Browserify模块打包器配合使用,同时也提供了配套工具来开发单文件组件

首先需要安装npm和Node环境,直接官网下载安装就行,我使用的mac一行解决了

brew install node

对了,因为未解之谜,所以记得将npm的镜像换成淘宝的镜像

然后使用NPM安装Vue

npm install vue

然后使用npm安装vue-cli,这是Vue官方为单页面应用 (SPA) 快速搭建繁杂的脚手架

npm install -g vue-cli

安装完CLI后,就可以使用Vue的命令来创建项目了,如直接使用webpack来创建my-project项目就使用如下命令

vue init webpack my-project

也可以使用别的打包工具

由于idea本身已经集成了一堆框架的使用,所以也可以直接在idea里创建项目,填写一些项目信息,完全的傻瓜式配置

引入iview

引入iview也是一样可以使用CDN和NPM

CDN方式:

<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<!-- import iView -->
<script src="//unpkg.com/iview/dist/iview.min.js"></script>

NPM方式:

使用命令行

npm install iview --save

然后打开刚才创建的Vue项目,在main.js引入iview

import iView from 'iview'
import 'iview/dist/styles/iview.css'


Vue.use(iView)

然后就可以根据需要引入想用的组件了

扫码关注我的微信公众号:Java架构师进阶编程  获取最新面试题,电子书

专注分享Java技术干货,包括JVM、SpringBoot、SpringCloud、数据库、架构设计、面试题、电子书等,期待你的关注!

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

方木丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值