npm install vue-table-with-tree-grid --save

import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)
 

npm install vue2-editor --save-dev

npm install wangeditor --save-dev

npm install axios --save-dev

安装样式

less

npm install less less-loader --save-dev

scss

npm install sass node-sass sass-loader -D

全局引用sass

npm install sass-resources-loader --save-dev

npm install vue-style-loader --save-dev

build/utils.js文件的exports.cssLoaders函数内添加如下代码:

exports.cssLoaders = function (options) {
// ... function generateSassResourceLoader () {
var loaders = [
cssLoader,
postcssLoader, px2remLoader, // 若需要则加上这一行,不用就不加
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/common/scss/variable.scss'),
path.resolve(__dirname, '../src/common/scss/mixins.scss')
]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
} // ... return {
// ...
sass: generateSassResourceLoader(), // 替换原来的,下同
scss: generateSassResourceLoader(),
// ...
}
}

如果需要修改iview的主题,这部分可以做如下修改

function generateSassResourceLoader () {
var loaders = [
cssLoader,
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
},
{
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/less/_theme.less'),
path.resolve(__dirname, '../src/assets/less/_mixins.less')
]
}
}
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}

引入iview部分做如下修改

import Vue from 'vue'
import 'iview/dist/styles/iview.css'
import '../../my-theme/index.less'

其它参考官方文档即可.可参考文章: 文章一 文章二

分离css打包

npm install extract-text-webpack-plugin --save-dev

参考:https://www.jianshu.com/p/439764e3eff2

引用cookie

npm install vue-cookie --save

main.js文件中修改

import VueCookie from 'vue-cookie'
Vue.use(VueCookie)
使用

this.$cookie
 
axios 封装
npm install axios --save

工具函数
npm install --save lodash

本地缓存插件
npm install lockr --save-dev

CORS跨域访问解决技术

https://www.cnblogs.com/loveis715/p/4592246.html

http://www.php.cn/js-tutorial-386108.html

滚动条

npm install vue-scroll --save-dev
import Vue from 'vue';
import vuescroll from 'vuescroll';
import 'vuescroll/dist/vuescroll.css'; Vue.use(vuescroll);

http://vuescrolljs.yvescoding.org/zh/guide/getting-started.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
http://vuescrolljs.yvescoding.org/zh/guide/slot.html#%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0-%E4%B8%8A%E6%8E%A8%E5%8A%A0%E8%BD%BD

第三方插件分离打包

1.webpack.base.conf.js中添加入口(以echarts为例说明)

  entry: {
    app: ['babel-polyfill', './src/main.js'],
    echarts: ['echarts'] // 添加这一行
  }
2.webpack.prop.conf.js中分离打包(以echarts为例说明)
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        module.resource.indexOf(
          path.join(__dirname, '../node_modules')
        ) === 0
      )
    },
    chunks: ['app']
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'echarts',
    chunks: ['vendor'],
    minChunks (module) {
      return (
        module.resource &&
        /\.js$/.test(module.resource) &&
        (/echarts/).test(module.resource)
      )
    }
  }),
这样就可以将echarts从vendor中拆分出来了,vendor和echarts的体积都不会很大,速度不会受到很大的影响
 
 

webpack打包vue项目之后生成的dist文件该怎么启动运行

2. 安装express-generator生成器

执行  $ npm install express-generator -g  进行安装

3. 创建一个express项目

执行  $ express expressDemo (expressDemo是项目名)

4. 进入expressDemo目录,安装项目依赖

$ cd expressDemo

$ npm install

5. 把dist目录下的所有文件复制到express项目的public文件夹下

然后运行 $ npm start 启动expressDemo

打开浏览器,输入 http://localhost:3000 , 就可以看到效果了

参考:https://blog.csdn.net/u014054437/article/details/79981307

http://webpack.css88.com/guides/asset-management.html

vue爬坑之路(插件安装)的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  3. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  4. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  5. Vue 爬坑之路—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios  ...

  6. Vue 爬坑之路(八)—— 使用 Echarts 创建图表

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...

  7. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  8. (转)Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一. ...

  9. Vue 爬坑之路(四)—— 与 Vuex 的第一次接触

    在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...

随机推荐

  1. Java中Date类型与String 类型之间的互相转换

    Java中String类型和Date类型之间的转换 我们在注册网站的时候,往往需要填写个人信息,如姓名,年龄,出生日期等,在页面上的出生日期的值传递到后台的时候是一个字符串,而我们存入数据库的时候确需 ...

  2. Linux core 文件浅析

    浅析Linux下core文件 当我们的程序崩溃时,内核有可能把该程序当前内存映射到core文件里,方便程序员找到程序出现问题的地方.最常出 现的,几乎所有C程序员都出现过的错误就是"段错误& ...

  3. 第46篇-signature_handler与result_handler

    在之前介绍为native方法设置解释执行的入口时介绍过,当Method::native_function为空时会调用InterpreterRuntime::prepare_native_call()函 ...

  4. 解决电脑连接 iPhone 热点没有 IPv6地址的问题

    问题描述: 初入 iPhone ,电脑使用 ios 共享的热点无法连接 IPv6 地址.但是,直接在 iPhone 上面打开 https://www.test-ipv6.com/ 完美支持 IPv6 ...

  5. Spring事务什么时候会失效?

    面试官:Spring事务什么时候会失效? 应聘者: 访问权限问题 方法用final修饰 未被Spring管理 错误的传播特性 自己吞了异常 手动抛了别的异常 自定义了回滚异常 方法内部调用 1.访问权 ...

  6. TPT Fusion平台升级,AUTOSAR及ViL测试功能重装上线

    TPT简介 TPT是针对嵌入式系统基于模型的测试工具,特别是针对控制系统的软件功能测试.TPT支持众多业内主流的工具平台和测试环境,可以完成V模式要求所有阶段(MiL-SiL-PiL-HiL-ViL) ...

  7. Ribbon——负载均衡

    一.什么是Ribbon Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接超 ...

  8. Django modules模块

    http://www.cnblogs.com/wupeiqi/articles/5246483.html

  9. c++11之 algorithm 算法库新增 minmax_element同时计算最大值和最小值

    0.时刻提醒自己 Note: vector的释放 1. minmax_element 功能 寻找范围 [first, last) 中最小和最大的元素. 2. 头文件 #include <algo ...

  10. 【LeetCode】899. Orderly Queue 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/orderly- ...