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、数据库、架构设计、面试题、电子书等，期待你的关注！