VUE2速成-5（插件及打包）

文章目录

• ​​一、Vue的插件大全​​
• ​​二、Vue插件举例​​

• ​​1. 轮播图插件（vue-awesome-swiper）​​
• ​​2. UI组件库（Element UI）​​

• ​​三、vue-cli打包部署​​

一、Vue的插件大全

先到 https://cn.vuejs.org/v2/guide/

跳转到github上后，查看Components & Libraries部分。

二、Vue插件举例

1. 轮播图插件（vue-awesome-swiper）

参考：https://github.com/surmon-china/vue-awesome-swiper

安装插件及具体使用方式可参考github上的说明。

2. UI组件库（Element UI）

官网：https://element.eleme.cn/#/zh-CN

该组件库是外卖系，目前Vue使用该组件库是比较多的。

参考：https://element.eleme.cn/#/zh-CN

安装及使用

vue add element
选择Import on demand
选择zh-CN

安装后新增的文件

查看完整组件列表和引入方式可以去：

​​ https://element.eleme.cn/#/zh-CN/component/quickstart​​ 可以先把所有组件都引入，然后再删除不需要的组件。

这个按钮不用管（在App.vue中自动引入），接下来引入插件即可。

使用时注意“单根”原则。

三、vue-cli打包部署

• 可以参考：https://cli.vuejs.org/zh/
  然后查看“指南”部分，找到“构建目标”。
• 打包命令

npm

• 生成打包后的发布目录dist/



• 打包还需要注意的问题：

1. 路径问题
   默认打包完成后项目必须放在web服务器的根目录下（Document Root）。如果不想把打完的包放在服务器的根目录下，那么需要进行配置。

在开发项目的根目录新建文件vue.config.js
（详细可以参考——配置参考）

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/' //设置这个目录
    : '/'
}

2. 发布预览
   dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器，例如 serve：

npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题